Seventeen Pencils » CSS http://www.17pencils.com Brought to you by Stephen Davis Tue, 15 Sep 2009 17:35:43 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Navigation Methods, Etcetera http://www.17pencils.com/2009/07/navigation-methods-etcetera/ http://www.17pencils.com/2009/07/navigation-methods-etcetera/#comments Thu, 09 Jul 2009 03:56:58 +0000 Stephen http://www.17pencils.com/?p=33 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. :P

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!

]]> http://www.17pencils.com/2009/07/navigation-methods-etcetera/feed/ 0