Grow your CSS skills. Land your dream job.

Strange reaction to setting display:inline width

  • # April 21, 2010 at 3:28 pm

    I have items in a ul I want inline and to have a specific width. I my menu this way:
    html

    css

    Code:
    #menu li
    {
    display: inline;
    }

    #menu li a
    {
    display: block;
    float: left;
    width: 150px;
    }

    This works great. No problems in any browser. The li’s line up and the a tags allow me to set my widths.

    I’m working on a table like layout and need the same thing but with out links so I did this:
    html

    Code:
    • Item 1
    • Item 2
    • Item 3
    • Item 4
    • Item 5

    css

    Code:
    #list li
    {
    display: inline;
    }

    #list li span
    {
    display: block;
    float: left;
    width: 150px;
    }

    Works in firefox and chrome. However, IE (of course) only displays them as a block element.

    I’m doing my menu the same way it works fine. Any ideas?

    # April 21, 2010 at 5:34 pm

    I copied and pasted the html and css you provided and I looked at it in IE 5.5, IE 6, IE 7 and IE 8 and they all look the same to me. Are you sure you don’t have CSS that you aren’t aware of that might be affecting one of the lists?

    # April 21, 2010 at 5:40 pm

    yeah, i found one line that I meant to removed when I was testing something else.

    I forgot i had an element with clear:both in it. Once I removed it everything worked.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".