2 replies [Last post]
ASURA
Offline
newbie
Shanghai, China
Last seen: 17 years 9 weeks ago
Shanghai, China
Timezone: GMT+8
Joined: 2003-07-22
Posts: 2
Points: 0

pls take a grance at my test page: http://juno.chipal.com/test/ , and pls check the source code:

#leftColumn {
	float: left;
	width:170px;
	margin-left:10px;
	padding:5px;
	background-color:#eee;
	border:1px dashed red;
}

but in fact, the left-margin in ie6 is 20px, not 10px. and I've tried to change margin-left to 20px, then the real lef-margin in ie6 was 40px.

ie6 double the size! and only after "float:left;" , i'm so puzzled and have worked hours for this problem, is there anybody can land me a hand?

thx.

ASURA
Offline
newbie
Shanghai, China
Last seen: 17 years 9 weeks ago
Shanghai, China
Timezone: GMT+8
Joined: 2003-07-22
Posts: 2
Points: 0

oh, it's a bug

i searched google, and find http://randomfoo.net/sandbox/style/ie6margin/

Quote:

This seems to be a IE6 (6.0.2600.0000) bug with the left horizontal margin. It seems to add an extra 20px to the left double the horizontal margin to the elements which are floated.

The only known fixes 1) don't use horizontal margins on floated divs. This is slightly more viable an option than it sounds as this bug only effects horizontal margins, but not padding or borders. (however, if you can't use either of those, and in many cases you can't, you're SOL) or 2) use browser sniffing to inline the proper style corrections (so much for write once code). I'm currently using the latter method.

woops, bug again Sad

papilindo701
Offline
newbie
Last seen: 11 years 34 weeks ago
Joined: 2008-09-11
Posts: 6
Points: 0

this is super late but

the solution is set the div to display:inline