CSS Navigation Issue...

[schtick]

I have been having some problems with my css navigation. In Fire Fox the drop down appears correctly, however when you look at it in IE it's pushed to the right. Anyone know what im doing wrong here, or have a fix?

http://www.demo29.abcguide.com/nav/nav.html

css file: http://www.demo29.abcguide.com/nav/css/menu.css

Thanks in advance,
--Schtick

[Acey99]

on each of your backgrounds
[ background: url(../images/nav_images/but_shows.jpg); ]

you should add background: url(/foo/) 0 0 no-repeat;

and

#nav li:hover, #nav li.sfhover, body.welcome #nav li.welcome, body.accommodations #nav li.accommodations, body.amenities #nav li.amenities, body.location #nav li.location, body.reservations #nav li.reservations, body.attractions #nav li.attractions, body.contact #nav li.contact {
background-position: 0 33px;

}

background-position: 0 33px; may have to be changed for IE
like :



#nav li:hover, #nav li.sfhover, body.welcome #nav li.welcome, body.accommodations #nav li.accommodations, body.amenities #nav li.amenities, body.location #nav li.location, body.reservations #nav li.reservations, body.attractions #nav li.attractions, body.contact #nav li.contact {
background-position: 0 33px !important;
background-position: 0 30px; /* Try different #'s */

}



Ie's padding/spacing differs from Moz & is really stupid.
remember to compensate for IE7 too it usually is the same as Moz now

the !important line tells the browser to ignore if it doesn't work & try the next available value for the same property (something like that)

look up "!important and css" on google.

[ItsMeOnly]

Actually it's not pushed right: it's centered, because IE likes to inherit that property from #nav ul

[schtick]

Thanks ItsMeOnly and Acey99, i got it fixed. Is anyone getting tired of developing for EI 6 or is it just me?

Cheers,
Schtick

[Acey99]

Always !