Skip Knox wrote: > http://webtest.boisestate.edu/templatedev/ > > I have a leftnav with dark blue background and a 9px lighter blue > stripe on its right. The leftnav actually has three components: logo at > the top, menu area below it, and a fade below that. > > I keep running into problems with white space appearing as I change > font size in my browser. I suspect I'm going about designing it wrong. > Here's how I'm doing it now. > <snip>
I actually don't see any white gaps appearing, but I do agree that it could be done a lot more cleanly. Here's how I would do it: Take a div, give it the id #nav (or some other name more meaningful than the current "leftbox"), and place the image of the logo (just the logo, no light blue strip) and the ul inside. Float #nav left. Slice an image that contains the full dark blue width and light blue strip and apply this as a background to #nav, set to repeat-y. Slice another image that contains the bottom fade image. Apply this as a background image to the ul inside #nav, no-repeat, positioned to the bottom. Give the ul enough bottom padding so that its content doesn't overlap the fade image. Done. No nested divs, simple CSS, degrades well in non-CSS and non-image browsers. Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
