Why Doesn't IE7 recognize my css padding styles on anchor tags?

Question

My site is working fine in Firefox, Safari, Chrome, and Opera, but for some reason IE7 is not recognizing css padding on any anchor tags. I can't figure this out. In IE7, if you look at the tabs that say "exclusives|popular|recent comments" on the homepage http://revolvermag.com, you'll see that there is no padding getting applied.

I've worked around the padding not getting applied to anchor tags elsewhere on the site, but here it looks especially bad. Anyone know of CSS fixes for this?

Answer 1

You can't have padding on non block elements. If you give them a little CSS love:

a { display: block; }

Then they'll respect padding.

Answer 2

a { display: inline-block } might work while keeping the inline-level meaning it doesn't break the page. Can't try though, I don't have IE7. In IE8 inline it works fine.

Answer 3

Add display block to your a so it has a height

.tabNavigation li a {
   display:block
}

and then you need to move the tabs back up 7px so they sit on the line.

.tabs .tabNavigation {
   float:left;
   list-style:none outside none;
   margin:-31px 0 0 -1px;
}