Bottom border not appearing in IE6/7

IE's issues with CSS strikes again!

If you go to this URL, http://www.gpid.com/history.php , with Firefox or some other Gecko browsers, you will notice that the links on the submenu (located directly below the header, above the page title) have a double line border on the right, left and bottom. Unfortunately, the bottom border does not appear in IE6 or 7, though it does in IE8. I have tried various things in the stylesheet to fix this, but have had no luck so far, so I'm turning to you guys in the hopes that someone will have a solution. By the way, a top border also will not appear in IE6 and 7, but that's not a problem for me in this situation since I don't have a top border.

Below are the relevant styles and HTML code.

CSS:

#submenuContainer {
text-align: left;
width: 520px;
padding-top: 5px;
padding-bottom: 10px;
margin: auto;
}
.submenu {
text-align: center;
width: 520px;
}
.linkBox {
border-left: 6px double #004891;
border-right: 6px double #004891;
border-bottom: 6px double #004891;
}
.submenuLink a, .submenuLink a:visited {
text-align: center;
font-weight: bold;
text-decoration: none;
color: #000000;
padding: 0px 4px 0px 4px;
}
.submenuLink a:hover, .submenuLink a:active {
background-color: #0182E5;
color: #000000;
}

HTML:

<div id="submenuContainer">
<div class="submenu"><span class="linkBox submenuLink"><a href="history.php">General History</a></span>&nbsp; <span class="linkBox submenuLink"><a href="board.php">Board Members</a></span>&nbsp; <span class="linkBox submenuLink"><a href="staff.php">GPID Staff</a></span></div>
</div>

In case you're wondering why I have the borders in the linkBox style instead of including them in the submenuLink style, it's because, on hover, a background appears on the links, and I wanted the border to be outside the background in all browsers, in other words, have the background go only to the inside edge of the border. This was the only way I could think of to accomplish it that would work in every browser.

I'd appreciate any suggestions, though I would also really appreciate it if those who post a solution first test it themselves to see if it works. The last time I looked for answers to a CSS problem here, every suggestion I got didn't work.

P.S. I hate IE. :mad:

I think this is a "hasLayout" issue with IE, triggered somehow by your nested divs and spans.

Easiest solution I think would be to remove the #subMenu div entirely, because I don't think this is doing anything.

If I've missed something and you need this div for some other reason, then you could set the width on #subMenu to auto - which fixes the problem for me in IE7 using the developer toolbar.

Something I read somewhere--tried to find it again, but failed--said that it was necessary to do it that way in order to avoid an alignment bug in IE and have the content centered both on the page and within the container. However, I just tested dispensing with the .submenu style and changing #submenuContainer to "text-align: center" on my test site, and it appears to still work correctly in IE6, 7, and 8 (not in 5.5, of course). So either I misread something or the person who wrote that was incorrect. Getting rid of that style will mean that I have to do things differently on the pages that have two rows of submenu links, but that won't be a big problem. Your other suggestion worked as well, but I'll do it the first way. There's no sense in using styles and divs that I don't need.

Thank you very much for your help. :thumbsup: