Banner problem: navbar overflows banner block.

Navbar is ul, li elements floated left, a elements blocked

[albo]

The banner itself is styled text-align: center; padding: 1em;

The navbar is a ul with margin: 0; padding: 0 0 0 8em;

The li elements are float: left; margin: 0;

The a elements (for each li) are display: block; padding: .1em .5em; padding: 1px outset #4e5999;

The banner has a border, and a background-image, and IS NOT floated!

Up to now, I have placed a kludge clearing div after the nav bar (1px, clear: both, display: block; ...that sort of thing).

Without the kludge, the navbar dips below the containing div at least half an em.

Seems sort of a cheat. Is there, as I suspect, a better way? I.e., what am I doing, wrong? Teach me, oh masters!

[swa66]

Assuming typical code ...

Since the LI is floated, the UL has nothing inside it anymore to give it height. Neither would your banner and hence the float sticking out beneath the banner and is going to push your content to a side.

Either clear it, or either give the banner some height.

[albo]

It already had a clear: left and the banner had height: auto

It should perhaps be noted that one of the li items has a suckerfish attached to it.

Any other advice?

[swa66]

AFAIK "height: auto" is the default, and it'll let it collapse. You can push the content below it away with other things like e.g. margins, but it's probably easier to set a clear on the element just after the banner.

Perhaps some (short) sample code would yield more responses.

[albo]

ul { margin: 0; padding: 0; }
...
ul#navigate { clear: left; padding: 0 0 0 8em; }
ul#navigate ul { padding: 0; }
ul#navigate, ul#navigate ul { list-style-type: none; margin: 0 0 .5em 0; }

ul#navigate a { background: #fefefe url("nav3.png") repeat-x; border: 1px outset #4e5999; color: #000; display: block;
font-weight: normal; padding: .1em .5em; text-decoration: none; }

ul#navigate li a:hover, ul#navigate li a:active, ul#navigate li a:focus { background: #d6d6ee url("nav0.png") repeat-x; }

ul#navigate li a#current, ul#navigate li a#current:hover, ul#navigate li a#current:active, ul#navigate li a#current:focus {
background: #aaeeaa url("nav1.png") repeat-x; color: #000; }

ul#navigate li a#projects_list { background: #ededbc url("nav4.png") repeat-x; }
ul#navigate ul li a { width: 8em; }
ul#navigate li { float: left; margin: 0; }

ul#navigate ul li { width: 8em; }
ul#navigate li ul { left: -999em; position: absolute; width: 8em; }

ul#navigate li:hover ul, #nav li.sfhover ul { left: auto; }
...
#banner { background: #fdfffc url("sfmgahdr_new.png") no-repeat fixed; border: 1px outset #4e5999; color: #000;
height: auto; margin: 0 0 .5em 0; padding: 1em; text-align: center; }
...
<div id="banner">
...
<ul id="navigate">
<li><a href="..."/></li>...
<li><a href="..."><!-- suckerfish -->
<ul><li><a href="..."/></li>
<li><a href="..."/></li>
etc....
</ul></li>
etc....
</ul>
</div>

[SuzyUK]

instead of the clearing div, you can contain the floated list in the banner using overflow: auto; and you will aslo need to trigger hasLayout = true for IE6 and below.. doing that however will mean the list is included in the banner and the bottom padding will be applied below it so you will likely not need that anymore.

#banner {
background: #eee;
border: 1px outset #4e5999;
color: #000;
margin: 0 0 .5em 0;
text-align: center;

padding: 1em 1em 0 1em; /* remove bottom padding it will provided by list once it's contained */
zoom:1; /* contain floats <=IE6 */
overflow: auto; /* contain floats other browsers */
}

[albo]

Hmmm...does the trick! But, I'd never heard of "zoom" before! (Neither has the CSS validator!) What does it do?

[swa66]

"zoom:1" is only understood by IE. It gives the "haslayout" property to an element.

If you want (you should) to have CSS that actually validates, put it in a IE only conditional comment (in the html), that way it won't haunt you when IE8 comes out or if zoom one day in a next version of CSS would mean something entirely different.

[albo]

Okay! I've been reading up on this "has layout" matter, and I thank you for the introduction. (Dad-blast IE...grrr...so it goes.)