Hi,
I have a basic footer div with 10px padding on top and bottom. Within that I have a floated ul to contain it’s floated “li” and “a”. After that I have a floated and cleared form (preferably with no width set).
After those two elements I have a standard “p” tag that has clear both hooked to it also. Not a problem so far, all is well in FF, Opera, Safari, and IE8.
I am aware of the fact that it is best to set a bottom margin on a float rather than a top margin on a non floated & cleared element (my “p” tag).
I have found a couple of workarounds for IE6/7 but I am curious to know what is going on.They are taking the 10px top padding of the footer div and adding it to the 10px bottom margin of the floated form (20px total under the form).
I can fix it by removing the float from the form and setting a width (prefer not to but it would work)
I could also fix it by removing the top padding from the footer and set a top margin on my first floated element (the ul).
Just ran a quick test with a regular div instead of a form and the form element has nothing to do with it, shown below. Why is IE 6-7 adding the parent top padding to the last floats bottom margin?
Maybe I should not ask why but rather “is this a bug I am unaware of”?
I must admit I have never seen this bug before, even scoured my personal own little database of bugs I have been collecting over the few years and I have never run across it.
I have something simliar and this is a permutation of that bug probably (same fixes I told above)
It jiust seems to be a haslayout bug triggered by the footer not having haslayout
It jiust seems to be a haslayout bug triggered by the footer not having haslayout
My footer had “layout” with a width set, maybe you meant the ul. But it had “layout” also with the float.
I see you pulled the float off my ul and set zoom instead. If you look back at my posted code you will see that I do have “layout” everywhere.
The parent has no paddin/vertical marins.
Yes I mentioned that no top padding on the parent would fix it. It is that top padding that plays a role in the bug.
Yes, I had a 20px top margin on the #footer just for this test case but it does not seem to have anything to do with the bug
A hard clearing element (caught myself ;)) also works
I’ll pass on that one.
I have found a workaround, I just don’t remember this bug. My thread title describes it.
I set a 50px top padding on the parent and you will see that it is added to the 10px bottom margin of the last float. 60px between the last float and the cleared “p”.
<!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>Parent top padding added to the bottom margin of the last float</title>
<style type="text/css">
body {
margin:0;
padding:0;
background: #fff;
font-size:100%;
}
h2 {text-align:center;}
#wrap {
width:870px;/*900px; total*/
padding:50px 15px 10px;/*IE6/7 add the top padding to the bottom margin of the last float*/
margin:0 auto;
overflow:hidden;/*contain floats*/
background:lime;
}
.foodiv{
float:left;
clear:left;
background:yellow;
margin-bottom:10px;
}
p{margin:0;}
p.clear{
clear:both;
color:#FFF;
background:#000;
}
</style>
</head>
<body>
<h2>Parent's top padding added to the bottom margin of the last float in IE 6-7</h2>
<div id="wrap">
<div class="foodiv">
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
</div>
<div class="foodiv">
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
</div>
<div class="foodiv">
<p>Blah Blah Blah Blah Blah Blah Blah Blah Blah</p>
</div>
<div class="foodiv">
<p>IE6/7 add the parent's top padding to the bottom margin of this last float.</p>
</div>
<p class="clear">This is a cleared paragrapgh with no margins</p>
</div>
</body>
</html>
Hi, considering I reduced my test case to the raw <input> I have to deduce that the problem lies with the size=“15” and the type=“”. Depending on what type, you get a differnet size.
I just think that’s IE6 being IE6
Off Topic:
I read your remark about me adding zoom:1;. That was nothing lol. Just me testing stuff out.
Hmm, It seems to have problems with type=“password”, it even gets the height different. That can be seen by removing the <br> tag.
If I change them both to type=“text” just for the sake of testing it gets them both the same.
I’m sure I’m not the first to see this, I wonder how others have dealt with it. I won’t waste too much time with it but it is good to know what the cause is.
IE does seem to have a lot of bugs especially with the last float in a sequence and margin inconsistency is a real pain. A hard clearer usually solves those issues also.
The password uses a different font and therefore the size attribute will be different. Just use the same font.
Great, that worked just fine!
IE does seem to have a lot of bugs especially with the last float in a sequence and margin inconsistency is a real pain. A hard clearer usually solves those issues also.
The reason I was using shrinkwrap floats on the left was because I am going to hove more stuff floated to the right.
I seem to have it all sorted out now. Thanks for the help.
