Among the various funny "interpretations" that Internet Explorer 6 can do with HTML / CSS, that of the "double margin" is certainly the most tedious and often. In practice (hear, hear ...) Good Microsoft browser can - mysteriously - to double margins on items that are set to float! : As such the following CSS applied to a div with the id box :
1 | display : block ; width : 100px ; height : 100px ; margin-left : 100px ; float : left } div # box {display: block; width: 100px; height: 100px; margin-left: 100px; float: left} |
You get:
Where n is the left margin of our 100px! si trova a diretto contatto con il suo contenitore. This defect, fortunately, occurs only in certain circumstances, ie when the margin coincides with the direction of the float and when our div#box is in direct contact with its container. precedente. This means that an additional div#box on the same line does not suffer because of the problem is on the left but not the container div#box above. Obviously the problem is not specific to the left margin but it specular reversing the whole thing would have the same problem with the right margin!
Solution
The solution is really simple: just insert the declaration display:inline in our CSS, and the defect disappears:
1 2 | display : block ; width : 100px ; height : 100px ; margin-left : 100px ; float : left ; div # box {display: block; width: 100px; height: 100px; margin-left: 100px; float: left; inline } display: inline} |
The introduction of display:inline will be ignored by all other browsers, and not because we are particularly lucky, but rather by specific W3C :
... The 'display' is ignored, the unless it has the value 'none'.
I did not understand one thing:
in the class definition must be present both on display: block to display: inline. ?
leaving only the second has the same defect?
thanks
@ Mauritius:
The
display:blockyou can replace it withdisplay:inlineI remember that was one of the first bug to which I was faced with IE6.
)
At least in this case the solution is at least immediately (provided that you know
[...] We simply explains how to eliminate the problem of double margin in IE6, the bane of web [...]
Are you a big, you'd do a monument! Clear, simple and fast! Great post
You are a GREAT! it works great. now my buttons are only seen once. The command "display: inline" addresses a myriad of problems in IE.