Ben C wrote:
> On 2008-03-31, Jeff <jeff@spam_me_not.com> wrote:
>> Ben C wrote:
> [...]
>>> I prefer the first of your two examples. The second example is a bit
>>> counterintuitive because the position of the float may depend on the top
>>> margin of the <p> depending on whether that top margin collapses with
>>> the top margin of the element containing the float.
>>>
>>> In other words, if the <div> has no top border or padding:
>>>
>>> <div>
>>> <img>
>>> <p>
>>> </div>
>>>
>>> looks the same as
>>>
>>> <div>
>>> <p>
>>> <img>
>>> </div>
>>>
>>> But give the div top border or padding and in the first case the top of
>>> the img moves up. I'm assuming <p> has some top margin.
>>>
>> That's an interesting point. IE6 and Moz 2.0 don't, but Safari 3.04 does.
>
> I was sure someone would get it wrong 
Safari only behaves differently than IE and Firefox on container margins
for paragraphs. All other p margins are identical and require both
margins to be zero. It almost seems like Safari is right in this in
always having a top p margin, but it is in convenient. I guess this
style: div p{margin-top: 0} equalizes them and might be something to
include in all stylesheets. Did not check Mac or Opera.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<style type="text/css">
h2,p,div{border: 1px solid black}
#no_top_margin_on_p p{margin-top: 0}
#no_bottom_margin_on_p p{margin-bottom: 0}
#no_margin_on_p p{margin: 0}}
</style>
<p>paragraph</p>
<h2>Normal</h2>
<p>paragraph</p>
<p>paragraph</p>
<div>div</div>
<p>paragraph</p>
<div id="no_top_margin_on_p">
<p>paragraph</p>
<h2>No Top Margin on P</h2>
<p>paragraph</p>
<p>paragraph</p>
<div>div</div>
<p>paragraph</p>
</div>
</div>
<div id="no_bottom_margin_on_p">
<p>paragraph</p>
<h2>No Bottom Margin on P</h2>
<p>paragraph</p>
<p>paragraph</p>
<div>div</div>
<p>paragraph</p>
</div>
<div id="no_margin_on_p">
<p>paragraph</p>
<h2>No Margin on P</h2>
<p>paragraph</p>
<p>paragraph</p>
<div>div</div>
<p>paragraph</p>
</div>
>
>>> This is also tricky enough that I'm sure some browsers get it wrong.
>>>
>>> Presumably you want the float aligned with the top of the <p> and the
>>> second approach guarantees that.
>> Safari (windows) completely screws up the first example. It starts
>> the paragraph at the bottom of the image. I did not expect that.
>>
>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
>> "http://www.w3.org/TR/REC-html40/strict.dtd">
>>
>> <div style="border: 1px solid black;width: 300px">
>> <p style="width: 300px"><img style="border:1px solid black"
>> src="some_image.jpg" style="float: left">Soil Enhancer Samples are
>> packaged in 1/2 cubic foot containers. They are designed to enhance
>> potting soils for container gardens, flowers beds and hanging baskets.
>> Try your sample .</p>
>> </div>
>
> The problem there may be because you've given the img two style
> attributes. Move float: left into the first one.
Absolutely. Sorry for the error.
Jeff
>
> [...]