Strange Float Behaviour in IE7

Strange float behaviour in IE7

Specify width in outermost div.
If that width in your content div means this is the total width of your box, simply add it to the outermost div, and (optionally) remove it from content, like this:

<div style="float:left; width: 200px;">
    <div style="background-color:blue; padding: 1px; height: 20px;">
        <div style="float: left; background-color:green;">title</div>
        <div style="float: right; background-color:yellow;">toolbar</div>
    </div>
    <div style="clear: both; background-color: red;">content</div>
</div>

Fixing IE7 weird float behaviour

Try styling your checkboxes a little differently. Wrap the label around the input - this will keep them together. Also, instead of having them in a DIV, try styling them in an unordered list.

See live demo here (haven't tested in IE -haven't got it installed on Mac- but should work): http://jsfiddle.net/wG7B2/

HTML:

<ul>
    <li>
    <label for="checkbox1"><input id="checkbox1" type="checkbox" value="">Option1</label>
    </li>
    <li><label for="checkbox2"><input id="checkbox2" type="checkbox" value="">Option2</label>
    </li>
    <li><label for="checkbox3"><input id="checkbox3" type="checkbox" value="">Option3</label>
    </li>
</ul>

CSS

ul{
    list-style:none;
    padding:0;
    margin:0;
}

ul li{
    padding-bottom:10px;
}

ul li:last-child{
    padding-bottom:0px;
}

ul li input{
    margin-right:5px;
}

Weird IE7 Bug - maybe a float issue?

As far as I'm aware, it is unfortunately a bug in how IE7 distributes percent widths. I assume IE7 simply rounds the width of the elements to nearest pixel. Thus, for example, when the total width is 25, 26, 27, the width rounds down and all the elements fit nicely within the parent element. However, if the width is 28 or 29, the widths round up, which totals to wider than the parent element, pushing the last element down.

To go around this, you simply have to make the elements smaller, so that even when they widths round up, they wont push the last element down. For example, just setting the width to 19% should make sure that all the elements are on the same row even on IE7. Naturally, the elements wont be perfectly evenly centered after that, but is that likely to be noticed? (You could also use empty elements at beginning and end to even it out, but it's a bit trickier)

HTML form exhibiting strange behaviour ONLY in IE7

This problem has been resolved. I discovered that the width of

form#enquiry ul li label  

objects were set to 220px elsewhere in my CSS, and this, combined with

li label {
    margin-left: -115px;
}

was causing problems. Setting the width to 125px and the margin-left to 0px appears to have resolved the problem.

IE7: float left, but not upwards, please

you need an object level spacer between your rows, or a separate container for each row in order for it to work in IE7.

Examples are in this thread:
Floating and clearing in IE7

this was in a list, but the same would apply to divs.

Float incorrect on internet explorer

Add the clear: both; to your h1#botline and the p after the h1#botline

Works in IE7+

IE8. overflow hidden + min-width: is there a workaround to this strange behavior?

It seems that adding display: table-cell to .B makes it behave. I did not fully test in all other browsers to see if it would cause an issue. It might be best to just have it set for IE8 (though it did not seem to affect IE7/9 or Firefox).

---

Related Topics