www.webdeveloper.com
Results 1 to 12 of 12

Thread: [RESOLVED] IE6 Issue

  1. #1
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356

    resolved [RESOLVED] IE6 Issue

    Hey guys. If you go here: http://kmkwebdevelopment.com/ You will see the navigation works fine. However, in IE6, it does not. The reason is that I had to change on part of the CSS so that the navigation displayed horizontal in IE6. The following is what I had to change (had to add inline instead of block):

    Original (which is fine in firefox and IE7 & 8):
    Code:
    .topnav{
    	display:block;
    	height:75px;
    	width:980px;
    }
    Changed CSS for IE6:
    Code:
    .topnav{
    	display:inline;
    	height:75px;
    	width:980px;
    }
    Is there a way to still have the nav both horizontal and working in IE6?
    Last edited by Captainkewl; 03-12-2010 at 10:02 AM.

  2. #2
    Join Date
    Oct 2009
    Location
    Lawrence, KS
    Posts
    52
    Try using display: block; and float: left;

  3. #3
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356
    Thanks for your suggestion. I gave it a try, but when I did that, the buttons went vertical on me and they were displaying both the button and the rollover button.

  4. #4
    Join Date
    Oct 2009
    Location
    Lawrence, KS
    Posts
    52
    Can you post your entire code for the navigation?

  5. #5
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356
    Sure thing:

    This is the main stylesheet code:
    Code:
    #navigation {
    	width:980px;
    	background:url(images/nav.jpg) no-repeat;
    	height:96px;
    }
    
    #nav { 
    	float:left;
    	width:980px;
    	margin-top:10px;
    	margin-left:38px;
    }
    
    #nav li {
    	float:left;
    	display:inline;
    	width:150px;
    	height:75px;
    	margin-left:0px;
    }
    
    .home, .about, .education, .portfolio, .services, .contact {
      display: block;
      width: 300px;
      height: 75px;
      background: url(images/home.jpg) no-repeat 0 0;
    }
    
    .about {background: url(images/about.jpg) no-repeat 0 0;}
    
    .education {background:url(images/education.jpg) no-repeat 0 0;}
    
    .portfolio {background:url(images/portfolio.jpg) no-repeat 0 0;}
    
    .services {background:url(images/services.jpg) no-repeat 0 0;}
    
    .contact {background:url(images/contact.jpg) no-repeat 0 0;}
    
    .home:hover, .about:hover, .education:hover, .portfolio:hover, .services:hover, .contact:hover{ background-position:-152px 0;} .home span, .about span, .education span, .portfolio span, .services span, .contact span{ display: none;}
    
    .topnav {
    	display:block;
    	height:75px;
    	width:980px;
    }
    And this is the IE6 Stylesheet code:
    Code:
    #navigation {
    	width:980px;
    	background:url(images/nav.jpg) no-repeat;
    	height:96px;
    }
    
    #nav { 
    	float:left;
    display:inline;
    	width:980px;
    	margin-top:10px;
    	margin-left:38px;
    }
    
    #nav li {
    	float:left;
    	display:inline;
    	width:150px;
    	height:75px;
    	margin-left:0px;
    }
    
    .home, .about, .education, .portfolio, .services, .contact {
      display: block;
      width: 300px;
      height: 75px;
      background: url(images/home.jpg) no-repeat 0 0;
    }
    
    .about {background: url(images/about.jpg) no-repeat 0 0;}
    
    .education {background:url(images/education.jpg) no-repeat 0 0;}
    
    .portfolio {background:url(images/portfolio.jpg) no-repeat 0 0;}
    
    .services {background:url(images/services.jpg) no-repeat 0 0;}
    
    .contact {background:url(images/contact.jpg) no-repeat 0 0;}
    
    .home:hover, .about:hover, .education:hover, .portfolio:hover, .services:hover, .contact:hover{ background-position:-152px 0;} .home span, .about span, .education span, .portfolio span, .services span, .contact span{ display: none;}
    
    .topnav {
    	display:inline;
    	height:75px;
    	width:980px;
    }

  6. #6
    Join Date
    Oct 2009
    Location
    Lawrence, KS
    Posts
    52
    There are a couple of things that might be causing the problem, but not sure who the exact culprit is. It probably has to do with your 300px widths and the different display declarations.

    To make it simpler, try doing it like this:

    Code:
    #navigation {
    	width:980px;
    	background:url(images/nav.jpg) no-repeat;
    	height:96px;
    }
    
    #navigation ul { 
            margin: 10px 0 0 38px;
    }
    
    #navigation ul li {
    	float:left;
    	display:block;
    	width:150px;
    	height:75px;
    	margin-left:0px;
    }
    
    .home, .about, .education, .portfolio, .services, .contact {
      overflow: hidden;
    }
    
    .home {background: url(images/home.jpg) no-repeat 0 0;}
    
    .about {background: url(images/about.jpg) no-repeat 0 0;}
    
    .education {background:url(images/education.jpg) no-repeat 0 0;}
    
    .portfolio {background:url(images/portfolio.jpg) no-repeat 0 0;}
    
    .services {background:url(images/services.jpg) no-repeat 0 0;}
    
    .contact {background:url(images/contact.jpg) no-repeat 0 0;}
    
    .home:hover, .about:hover, .education:hover, .portfolio:hover, .services:hover, .contact:hover{ background-position:-152px 0;} 
    
    .home span, .about span, .education span, .portfolio span, .services span, .contact span{ display: none;}
    Then get rid of the #nav and also .topnav.

    The 300px shouldn't be necessary for any reason.

    I haven't tested this, but try it out and see if it works. If not, I'll put a test page together and then give you the code.

  7. #7
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356
    Thanks again for the suggestion. I gave that a try, but it then incapacitated the nav links (nav buttons didn't work). I hate IE6

  8. #8
    Join Date
    Oct 2009
    Location
    Lawrence, KS
    Posts
    52
    Try changing this:
    Code:
    #navigation ul li {
    	float:left;
    	display:block;
    	width:150px;
    	height:75px;
    	margin-left:0px;
    }
    To this:
    Code:
    #navigation ul li {
    	float:left;
    	margin-left:0px;
    }
    #navigation ul li a:link, #navigation ul li a:visited {
    	display:block;
    	width:150px;
    	height:75px;
    }

  9. #9
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356
    Hey, good call buddy! It worked! The only thing it doesn't do in IE6 is have the hover effect on the buttons, but I can definitely live with that. Thanks for your help, I really appreciate it!

  10. #10
    Join Date
    Oct 2009
    Location
    Lawrence, KS
    Posts
    52
    IE 6 only supports :hover on link elements, but as that is what you're using it on, everything should work great

    Just add:

    Code:
    #navigation ul li a:hover {
       . . . 
    }

  11. #11
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by Captainkewl View Post
    Hey, good call buddy! It worked! The only thing it doesn't do in IE6 is have the hover effect on the buttons, but I can definitely live with that. Thanks for your help, I really appreciate it!
    You may do that as well, as long as you will use <A> elements and give them display block. But I guess you should not consider coding for IE6 anymore. IE6 users rate is falling fast. Microsoft stoped supporting IE6 anymore and they hardly try now to replace (or to persuade users to replace) the IE6 with the latest versions (7 and now 8). Moving from IE6 to IE8 (or even IE7) should be a priority both for common users and for administrators. It is not only because IE6 is a poor browser, but because it is the most insecure (on use) browser these days.
    Last edited by Kor; 03-15-2010 at 11:04 AM.

  12. #12
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    356
    Thanks bud!

    Cheers,
    Kris.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles