IE6 CSS Problem

[rv6eric]

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):

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

[RyanReese]

"#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).

[RyanReese]

On #content only keep the margin top value 20px;. Set the other to 0.

Float:right; it.

[Paul O'B]

Hi,

You have 2 problems here.

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

<!--[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.

#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;
}
* 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.

[rv6eric]

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

[rv6eric]

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

[Paul O'B]

Hi,

The code I gave would have fixed your problem straight away

You have now gone and done something silly.

#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%;
    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).

[rv6eric]

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