...

View Full Version : Horizontal Nav Bar Staggered in IE8



Sandra D
12-01-2009, 02:43 PM
Hope someone can help. I have a ul nav bar that appears fine in earlier versions of IE, but staggered in IE8. It also appears fine in other browsers (Safari, Firefox) ... When I played with the padding (removed padding from .menu a and .menu :visited) it was no longer staggered in IE8, but was too skinny and the drop downs didn't stay down to click. I would be sooo grateful if anyone had any ideas on a fix! (Here is the site (http://www.specialdeliveriez.com) if you'd like to see it live)

CSS:
[CODE]
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type: none;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;

}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float: left;
position: relative;
z-index: 100;

}

/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}

/* style all the links */
.menu :visited {
display: block;
font-size: 12px;
width: 159px;
padding: 7px 0;
color: #000000;
background: url('../../../images/bluebutton.jpg') repeat-x;
text-decoration: none;
margin-right: 1px;
text-align: center;
}
.menu a {
display: block;
font-size: 12px;
font-weight: bold;
width: 159px;
padding: 7px 0px;
color: #000000;
background: url('../../../images/bluebutton.jpg') repeat-x;
text-decoration: none;
margin-right: 1px;
text-align: center;
}
/* style the links hover */
.menu :hover{
color: #000000;
background-image: url('../../../images/ltbluebutton.jpg');
}

/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:159px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul a:hover ul{
visibility:visible;
}
.menu ul li:hover ul{
visibility:visible;
}
[CODE]

and the HTML:
[CODE]
<div class="menu">
<ul>
<li><a href="../index.htm">Home<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]></a><![endif]--></li>
<li><a href="../katybio.htm">About Us
<span class="style1">▼</span><!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="../katybio.htm">Katy's Bio</a></li>
<li><a href="../birth_special_deliveriez.htm">Special Deliveriez</a> </li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]></a><![endif]--></li>
<li><a href="../friends.htm">Friends of the Family<!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tr>

</tr>
</table>
<!--[if lte IE 6]></a><![endif]--></li>
<li><a href="../friendlyfolder_advertisers.htm">Friendly Folder
<span class="style1">▼</span><!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li><a href="../friendlyfolder_advertisers.htm">Friendly
Folder Fun</a></li>
<li><a href="../friendly_folders.htm">Who's Friendly in SWFL?</a></li>

</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]></a><![endif]--></li>
<li><a href="../contact.aspx">Contact Us<!--[if IE 7]><!--></a><!--<![endif]-->
<table>
<tr>

</tr>
</table>
<!--[if lte IE 6]></a><![endif]--></li>
</ul>
</div>

[CODE]

Sandra D
12-01-2009, 10:03 PM
Ok, found a temporary work around, but not an actual fix. Placing this just below the <head> tag causes the site to emulate IE7 on IE8:

[CODE]
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
[CODE]

But if anyone knows of an actual fix, I'd appreciate it!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum