CSS and widths of LI elements

[carl67lp]

I'm attempting to convert the following site into a completely table-less layout (a single page referenced below; see why later):

http://www.dev-alumni.wayne.edu/alumni/travel.php

Right now, I've gotten the vast majority of it more-or-less the way I want it. The mauve masthead with the logo, the sidebar navigation (both ULs, in fact), and the main content/picture are nearly pixel perfect.

The problem I'm having is with the navigation bar at the bottom:

http://wayne.laikadog.com/advancement/index-stable.html

The real, table-filled site currently has that laid out in a table, with CSS doing the borders and hover effects (which I've grown to hate). However, transitioning this to a table-less form (at laikadog.com) is proving problematic.

Here's the new code:

<div id="wsunav">
    <ul id='navrow1'>
        <li id='wsuhome'><a href='http://www.wayne.edu/'>WSU Home</a></li>
        <li id='facstaff'><a href='http://www.wayne.edu/faculty_and_staff/'>Faculty and Staff</a></li>
        <li id='acadlib'><a href='http://www.wayne.edu/academics_libraries.html'>Academics and Libraries</a></li>
        <li id='research'><a href='http://www.research.wayne.edu/'>Research</a></li>
        <li id='apply'><a href='http://www.apply.wayne.edu/'>Apply to Wayne State</a></li>
        <li id='directories'><a href='http://www.ucomm.wayne.edu/~fsd/'>WSU Directories</a></li>
    </ul>
    <ul id='navrow2'>
        <li id='futurestudents'><a href='http://www.wayne.edu/future_students/'>Future Students</a></li>
        <li id='currstudents'><a href='http://www.wayne.edu/current_students/'>Current Students</a></li>
        <li id='schcoll'><a href='http://www.wayne.edu/academic_programs.html'>Schools and Colleges</a></li>
        <li id='campcomm'><a href='http://www.wayne.edu/visitors_and_community/'>Campus and Community</a></li>
        <li id='athletics'><a href='http://sdcl.wayne.edu/Athletics/index.htm'>Athletics</a></li>
        <li id='aboutwsu'><a href='http://www.wayne.edu/about_wayne2.html'>About Wayne State</a></li>
    </ul>
</div>

I can successfully get the two ULs to line up on two lines, but the problem is that I can't seem to force the LIs to have a set width (in this case, 1/6, or roughly 16%, of the total UL width). Right now, they simply take up as much room as they need.

I've tried to set a background-image with a transparent GIF of 116px by 1px, but that didn't work--it simply truncated the image, using only as much width as there is text.

I'd really appreciate any advice or insight anyone might have into this. My ultimate goal is to have a site to which I can apply multiple style sheets--in effect, allowing for completely new looks simply by altering the style sheet (think CSS Zen Garden).

Thanks.

 

[MalusCaelestis]

ul#navrow1 li, ul#navrow2 li {
    display: block;
    float: left;
}

 

[carl67lp]

Originally posted by MalusCaelestis

ul#navrow1 li, ul#navrow2 li {
    display: block;
    float: left;
}

Sheer genius!

I'm staring at it, though, and I'm not quite sure why it works. Could you explain? I thought display: block would cause things to behave considerably differently than they do now.

 

[MalusCaelestis]

Originally posted by carl67lp
Sheer genius!

I'm staring at it, though, and I'm not quite sure why it works. Could you explain? I thought display: block would cause things to behave considerably differently than they do now.

It does make it behave differently. If you were to leave off the "float: left;" property, each item would go on its own line.

The reason you want to use the "display: block;" property is that with block elements, you can specify the dimensions of the box. With inline elements (the "li" element is an inline element by default), their dimensions are the same as the dimensions of their content. Not exactly great for layouts.

The reason you want to use the "float: left;" property is that when you have block elements, there's an implied line break after each element. Floating the elements essentially gets rid of that implied line break. (Well, this is the effective behavior. What's actually happening is very different but in this case, the actual behind-the-scenes behavior is less relevant.

 

[carl67lp]

Originally posted by MalusCaelestis
It does make it behave differently. If you were to leave off the "float: left;" property, each item would go on its own line.

The reason you want to use the "display: block;" property is that with block elements, you can specify the dimensions of the box. With inline elements (the "li" element is an inline element by default), their dimensions are the same as the dimensions of their content. Not exactly great for layouts.

The reason you want to use the "float: left;" property is that when you have block elements, there's an implied line break after each element. Floating the elements essentially gets rid of that implied line break. (Well, this is the effective behavior. What's actually happening is very different but in this case, the actual behind-the-scenes behavior is less relevant.

Thanks for the explanation. It makes a lot of sense about block-level elements being sizable versus inline being unsizable.

Thanks again for your help!

 

[carl67lp]

I've launched the newly tableless design with much success, but that navbar is coming back to bite me. It's a completely different problem now--the first five items on the second row drop down from their proper spot. This only seems to happen in non-IE browsers...which is completely puzzling.

Please see the following for an example (remember--look at it in Mozilla or Opera or Netscape or Firebird, but not IE):

http://www.dev-alumni.wayne.edu/giving/

Anyone have any ideas why it might be doing that?

 

[Dew]

styles.css

li {
margin: 0;
padding: 0;
margin-bottom: 2px;
}


Change it to that. I downloaded the page and did it locally. Works fine in firebird 0.7 now.

 

[carl67lp]

Originally posted by Dew
styles.css

Cool.

Actually, I put it into wsunavbar.css since that's where it logically belongs, but it works nonetheless.

I never thought about styles.css and how it would logically override wsunavbar.css.

I'm still baffled by the fact that it was only the first five, but what do I care now? Thanks for the help!

 

[Dew]

Well, what happened is I only downloaded the page and wsun.css. It displayed for the most part fine, but a little weird on the font. When I downloaded styles.css it had the error. So I knew that it was in styles.css. From there I looked at what was applied to the tags. I thought a 10px bottom thing was pointless. So I picked the number two and it worked.