Clearing float in IE problem

[memco]

Have a look at Sitepoint's very own article on how to markup and style forms. I've used this for my site, and I've not had problems getting elements to clear properly on IE.

[YuriKolovsky]

if you read the messages that the OriginalPoster said:

Hi guys thanks for the replies. Trouble is, I can't be altering the markup at the moment

its that he has no access to modify the HTML, so he has to do it somehow with css only, thats why i offered my solution, and it might seem a little weird.

[nachenko]

Maybe I'm a bit late on this, but...

If you can't change the HTML, I'd try floating just the label. It will push the INPUT element to the right no matter if the INPUT is floated or not.

After thatmaybe , the "clear" CSS property works as expected.

[YuriKolovsky]

Maybe I'm a bit late on this, but...

If you can't change the HTML, I'd try floating just the label. It will push the INPUT element to the right no matter if the INPUT is floated or not.

After thatmaybe , the "clear" CSS property works as expected.

no, in the first post he says thats what he did and IE5-7 was misbehaving.

[Stomme poes]

Huh?

I have a form where each label + corresponding input box are both set to 'float: left'

They are both floated, and because the following label is also float: left, its "clear: left" is ignored by IE only. All IE's except 8.

The advantage to Yuri's margins is, it may make the input wide enough that the following label is simply forced to stay below due to there not being enough room for it to sit alongside as the OP's original labels were doing:
label1 input1 label2
input2

Although in any complicated form, without true clearing you get problems whenever labels with any meat appear. If the inputs aren't floated and they aren't inside a block container together with the label, then a "tall" label (multiline) will cause the next label's input to ride up:

label1 is rilly input1
rilly long and
makes 2 lines input2
or 3 lines...

label 2 input3

they stop lining up.

I use my block containers to stop the riding up.

Of course the OP never posted any HTML code so we can only speculate on what he has to work with.

[RyanReese]

Plus I doubt he is coming back..I posted the soltuion to this problem twice so hopefully he does come back.

[Mounty]

I figured you guys were enjoying a debate! Wasn't expecting over 800 hits though


But I sorted it with the negative margins Thanks for your help