SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Website misbehaving in IE6

    Anybody able to tell me why this (site is a mess in IE6?

    Works fine in IE7 and 8, Firefox and Safari. Validates as well.

    I do seem to have a stray > under the left hand menu. Can't work out where that has come from!!!!

    Thanks in advance.
    Barry

    Snap Designs
    Creating good impressions online and in print

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    There are a number of issues on your site...just by looking at the CSS.

    Code:
    *{margin:0;padding:0;}
    Browsers add default margins and paddings to everything. This will 0 it out and I have outlined it here. It has a 0,0,0,0 specificity so it will be overridden, don't worry.

    Next, you need to contain your floats. Add overflow:hidden; to #container. This is the easiest way.


    Code:
    	float: left;
    	margin: -160px 0 0 80px;
    "ul#nav" triggers IE6's double float margin bug. Give it display:inline; as the fix.

    The same thing happens to
    Code:
    .image {
    	float: left;
    	margin: 10px;
    AND "ul.format"
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Enthusiast bobsmithmoodeyit's Avatar
    Join Date
    Nov 2008
    Location
    Dunstable, Bedfordshire, United Kingdom
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have it covered RyanReese! It's the dreaded double float margin bug. You could use conditional statement for ie to isolate the issue.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    No, as said before it is easy to fix. Read the article. All you need to do is add display:inline; to the floated element.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan,

    Thanks for the response. I have inserted the code you suggested but things still do not look right in IE6. The content area still moves down and across to the left. And the left nav bar disappears when hovered over.

    It's a pain but I need to get this right in IE6 as it is still widely used in this organisation.

    Thanks.
    Barry

    Snap Designs
    Creating good impressions online and in print

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    The current problem has nothing to do with the #content div. The problems are in the nav.

    Remove the display:block on the ul#nav, it is overriding the inline fix for IE6.

    Then replace the display:block with a left float on the ul#nav li a

    Those two changes will snap everything in place in IE6
    Code:
    ul#nav {
        float: left;
        margin: -160px 0 0 80px;
        width: 180px;
        height: 306px;
        display: inline;
        /*display: block;*/
        background:red url(../graphics/left_nav.jpg) no-repeat;
    
    }
    ul#nav li {
        list-style-type: none;
        margin: 0;
        
    }
    ul#nav li a {
        border: 0;
        float:left; /*was display:block;*/
        background: url(../graphics/left_nav.jpg) no-repeat;
        text-indent: -9999px;
        
    }

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It looks like you will need to slightly readjust your background positions on the anchors when using the float though.

  8. #8
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rayzur,

    Fantastic - that works a treat.

    I have one more problem in IE6 with the left navigation.

    If you hover over the navigation it starts jumping around - it gets worse the lower you go.

    If I remove the background image from ul#nav the image disappears briefly before the hover state shows up.

    Neither of these is ideal. Can you or anybody else advise on this issue?
    Barry

    Snap Designs
    Creating good impressions online and in print

  9. #9
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ignore that last bit I have sorted it out. Changed the height on the individual 'a' elements in the nav list. Weird how it worked ok in FF, IE 7 and 8 before and after I made this change. Works in IE6 now but there is a delay before the hover state works. I can live with that though!
    Barry

    Snap Designs
    Creating good impressions online and in print

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Here is a cross browser workaround. I had some code here previously but scrapped it. The problem was the display:inline; on the ul#nav for IE6. By removing the left margin off 80px and positioning it relative to itself we can remove the IE6 fix and get consistency without the inline display interfering.
    Code:
    ul#nav {
        float:left;
        margin: -160px 0 0 0;
        position:relative; 
        left:80px;
        width: 180px;
        height: 306px;
        background: url(../graphics/left_nav.jpg) no-repeat;
    }
    ul#nav li {
        list-style-type: none;
        margin:0;
        padding:0;
    }
    ul#nav li a {
        border: 0;
        display:block;
        background: url(../graphics/left_nav.jpg) no-repeat;
        text-indent: -9999px;
    }
    li#nav01 a {
        width: 180px;
        height: 42px;
    }
    li#nav02 a, li#nav03 a, li#nav04 a, li#nav05 a, li#nav06 a, li#nav07 a, li#nav08 a {
        width: 180px;
        height: 30px;
    }
    li#nav09 a {
        width: 180px;
        height: 61px;
    }
    li#nav01 a:link, li#nav01 a:visited {
        background-position: 0px 0px;
    }
    li#nav01 a:hover {
        background-position: -180px 0px;
    }
    li#nav02 a:link, li#nav02 a:visited {
        background-position: 0px -42px;
    }
    li#nav02 a:hover {
        background-position: -180px -42px;
    }
    li#nav03 a:link, li#nav03 a:visited {
        background-position: 0px -71px;
    }
    li#nav03 a:hover {
        background-position: -180px -71px;
    }
    li#nav04 a:link, li#nav04 a:visited {
        background-position: 0px -100px;
    }
    li#nav04 a:hover {
        background-position: -180px -100px;
    }
    li#nav05 a:link, li#nav05 a:visited {
        background-position: 0px -129px;
    }
    li#nav05 a:hover {
        background-position: -180px -129px;
    }
    li#nav06 a:link, li#nav06 a:visited {
        background-position: 0px -158px;
    }
    li#nav06 a:hover {
        background-position: -180px -158px;
    }
    li#nav07 a:link, li#nav07 a:visited {
        background-position: 0px -187px;
    }
    li#nav07 a:hover {
        background-position: -180px -187px;
    }
    li#nav08 a:link, li#nav08 a:visited {
        background-position: 0px -216px;
    }
    li#nav08 a:hover {
        background-position: -180px -216px;
    }
    li#nav09 a:link, li#nav09 a:visited {
        background-position: 0px -245px;
    }
    li#nav09 a:hover {
        background-position: -180px -245px;
    }
    Last edited by Rayzur; Apr 2, 2009 at 16:26. Reason: No good for IE7

  11. #11
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this better, for any reason, than the previous fix which seems to work fine in all the main browsers?

    If not then I will leave it as everything seems to be working fine.

    Thanks for your help. It is much appreciated.
    Barry

    Snap Designs
    Creating good impressions online and in print

  12. #12
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bazzablue View Post
    Is this better, for any reason, than the previous fix which seems to work fine in all the main browsers?
    The thing is though, it is not working in all the main browsers.

    In FF2 only the first list item is changing colors on hover. (not sure about FF3)

  13. #13
    SitePoint Zealot bazzablue's Avatar
    Join Date
    Mar 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Didn't realise that. I am using FF3, IE Tester and Safari.

    Will give your alternative solution a go.
    Barry

    Snap Designs
    Creating good impressions online and in print


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
  •