CSS - IE8 - Padding - Headaches

[TruthElixirX]

So, right now this is what I have:

/*custom links*/
.location a {
color:#FFFFFF;
padding:8px 16px 8px 16px;
background-color:#FBB03B;
font-size: 11pt;
text-decoration:none;
}

.prefix a {
color:#FFFFFF;
padding:8px 16px 8px 16px;
/*padding:8px;*/
/*background-color:#5C7099;*/
font-size: 10pt;
text-decoration:none;
}

.prefix div{
padding:8px 16px 8px 16px;
background-color:#3c003c;
}

.prefix a:link {color:#FFFFFF;} /* unvisited link */
.prefix a:visited {color:#FFFFFF;} /* visited link */

.prefix a:hover {
color:#FFFFFF;
background-color:#9CC626;
padding:8px 16px 8px 16px;
}
.prefix a:active {color:#FFFFFF;} /* selected link */

.location a:link {color:#3A003B; padding:8px 16px 8px 16px;}
.location a:visited {color:#3A003B;}
.location a:hover {color:#FFFFFF;background-color:#3C003C;}
.location a:active {color:#FFFFFF;}


This is my CSS.

This is my HTML code:


<div class="location">
<div height="999px">

<style type="text/css">
.L$foruminfo[forumid] {padding:8px 16px 8px 16px;background-color:#3C003C;color:#FFFFFF;}
</style>

<a href="index.php"><span class="L">Everything</span></a>
<if condition="is_member_of($vbulletin->userinfo, 9,11)"><a style="padding: 8px 8px 8px 8px;" href="forumdisplay.php?f=17"><span class="L17">Dublin 4</span></a>
<a href="forumdisplay.php?f=510"><span class="L510">Ballsbridge</span></a></if>
<if condition="is_member_of($vbulletin->userinfo, 9)"><a href="forumdisplay.php?f=38"><span class="L38">The Gasworks</span></a></if>
<if condition="is_member_of($vbulletin->userinfo, 11)"><a href="forumdisplay.php?f=49"><span class="L49"> Cranmer Place</span></a></if>
</div>
</div>

Now, In Firefox 3.5, Opera, and Chrome it looks like it should:

102252

But in IE it looks like so:

102251

I've tried all sorts of fixes for the thing to make the bottom of the yellow part extend out, and can't for the life of me figure it out.

[Dismounted]

Have you tried reducing the margin?

[TruthElixirX]

Have you tried reducing the margin?

Tried reducing the margin to zero with no luck.

[Dismounted]

Tried negative margins?

[TruthElixirX]

Tried negative margins?

What margin would you recommend making negative?

[Dismounted]

Probably margin-bottom.

[TruthElixirX]

Probably margin-bottom.

still no dice. :(

[Dismounted]

Instead of a container inside a container, have you tried just using a border instead?

[TruthElixirX]

Instead of a container inside a container, have you tried just using a border instead?

I'm not sure what you mean?

[Dismounted]

Instead of having one container for the background (yellow) bit and another for the dark bit, just use one and use border-left/border-right.

[mattmcc]

Here's a couple tricks I use to help with CSS:

1) I try to avoid using padding as much as possible as IE seems to have problems with it plus it messes up the width/height of block elements. Try to replace padding with margin as much as you can.

2) For IE, if you have IE 7 or IE 8 hit F12 to open up the Developer Toolbar. This is their version of Firebug. It will allow you to inspect elements and make changes to the page directly rather than saving the changes in your editor and then reloading.

Edit - actually after checking out the images you attached, I realised I had this same problem on another project I worked on. I will try to remember to have a look at what I did and let you know if you still need help. I think it had something to do with setting the outer <div> to relative.