WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > Browser Compatibility > [SOLVED] Float Drop in IE6/7 only

Reply
  Thread Tools Display Modes
Old 29th March 10, 06:15 PM   #1
PVM3
WLC Lover
 
Join Date: Dec 2008
Posts: 185
Default Float Drop in IE6/7 only

Hi:

I understand "float drop", when it happens everywhere. I adjust until I've got an acceptable combination of widths within the space, etc. I'm not sure what to do, though, when columns only drop in IE6/7.

See http://www.mediquant.com - the 4 columns in the footer are fine everywhere except IE6/7. Then on inside pages with 2 columns I have float drop again, just in IE6/7. Is this a case where I need to do some coding just fir IE6/7?

Thanks for your help!
PVM3 is offline   Reply With Quote
Old 29th March 10, 08:15 PM   #2
Rayzur
WLC Lover
 
Rayzur's Avatar
 
Join Date: Feb 2008
Location: Texas
Posts: 1,331
Default Re: Float Drop in IE6/7 only

You have a double margin bug in IE6 with the #leftnav div
Code:
#leftnav /*footer*/ {
width: 125px;
margin: 25px 0 0 160px; 
float: left;
display:inline;/*fix IE6*/
}
Quote:
Then on inside pages with 2 columns I have float drop again, just in IE6/7.
You have another margin bug here. Read the link I gave to understand the bug.
Code:
/*sidebar is he box on the left of the inside pages*/
div#sidebar { 
background-image: url(../graphics2/insidetile.jpg); 
background-repeat: repeat-x; 
width: 280px; 
margin: 25px 10px 10px 20px;
padding: 20px;
float: left;
display:inline;/*fix IE6*/
 }
__________________
Ray H.

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Rayzur is offline   Reply With Quote
Old 29th March 10, 11:02 PM   #3
PVM3
WLC Lover
 
Join Date: Dec 2008
Posts: 185
Default Re: Float Drop in IE6/7 only

Hi Ray:

Thank you for posting that article - that was very helpful. Problem solved!! Just to be clear for future reference, I would typically need to add the "display: inline;" to the first of a group of columns, right? Whichever column is going to hug the left side of the page?
PVM3 is offline   Reply With Quote
Old 30th March 10, 01:33 AM   #4
Rayzur
WLC Lover
 
Rayzur's Avatar
 
Join Date: Feb 2008
Location: Texas
Posts: 1,331
Default Re: Float Drop in IE6/7 only

Quote:
Originally Posted by PVM3 View Post
Hi Ray:
Just to be clear for future reference, I would typically need to add the "display: inline;" to the first of a group of columns, right? Whichever column is going to hug the left side of the page?
Actually the bug can happen on the right also.

The bug is triggered when any float (left or right) has a margin in the same direction as the float that joins the parent box.

View this test case in FF then IE6

HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE6 Double Float Margin Bug</title>
<style type="text/css">
#wrapper {
width:800px;
margin:0 auto;
overflow:hidden;/*contain inner floats*/
background:#CDF;
}
.left {
float:left;
width:205px;
height:200px;
margin-left:50px;
background:red;
}
.right {
float:right;
width:205px;
height:200px;
margin-right:50px;
background:lime;
}
</style>
</head>
<body>

<div id="wrapper">
    <div class="left">Left Float with 50px left margin</div>
    <div class="left">Left Float with 50px left margin</div>
    <div class="right">Right Float with 50px right margin</div>
</div>

</body>
</html>
__________________
Ray H.

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Rayzur is offline   Reply With Quote
Old 30th March 10, 01:50 AM   #5
PVM3
WLC Lover
 
Join Date: Dec 2008
Posts: 185
Default Re: Float Drop in IE6/7 only

Okay, I see that the right box has dropped but I'm not clear why. What does this mean? "has a margin in the same direction as the float that joins the parent box"

In this case, would I want to put the display: inline; with the .right? Why not with the .left?

Eventually these things penetrate...

Thanks for your patience -
PVM3 is offline   Reply With Quote
Old 30th March 10, 02:37 AM   #6
Rayzur
WLC Lover
 
Rayzur's Avatar
 
Join Date: Feb 2008
Location: Texas
Posts: 1,331
Default Re: Float Drop in IE6/7 only

Quote:
Originally Posted by PVM3 View Post
Okay, I see that the right box has dropped but I'm not clear why. What does this mean? "has a margin in the same direction as the float that joins the parent box"

In this case, would I want to put the display: inline; with the .right? Why not with the .left?

Eventually these things penetrate...

Thanks for your patience -
The right box dropped because there was no longer room for it in the top row due to the first left float's doubled margin.

The right box also has a doubled margin on it because it was joined to the parents edge with a right float.

Both of the floats that join the parent box edge have 100px margins in IE6. View it in FF and you will see that they are 50px.

I was showing you how the bug can be triggered twice in the parent box.

You will notice that the middle float (a left float that joins the first left float) does not get a doubled margin. The bug is only triggered when it joins the parent box. (left or right)

Yes, display:inline; will fix both the left and right floats. It is a nonsense fix that has no rhyme or reason to it. We can explain the bug but we can't explain the fix. That's IE6 for you.
__________________
Ray H.

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Rayzur is offline   Reply With Quote
Old 30th March 10, 02:51 AM   #7
PVM3
WLC Lover
 
Join Date: Dec 2008
Posts: 185
Default Re: Float Drop in IE6/7 only

Okay...processing...

"joined to the parent's edge" means, literally, that the left margin on the first left float "joins it" to the left edge of the parent, and the right margin on the right float "joins" that box to the right edge of the parent? It was the phrase "joined" that I wasn't getting. So both the right and left boxes got the double margin, and the right one was the one that couldn't be squeezed in so down it went?
PVM3 is offline   Reply With Quote
Old 30th March 10, 03:08 AM   #8
Rayzur
WLC Lover
 
Rayzur's Avatar
 
Join Date: Feb 2008
Location: Texas
Posts: 1,331
Default Re: Float Drop in IE6/7 only

You got it!
__________________
Ray H.

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
Rayzur is offline   Reply With Quote
Old 30th March 10, 03:34 AM   #9
PVM3
WLC Lover
 
Join Date: Dec 2008
Posts: 185
Default Re: Float Drop in IE6/7 only

And you learn something new every day!

The help you are providing is making a big difference for me. I'm going through changing over my table-based sites and it's just one danged learning experience after another. It's a lot of information to truly grasp. and it's utterly different from building sites using tables and a wysiwyg tool. Lots of things to unlearn too.

You're collecting a lot of gold stars in heaven (or building up a lot of great karma)

Probably back tomorrow with more questions, but for now, thanks again!
PVM3 is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:20 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.