SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Threaded 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.


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
  •