Forum Moderators: not2easy
In the screenshot linked to below, you will notice strange margins on the floating DIVs on the right hand side. However no margins or padding are set for them or their children at all.
This only happens in IE6 and IE7. Note the green and red borders are just to illustrate the margin problem. The red boxes on the right are fine, the green ones on the left have the problem:
<snip>
The code is straightforward:
<style type="text/css">
.bookingform { font: normal 12px verdana,arial,sans-serif }
.bookingform .subtitle { color: #404040; margin-bottom: 10px; font-weight: bold; font-size: 13px; text-decoration:underline }
.bookingform .subsectn { margin-left: 20px; margin-right: 20px }
.bookingform .row { }
.bookingform .lblcol { float:left; width: 120px; margin-top: 2px; border:1px solid red }
.bookingform .fldcol { float:left; border:1px solid green }
.bookingform .rowgap { height: 5px }
.bookingform .clear { clear:both }
.bookingform .inptext { border: 1px solid #404040; background-color: #FFFFF0; font-size: 12px; padding: 3px; margin: 0px }
</style><div class="bookingform">
<div class="subtitle">Booking Details:</div>
<div class="subsectn">
<div class="row">
<div class="lblcol">First Name:</div>
<div class="fldcol"><input class="inptext" type="text" name="firstname" size="40" maxlength="100"/></div>
<div class="clear"></div>
</div><div class="rowgap"></div>
<div class="row">
<div class="lblcol">Last Name:</div>
<div class="fldcol"><input class="inptext" type="text" name="lastname" size="40" maxlength="100"/></div>
<div class="clear"></div>
</div>
</div>
</div>
Notice the style ".subsectn" with 20px margins on left and right.
It seems, in IE6 & 7, that the input boxes are inheriting the margins! :/
However I can't override it. Tried setting margins to 0px on everything I can think of, no luck.
Can anyone suggest a way I can do this without the discrepancy between FF and IE6/7? I just want those margins in the floats to go away.
Many thanks!
No URL's please, see TOS [webmasterworld.com]
[edited by: limbo at 9:49 am (utc) on Jan. 12, 2010]
Fixed it by adding "; zoom:1" to the "subsectn" style.
Oh well.. now I'm 2 posts closer to posting links. :)
