CSS Vertical Menu Indenting in Explorer

iHATEsushi · 07-15-2008, 04:19 PM

I am having issues with my CSS displaying properly in Explorer 7 (of course!). I have posted a generic example so you may see what I am working with as it provides the same end result I am getting. Pretend I have a table here... this is the way I have to do it, so I won't get too much into why. It is displaying properly in Firefox, but when its viewed in Explorer 7, it massively indents the first link, and bumps over the ones below it too but not as far.

Can anyone help me see what I am missing here... Sometimes when I look at code too long, my mind will over complicate things and I fail to see the itty bitty mistakes. Thanks, or if someone else has a way to control how it's viewed in explorer through *html {} hack, anything!!! any help!!! will do wonders for my sanity. Thanks!

If you copy from this line below and stick the whole thing in an HTML sheet you will see what I mean.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">

</script>
<style>
body {
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin:0px;
}
.main_bg {
background-image:url(images/main_bg_gradient.gif);
background-repeat:repeat-x;
background-color:#7AAFDB;
}
.top_bg {
background-image:url(images/top_bg.gif);
background-repeat:repeat-x;
background-color:#FFFFFF;
height:197px;
}

.container {
vertical-align:top;
margin-left:85px;
margin-top:0px;
}
.col {
margin-top:0px;
vertical-align:top;
font-family:Helvetica, Arial, sans-serif;
padding-top:0px;
}
.col_rside {
background-image:url(images/2col_06.gif);
background-repeat:repeat-y;
width:17px;
height:100%;
}
.col_lside {
background-image:url(images/2col_04.gif);
background-repeat:repeat-y; width:14px;
}
.col_bottom {
background-image:url(images/2col_10.gif);
background-repeat:repeat-x;
}
.col_top_rc {
background-image:url(images/2col_03.gif);
background-repeat:no-repeat;
}
.col_top_lc {
background-image:url(images/2col_01.gif);
background-repeat:no-repeat;
height:14px;
}
.col_top {
background-image:url(images/2col_02.gif);
background-repeat:no-repeat;
}
.colb_top {
background-image:url(images/heading_blue_bg.gif);
background-repeat:repeat-x;
}
.colb_bottom {
background-image:url(images/testnav2_06b.gif);
background-repeat:repeat-x;
width:180px;
}
.colb_rc {
background-image:url(images/2col_11.gif);
background-repeat:no-repeat;
width:17px;
height:17px;
}
.colb_lc {
background-image:url(images/2col_08.gif);
background-repeat:no-repeat;
width:14px;
height:17px;
}

.menu {
margin-top:0px;
vertical-align:top;
padding-top:0px;
}
.menu_rside {
background-image:url(images/testnav2_04.gif);
background-repeat:repeat-y;
height:100%;
width:15px;
}
.menu_bottom {
background-image:url(images/testnav2_06.gif);
background-repeat:repeat-x;
width:189px;
}
.menu_inside {
background-color:#FFFFFF;
padding-left:14px;
padding-top:6px;
}
.menu_inside a {
color:#000000;
text-transform:uppercase;
text-decoration:none;
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
outline: none;
padding:0px;
}
.menu_inside a:hover {
background-image:url(nav_over.gif);
background-repeat:repeat-x;
visibility:visible;
border-right:solid;
border-left:solid;
border-color:#96C1E6;
border-bottom-color:#CCCCCC;
border-bottom:thin;
border-top:thin;
padding:0px;
}

h1 {
font-family:Helvetica, Arial, sans-serif;
font-stretch:expanded;
font-size:14px;
text-align:center;
color:#000000;
text-transform:uppercase;
}
p {
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
text-align:justify;
vertical-align:top;
margin-bottom:10px;
margin-top:0px;
}
a {
color:#0063AF;
}

.bluebox {
margin-top:0px;
vertical-align:top;
padding-top:0px;
}
.bluebox_inside {
background-color:#FFFFFF;
padding-left:14px;
padding-top:6px;
}
.bluebox_in {
background-color:#FFFFFF;
padding-left:0px;
padding-top:6px;
}
.bluebox_rside {
background-image:url(images/menu-template_06.gif);
background-repeat:repeat-y;
width:17px;
}
.bluebox_top {
background-image:url(images/menu-template_02.gif);
background-repeat:repeat-x;
height:44px;
width:100%;
}
.bluebox_lside_top {
background-image:url(images/menu-template_01.gif);
background-repeat:no-repeat;
height:44px;
width:14px;
}
.bluebox_rside_top{
background-image:url(images/menu-template_03.gif);
background-repeat:no-repeat;
height:44px;
width:17px;
}
.bluebox_bottom {
background-image:url(images/menu-template_08.gif);
background-repeat:repeat-x;
height:17px;
width:100%;
}
.bluebox_lside_bottom {
background-image:url(images/menu-template_07.gif);
background-repeat:no-repeat;
height:17px;
width:14px;
}
.bluebox_rside_bottom {
background-image:url(images/menu-template_09.gif);
background-repeat:no-repeat;
height:17px;
width:17px;
}
.bluebox_inside a {
color:#000000;
text-transform:uppercase;
text-decoration:none;
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
outline: none;
}
.bluebox_inside a:hover {
background-image:url(nav_over.gif);
background-repeat:repeat-x;
visibility:visible;
border-right:solid;
border-left:solid;
border-color:#96C1E6;
border-bottom-color:#CCCCCC;
border-bottom:thin;
border-top:thin;
}
.mid_length_divider {
background-image:url(images/mid_length_divider.gif);
background-repeat:no-repeat;
width:402px;
height:20px;
}
.full_length_divider {
background-image:url(images/full_length_divider.gif);
background-repeat:no-repeat;
width:627px;
height:20px;
}

img.floatLeft {
float: left;
margin-right:20px;
}
img.floatRight {
float: right;
margin-left:20px;
}
.boxHeaderFont {
font-family: Arial, Helvetica, sans-serif;
color:white;
font-weight:bold;
font-size:13px;
background-image:url(images/menu-template_02.gif);
}
<!--
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}

#menu {
position: absolute; /* Menu position that can be changed at will */
top: 0;
left: 0;
z-index:100;
width: 100%; /* precision for Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-position: inside;
list-style-type: none;
}
</style>

</head>

<body>
<tr><td colspan="2" class="menu_inside"><dt onclick="javascript:show('smenu1');"><p><a href="#">MAIN TITLE 1</a></p>
</dt>
<dd id="smenu1">
<ul>
<li><a href="#">name one</a></li>
<li><a href="#">name two</a></li>
<li><a href="#">name three</a></li><p></p>
</ul>
</dd>
<dt onclick="javascript:show('smenu2');"><p><a href="#">MAIN TITLE 2</a></p>
</dt>
<dd id="smenu2">
<ul>
<li><a href="#">name one</a></li>
<li><a href="#">name two</a></li>
<li><a href="#">name three</a></li>
<li><a href="#">name four</a></li>
<li><a href="#">name five</a></li><p></p>
</ul>
</dd>
<dt onclick="javascript:show('smenu3');"><p><a href="#">MAIN TITLE 3</a></p>
</dt>
<dt onclick="javascript:show('smenu4');"><p><a href="#">MAIN TITLE 4</a></p>
</dt>
</td>
</tr>

</body>
</html>