Home/ Questions/Q 3786502
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T11:41:35+00:00

I am retrofitting rollout menus into an existing site and it is looking fine

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0