Skip Knox wrote:
> 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.
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
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
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/