SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: IE6 CSS Problem

  1. #1
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Coral Springs, FL
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 CSS Problem

    In IE6, I have a left float (navboxcontainer) that is rendering partially outside of its parent container (simply called container). I have searched and read a lot about IE6 bugs and the hacks for them and have tried many but I can't get this problem to go away. I don't have IE6 on my computer but I can see the problem for myself with IE NetRenderer or BrowserShots. I attached a screenshot I downloaded from BrowserShots.

    The site address is: http://www.fortlauderdaleretina.com

    I added a conditional call to an external CSS file for IE6 and here is what I have in that file (the content was built with the IE6 CSS Fixer):

    Code:
    dl.contactform, 
    #container, 
    #mbarcontainer, 
    #navboxcontainer, 
    #forcenavboxheight, 
    #quotetext, 
    .associationlist, 
    #content {zoom: 1;}
    
    .navboximgbottom {position:relative; zoom:1;}
    
    html {height:100%;}
    
    /* add display:inline to floated elements */
    dl.contactfrm,
    dt.contactfrm,
    dd.contactfrm,
    #navboxcontainer,
    .floatright {display:inline;}
    I'm not sure how many IE6 visitors we can expect but from what I read, it sounds like it is a big enough number that I want this fixed. Any suggestions of what I can do to fix this problem?

    Eric

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    "#qm0 a" is causing the border in IE6 (just a note)

    Also it is going to the next line on the nav because it is exceeding the parents width. You can remove the transparent border (and if that is not enough (I haven't done the math) then just chip away at the padding. You have padding:5px 15px. If after rermoving the 1px border isn't enough make it 14px which should be enough).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    On #content only keep the margin top value 20px;. Set the other to 0.

    Float:right; it.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You have 2 problems here.

    The first is that you have missed the closing quote from the IE link href.

    Code:
    <!--[if lte IE 6]>
      <link rel="stylesheet" type="text/css" href="myiehacks.css>
    <![endif]-->
    There should be a closing quote here (.css">)

    The second problem is the 3px jog (see faq on floats). You can fix it with this code.

    Code:
    #content {
        text-align: left;
        position: relative;
        margin: 20px 0 0 207px;
        font-family: Tahoma, Geneva, Verdana, "Bitstream Vera Sans", sans-serif;
        font-size: 100&#37;;
        width: 563px;
    }
    * html #content{margin-left:204px}
    When you have a fixed width 2 column layout you would be better off floating both columns and avoiding the 3px jog altogether.

  5. #5
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Coral Springs, FL
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan,

    Thanks for getting back to me so quickly!

    When I float:right the content container and remove its left margin, it gets pushed down below my navboxcontainer. You can see the result here: http://www.fortlauderdaleretina.com/indextest.htm

    "#qm0 a" and all of my menu code was generated by QuickMenu from OpenCube. I'll go into QuickMenu later and play with the settings there to see about fixing the border and the line overflow (I see the border in the IE6 screenshot I attached but I haven't seen a problem with the line overflow except for when I view the site from my iPhone).

    Eric

  6. #6
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Coral Springs, FL
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    After floating my "content" container as Ryan suggested, I fixed my mistake of the missing closing quote and added your suggested 3px jog. Properly including the conditional IE6 CSS ended up causing a few more problems to showup.

    http://www.fortlauderdaleretina.com/indextest.htm - shows the floating "content" container

    http://www.fortlauderdaleretina.com/index.htm - the "content" container is not floating

    I am fine with floating both columns but I need to figure out why the "content" column is now being pushed down below my "navboxcontainer" column and I need to figure out how to fix the new problems that have appeared now that my IE6 style sheet is being included correctly. Let me know if you have any suggestions.

    Eric

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,865
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The code I gave would have fixed your problem straight away

    You have now gone and done something silly.
    Code:
    #content {
        float: right;
        text-align: left;
        position: relative;
        margin: 20px 0 0 0;
        font-family: Tahoma, Geneva, Verdana, "Bitstream Vera Sans", sans-serif;
        font-size: 100&#37;;
        width: 563px;
    }
    #content {
        text-align: left;
        position: relative;
        margin: 20px 0 0 207px;
        font-family: Tahoma, Geneva, Verdana, "Bitstream Vera Sans", sans-serif;
        font-size: 100%;
        width: 563px;
    }
    You have left the original content style in place which means that you now have an element that is floated but also has a margin-left of 207px where no other content can exist. This has ensured that you will never be able to have any content next to that float.

    Remove the duplicated stylerule and use one or the other.

    Remember that if you float the content right columns then you don't need a left margin on the content so make sure you remove any IE rules also (such as the fix I gave you earlier).

  8. #8
    SitePoint Member
    Join Date
    Jan 2005
    Location
    Coral Springs, FL
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The code I gave would have fixed your problem straight away

    You have now gone and done something silly.
    Something silly is right! I meant to comment out the original #container in case I wanted to revert but I forgot and uploaded the new CSS file without commenting it out. It is fixed it now and looks to be rendering properly.

    I think I have an idea about my problem with the image that is supposed to be at the bottom of my navboxcontainer. My CSS file for IE6 changes the image from position:absolute to position:relative. I eliminated position:relative from my IE6 css file and now it appears to be rendering correctly.

    Thanks so much for your help!

    Eric


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
  •