PHWinfo - Afficher un message

01/04/2008, 08h45

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

>> 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.

[...]

01/04/2008, 08h45	#7
Ben C Messages: n/a Hébergeur:	Re: images and text 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 >> 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. [...]