CODEWITHSUNDEEP
cssinternet-explorerdoctype
jerrygarciuh
jerrygarciuh

Reputation: 22018

Inherited left position different in IE

I am retrofitting rollout menus into an existing site and it is looking fine everywhere but IE. Here's a hidden page with the new menuing: http://preemiestoday.com/pages/about_board.php

The menu code looks like this:

<ul>
<li  id='link0'><a href='/index.php'>Home</a></li>
<li  id='link1'><a href='/pages/about_new.php'  onmouseover='showabout()'  onmouseout='hideabout()'>About Us
<div id="aboutRollout" style="display:none" onmouseover="showabout()"  onmouseout="hideabout()">
<ul>
<li><a href="pages/about_new.php">Mission</a></li>
<li><a href="/pages/about_board.php">Board Members</a></li>

<li><a href="/pages/about_donate.php">Donate</a></li>
<li><a href="/pages/about_partners.php">Partners</a></li>
</ul></div></a></li>
<li  id='link2'><a href='/pages/members.php'>Join Us</a></li>

And so on. The CSS for the about rollout looks like this:

#aboutRollout {
position:absolute;
left:inherit;
top:193px;
width:120px;
z-index:5;
background-color:#CAD5EC;
color:#000;
border:1px solid #fff;
padding-top:5px;
z-index:100;
}
#aboutRollout LI {
border:none;
padding: 0 5px 5px 5px;
font-size:11px;
white-space:nowrap;
}

#aboutRollout LI A {
background-color:#CAD5EC;
color:#000;
text-decoration:none;
}

#aboutRollout LI A:HOVER {
background-color:#CAD5EC;
color:#000;
text-decoration:underline;
}

The issue is that IE interprets the left:inherit; on #aboutRollout as being about the end of the link text as opposed to the beginning.

Any advice on getting it to line up under the LI in IE?

Upvotes: 0

Views: 532

Answers (1)

thirtydot
thirtydot

Reputation: 228202

Simply adding this DOCTYPE as your first line to bring it out of "Quirks mode" in IE lines up the menu in IE7/8, Firefox, Chrome:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

I didn't notice it screwing up anything else (major) on your page.

Upvotes: 1

Related Questions