SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Suckerfish nav skewed in IE6, okay in others

    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.
    Last edited by sheikyerbouti; Aug 29, 2007 at 10:15.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •