CSS Navigation Alignment Problem in Internet Explorer

theOtherHand · 12-30-2010, 10:30 PM

Hello Everyone

I am have some trouble with my ie "break it till you fix it" mojoe. I am using css sprite navigation which is working wonderfully in all other browsers.

The problem!(lack of compliance?)

The active state stays horizontally aligned but adds(reveals?)pixels as you move down through the nav.

The hover state begins 10px or so out of vertical alignment then adds(reveals?)pixels as you hover down through the nav.
http://vibrantvisions.ca/sQNew/index.html

Thanks for your time

PixelPusher · 01-05-2011, 03:38 PM

The reason you are having issues with your menu (and the sprites) is due to invalid html. If you use list items (li tags), the first parent (containing element) MUST be a list tag (ul tag). So try changing your html to this:

HTML

HTML Code:

<ul id="nav">
        <li id="home"><a href="index.html" title="House Cleaning Toronto "><span>House Cleaning</span></a></li>
        <li id="office"><a href="office-cleaning-toronto.html" title="Office Cleaning Toronto"><span>Office Cleaning</span></a></li>
        ...
</ul>

theOtherHand · 01-05-2011, 06:00 PM

Thanks for the response and example.

PixelPusher · 01-06-2011, 03:00 PM

Quote:

Originally Posted by theOtherHand

Thanks for the response and example.

Anytime, your welcome. Let us know if you still need further help.

gumspitter · 01-08-2011, 07:27 AM

Post your css please. My be something wrong with that code

12-30-2010, 10:30 PM	#1
theOtherHand New Member Join Date: Dec 2010 Posts: 2	CSS Navigation Alignment Problem in Internet Explorer Hello Everyone I am have some trouble with my ie "break it till you fix it" mojoe. I am using css sprite navigation which is working wonderfully in all other browsers. The problem!(lack of compliance?) The active state stays horizontally aligned but adds(reveals?)pixels as you move down through the nav. The hover state begins 10px or so out of vertical alignment then adds(reveals?)pixels as you hover down through the nav. http://vibrantvisions.ca/sQNew/index.html Thanks for your time

01-05-2011, 03:38 PM	#2
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	The reason you are having issues with your menu (and the sprites) is due to invalid html. If you use list items (li tags), the first parent (containing element) MUST be a list tag (ul tag). So try changing your html to this: HTML HTML Code: <ul id="nav"> <li id="home"><a href="index.html" title="House Cleaning Toronto "><span>House Cleaning</span></a></li> <li id="office"><a href="office-cleaning-toronto.html" title="Office Cleaning Toronto"><span>Office Cleaning</span></a></li> ... </ul> __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

01-05-2011, 06:00 PM	#3
theOtherHand New Member Join Date: Dec 2010 Posts: 2	Thanks for the response and example.

01-08-2011, 07:27 AM	#5
gumspitter Bronze Member Join Date: Sep 2009 Posts: 57	Post your css please. My be something wrong with that code