Mysterious padding/margin on form. IE6 only. Who'd have thunk?

Link to problem page. Be advised I might be tarting about with this. (http://88.208.209.45)

View in IE6 on WinXP. AFAIK that's the only browser it's doing it on.

See how all the (floated) content boxes have been pushed down under the left-hand column? That's my problem. Well, my main problem. And it appears to be caused by the "Poll" box or, more specifically, the form in it.

Try this: put your cursor right down in the bottom right-hand corner of the green box inside the Poll box. Now drag up and left, selecting stuff.

First thing you notice: as soon as you get above the "Submit" link, a little line break thing appears, about level with the bottom poll option and clearly positioned OUTSIDE the right-hand edge of the column.

Secondly: as you continue dragging up and across, the 20px or so of empty vertical space at the top of the green box suddenly shows itself to actually be a line of black text. It's not there when the page loads, but it magically appears - and stays appeared - when you select and subsequently deselect it.

Thirdly - as your mouse moves over the top edge of the Poll box, that little mysterious line break over on the right becomes a HUGE BLOCK OF SOMETHING about 50px wide and clearly, obviously, blatantly being the thing that's pushing the rest of the page content down.

Trouble is, I have no idea what it is.

Do you?

Try a conditional style:

<!--[if lt IE 7]>
form {
padding: 0;
margin: 0;
}
<![endif]-->

to see if it is the padding on that form

Sorry, bit of a misleading thread title. Whatever it is, adding style="margin:0;padding:0;" to the form tag does nothing.

It looks for all the world to me like a html typo. I've left a tag open or... something. My CSS is messy but I've been over and over it and I can't find anything that might be putting a chunk of... something... in that position. But the page validates to XHTML 1.0 Trans.

I'm a little curious why you have <br style="clear:both;" /> so much? They're dotted around your page like spots on a teenagers. I'm pretty sure there aren't that many floated elements in your page that need clearing and you could probably use something in the stylesheet to clear rather than an inline style. Try taking a couple of these out by that form and see what happens?

Yeah... it's just my way of clearing floats. A line break seemed to be the obvious element to use. Yes, there are a lot, but: there ARE a lot of floats. Pretty much everything on the page is floated. And it's only that one bit that's gone wrong. If there are so many float-clearing BR's, and a float-clearing BR could cause a problem, then surely it'd be manifesting somewhere else too? But I'll try knocking a few out in any case, see what I can get. Cheers.

Ok. So I've sort of fixed it.

Not sure what it was, but I've just rewritten the whole chunk so it's a bunch of DIVs nestled within each other. It's fugly and crude but it works.

The invisible text bug was this documented IE problem: http://pear.reversefold.com/badIE/ which I fixed by adding "zoom:100%" to the green box, thus apparently giving it a layout. Who knew...