Suckerfish nav skewed in IE6, okay in others

**sheikyerbouti** · Aug 29, 2007 09:30

Imagine that....

I'm trying to sort out why these LI appear vertically in IE6, but act as they should (horizontal nav) in IE7, FF on a pc, as well as FF and Safari on a Mac. They explode the whole design in IE6 and I'm not sure if it's a "3px jog" issue because of the float? I've tried to apply height:1% on some things to force haslayout.... no dice.

If anyone sees what might be buggering this thing, I'd love to hear your thoughts. The page is here.

The XHTML:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<link href="css/nav.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/suckerfish.js">
</script>
</head>

<body>
	<!-- START TOOLBAR -->
    <div id="toolbar">
        <!-- START NAVIGATION -->
            <div id="nav">
                <ul>
                    <li class="on"><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Services</a>
                        <ul>
                        <li><a href="#">Chinking</a></li>
                        <li><a href="#">Staining/Sealing</a></li>
                        <li><a href="#">Pressure Washing</a></li>
                        <li><a href="#">Corn Cob Blasting</a></li>
                        <li><a href="#">Log Replacement</a></li>
                        <li><a href="#">Decking/Railing</a></li>                        
                        </ul>
                    </li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Links</a></li>
                </ul>
            </div>
        <!-- END NAVIGATION -->
    </div>
    <!-- END TOOLBAR -->
</body>
</html>

The CSS:

Code:

/* CSS Document */

html, body, #nav, ul, li, a { margin: 0; padding: 0; }

body { 
	font-family: "Lucida Grande", Tahoma, Helvetica, sans-serif;
	font-size: 80%;
}

#toolbar {
	height: 60px;
	background: #3e475b url(../images/nav_bg.png) repeat-x;
	padding: 0 0 0 30px;
	overflow: hidden;
}

#nav {
	position: relative;
	height: 60px;
	background: url(../images/nav_border.png) 0 0 no-repeat;
	padding-left: 2px;
}

#nav ul {
	list-style: none;
}


#nav a {
	color: #FFF;
	text-decoration: none;
	display: block;
	padding: 0 15px;
	height: 30px;
	line-height: 30px;

}

#nav li.on a { background: url(../images/nav_select4.png) 50% 100% no-repeat; }

#nav li {
	float: left;
	background: url(../images/nav_border.png) 100% 0 no-repeat;
}

#nav li ul {
	position: absolute;
	left: -999em;
	height: 25px;
	background: #3e475b;

}

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

}

#nav li ul li {
	background: url(../images/nav_border2.png) 100% 50% no-repeat;
	float: left;

}

#nav a:hover {
	color: #CCC;

}

#nav li ul a:hover, #nav li.on ul a:hover {
	color: #CCC;

}

#nav li ul { display: block; } /* example shows nav li.on ul */


#nav li ul a {
	padding: 0 10px;
	height: 30px;
	line-height: 30px;

}

Thank you for your ideas!
Pedro

EDIT:
Okay, after reading more threads here about Suckerfish, i realized i didn't have a width set for my LI. That fixed the problem in IE6 of the LI blowing apart the design. Now I have other issues in IE6, and my (.on) class (the little blue arrow graphic) to let the user know which page they are "on" isn't centered under the text link in FF either. I'll work on all of this and post updates as i find solutions.

**Dan Schulz** · Aug 29, 2007 15:30

Is this the updated code you're using? It looks pretty bloated, and as with all things HTML/CSS related, the more code you use than necessary, the greater chance you're going to have a problem creep up when you least expect it.

**sheikyerbouti** · Aug 29, 2007 16:33

Hi Dan,

If you mean Son of Suckerfish, yes this is the updated code with the shorter Javascript file.

It's more bloated than the example the HTML Dog cites, because they gave just rudimentary styling to their navigation. Could this be done more leanly? I'm sure someone with more skills could, yes....

My nav needs to be horizontal at both levels (the original example gave a vertical list for sub-nav items) which happens in FF, IE7, Safari on Mac, etc. Just doesn't happen on IE6.... of course.

Ideas as to what to try are greatly appreciated.

Thanks,
Pedro

User Tag List

Thread: Suckerfish nav skewed in IE6, okay in others

Thread Tools

Display

Suckerfish nav skewed in IE6, okay in others

Bookmarks

Bookmarks

Posting Permissions