At 04:14 PM 1/13/2006, Mark - JForce New Media wrote: >Can someone help me with something? I can't get the bottom border >image to be visible between these navigation tabs and the white area >below them. In a book I bought by Dan Cedarholm, this border should >be visible unless a tab is hovered over and the hovered tab should >overlap the border. >http://www.bodyrecess.com/test/defaultnew.htm
Hi Mark, Because your LIs are floated left, they're taken out of the flow, therefore their container UL doesn't know how big they are. The UL thinks it's empty of children with height, so its own height is zero. If you give the UL a red border you'll see this. The wiki associated with this listserve has several solutions: http://css-discuss.incutio.com/?page=ClearingSpace Here are some solutions that I consider to be hacks but nonetheless use from time to time: - Apply a height to the UL, such as 2em or 3.1em, whatever looks right. This is a hack because it assumes the tabs are all that consistent height and that the tabs are all in a horizontal array. If the user increases the browser font size so much that the tabs wrap around or the text within a single tab wraps around, the UL will no longer contain the tabs (as you're seeing now). - Clear the float inside the UL, for example by applying clear: left; to a final LI element. Because it isn't floated left, this last list item will be in the flow, and the parent UL will see it and stretch down to contain it. The item will wrap around to the left margin, so it can't be a proper member of your list, and you'll likely want to give it a zero height or sumthin so it doesn't push the bottom of the UL down any farther than it has to. This is a hack because that final float-clearing LI won't likely have any semantic purpose. - Contain the UL in a wrapper DIV, apply the bottom background to that container, and clear the float outside the UL but inside the DIV, for instance with a BR { clear: left; }. This is a hack because the BR is non-semantic. <div id="topMenu"> <ul> <li id="t-welcome"><a href="default.htm">Welcome</a></li> ... </ul> <br /> </div> #topMenu { background: #FFCB2D url(images/topMenu_bg_undrln.gif) repeat-x bottom left; } br { clear: left; } Good luck, Paul ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
