MAKING IE WEEP AT MY FEET

I don't usually wirte about CSS here, but man you know when something has been making you crazy for litreally years, and you finally find the solution and as you expected it is relatively simple and doesn't require some nincompoop of a ninja-style technique to make it work.

I found just such a solution.

Okay problem; when you make a menu in CSS, so the links have some rollover effect on the background. generally IE facks with your plans because it doesn't get the padding right. This is especially shitty if your links are sitting in some sort of bar where they are supposed to sit flush against the top and bottom.

So I've been approaching this shitty padding issue for years, most of what I read involved this circuitous routes around the problem, make a background image 5 times the size of your nav space and then set it to hid behind yet another div.

Or set a bunch of rules for IE that will fuck your design in firefox - but then hide those extra rules from firefox. etc.. etc..

See, I am a lazy integrator and any time I see over 1000 words explaining a solution, then it's just become a problem again.

So today, I was testing my new search strategy. Instead of using technical language for queries ("tabbed menu no image for IE7") I used a simpler question ( "padding-bottom doesn't work in IE") that actually described the problem.

Et voila I found a solution.

First off, here's what's going on in IE land.(get ready for this Jen) if you put your A tag inside a list-item, the A tag inherits the lists properties. That doesn't mean that you need to set the list to have padding because that padding will just hold your A's rules inside itself. Which means your background color will still sit inside a border from the list-items padding-rule. By that same token any padding you set on A will also live inside your lists default padding regardless of whether you set padding:0px, got it? a tricky little double bind. Padding, padding everywhere and not a bit that works,(typical of IE).

So what to do? Set your A rule to be relative.

That's it I swear. I just did it, and it worked.

Position: relative; and suddenly the A has broken free of any constraints placed on it by that nasty list item. Padding galore baby !!

Okay, back to work.

You know how long it took to read that little hint by the way 5 minutes. That's how I like to learn. quickly.