4 replies [Last post]
vincentmoy
Offline
newbie
Last seen: 12 years 41 weeks ago
Joined: 2008-02-09
Posts: 5
Points: 0

Hi all,

I made a multi-level menu with a modified A List Apart. It works fine will Firefox and Safari. But when I tested it on IE the drop-down menu moved to the right...

Here is the web site
http://filipinobible.99k.org

And here is the CSS:

****************************************************************************************** @charset "UTF-8"; * { margin:0; padding:0; }

p {
padding:10px 0 10px 0;
font-family:Geneva, Arial, Helvetica, sans-serif;
}

Body {
background-image:url(asset/images/Web-Layout_05.gif);
background-repeat:repeat-x;
}

#container {
margin:0 auto;
padding:0;
width:717px;
background-color:white;
border-left-style: outset;
border-left-color: #a4a3a3;
border-left-width:5px;
border-right-style: inset;
border-right-color: #a4a3a3;
border-right-width:5px;
}
#rightedge {
overflow:auto;
}

#header {
background-image:url(asset/images/Header.jpg);
width:717px;
height:117px;
}

#flash {
background-color:blue;
width:717px;
height:163px;
}

#navbar {
background-color:#b6b3b3;
width:717px;
height:1em;
padding:.5em 0;
}

#navbar a {
color:black;
text-decoration:none;
font-size:90%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
}

#nav, #nav ul {
padding:0;
margin: 0;
list-style: none;
line-height: 1;
text-align:center;
}

#nav a {
display: block;
width: 100%;
}

#nav li { /* all list items */
position:relative;
float: left;
width: 20%; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
position: absolute;
background: #b6b3b3;
width:8.5em;
left: -999%; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul li {
width:100%
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
left: 0;
}

#announcement {
float:right;
width:202px;
}

#announcement h2 {
padding-top:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:smaller;
text-align:center;
text-decoration:underline;
}

#content {
padding:25px;
}

h1 {
margin-bottom:20px;
}

#footer {
background-color:#b6b3b3;
position:relative;
width: 717px;
clear: both;
text-align:center;
font-size:.8em;
}

.copyright {
color:#4D4D4D;
}

#footer a {
color:black;
text-decoration:none;
}

#footer a:hover {
text-decoration:underline;
}

******************************************************************************************

Thank you all!

Vincent

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Add position: relative

Add position: relative to

#nav li { position: relative; float: left; width: 10em; /* width needed or else Opera goes nuts */ }

and change auto to 0 here:

#nav li:hover ul, #nav li.sfhover ul { left: 0 }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

vincentmoy
Offline
newbie
Last seen: 12 years 41 weeks ago
Joined: 2008-02-09
Posts: 5
Points: 0

Thanks goodness!! It fixed

Thanks goodness!!

It fixed it just like magic.

But would you mind telling me why those value affect how IE looks? Since I am new for CSS.

Thank again anyways!!

Very appreciate your help :thumbsup:

Vincent

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

position: relative sets a

position: relative sets a new positioning context on the parent element so that the dropdowns take their starting point from the parent <li>. Couldn't tell you why left: 0 works for IE7 but not left: auto.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

vincentmoy
Offline
newbie
Last seen: 12 years 41 weeks ago
Joined: 2008-02-09
Posts: 5
Points: 0

Thank you!

Thank you!