What kind of CSS error is this? (margin-bottom, ie6 + ie7)
In ie6 and ie7, margin-bottom
of p
is applied to both p
AND div
just below.
In other words, this code will be used margin-bottom
20px for both p
, and for div
in ie6 and ie7. No problem in any version of FF, Opera, Chrome / Safari or ie8.
<p style="margin-bottom: 20px;">Hello world!</p>
<div style="float: left; display: inline">
Hello world, part deux.
</div>
Of course, removing the float from the div fixes the problem. What ie / CSS error is this, if any, and what should I be looking for to figure out how to fix it?
ps Unfortunately I can't assign the width div
.
source to share
float: left will essentially cause your container DIV to be floated to the left- most position possible in the document flow. In this case, because no previous P tag has been placed, the lower margin is ignored. This will have the desired effect, albeit not very clean code:
<p style="float: left; display: inline; margin-bottom: 20px;">Hello world!</p>
<div style="clear: left; float: left; display: inline">
Hello world, part deux.
</div>
It would be ideal, however, to just remove the floats from your element and leave them as they were intended (block level elements):
<p style="margin-bottom: 20px;">Hello world!</p>
<div>Hello world, part deux.</div>
I may be missing the intended effect of these two containers in your case.
source to share
I think you are facing the problem described here . Unfortunately part of the fix is ββto give the width <div>
a and make it display: inline
, something you either can't do or have already done. Maybe this will help you understand why this is happening, though ...
source to share