Posted on Wednesday, 8th July 2009 by Stephen
I’ve recently begun to favor slightly different ways of layout out a main navigation div in CSS. I had been using padding on my a tags, and padding on a span tag inside them. However, line-height seems to be a viable method of achieving the same effect with less code. It generally seems IE-safe too, although you have to be a bit verbose for the poor thing.
If you do use a span inside your a (for additional background images and such), you’ll need to either re-declare the same line-height on it, or display it as a block-level element, either one of which is easier than trying to divide up your padding correctly around your text. But in some cases, using the block-level option may cause IE’s box model to freak out, rendering your a/li elements block-level as well. If so, float the span. This, however, may hide the background of the span, in which case either height or zoom must be added to the parent a/li tags.
After writing this out, it sure doesn’t look easier, but at least my code is pretty… thanks to Nate Hanna for (non-monetary) tips!
Posted in CSS | Comments (0)
I followed 