3 replies [Last post]
edubz1585
Offline
newbie
Last seen: 12 years 46 weeks ago
Joined: 2007-05-14
Posts: 2
Points: 0

I'm rather new to making ul navigation menus. I've run into a problem with IE that has been frustrating me for weeks. I've created a horizontal ul menu with padding that won't show correctly on IE. Any help would be greatly appreciated!

As you can see it's very simple..here is CSS:

ul#navlist
{
white-space: nowrap;
float: right;
margin-top: 4px;
margin-right: 50px;
margin-left: 0px;
padding-right: 0;
padding-left: 0;
}

#navlist li
{
display: inline;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
color: #FFFFFF;
font-weight: bold;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
}

#navlist a {
padding-right: 8px;
padding-left: 8px;
padding-top: 6px;
padding-bottom: 6px;
}

#navlist a:link, #navlist a:visited
{
color: #fff;
text-decoration: none;
background-image: url(images/navbg.jpg);
background-repeat: repeat-x;
}

#navlist a:hover
{
color: #FFE9BF;
text-decoration: none;
}

web site's url is www.dcisound.com if needed

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 24 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Try #navlist

Try
#navlist a{display:inline-block;}/*to trigger hasLayout for IE*/
#navlist a{display:block;}/*may be necessary for Opera or Firefox*/

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 32 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Not tested. This appears to

Not tested.

This appears to be the infamous doubled float margin bug.

ul#navlist
{
white-space: nowrap;
float: right;
margin-top: 4px;
margin-right: 50px;  ⇐ doubled to 100px in IE
margin-left: 0px;
padding-right: 0;
padding-left: 0;
}

The fix is non-intuitive. Add {display: inline;}. The inline value is ignored—floats only have either block or none for display values. It works, though. It is IE. :shrug:

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

edubz1585
Offline
newbie
Last seen: 12 years 46 weeks ago
Joined: 2007-05-14
Posts: 2
Points: 0

YAY!

:thumbsup:
I inserted the
#navlist a{display:inline-block;}
and it cleared up IE's problem. Thanks for the help, i almost called in a bomb threat to microsoft. jk lol (IE is THAT frustrating)
Thank you!!