I'm rewriting some of my CMS code.

It's very common to have a block of text with an image.

This can be done this way:

<p><img...>enough text to flow past the image...
</p>

or this way:

<div>
<img ...>
<p>enough text to flow past the image...</p>
</div>

Now, if we set widths and float the image either left or right, they
will appear identical. I suppose you could also set image align
properties, although I seldom use most of the alignments for this.

Method two allows for a no text wrap, perhaps that's useful.

Any thoughts on handling images?

Jeff

On Mar 31, 8:06am, Jeff <jeff@spam_me_not.com> wrote:
> I'm rewriting some of my CMS code.
>
> It's very common to have a block of text with an image.
>
> This can be done this way:
>
> <p><img...>enough text to flow past the image...
> </p>
>
> or this way:
>
> <div>
> <img ...>
> <p>enough text to flow past the image...</p>
> </div>
>
> Now, if we set widths and float the image either left or right, they
> will appear identical. I suppose you could also set image align
> properties, although I seldom use most of the alignments for this.
>
> Method two allows for a no text wrap, perhaps that's useful.
>
> Any thoughts on handling images?
>

ISTM that it depends on the logical relationship between the text and
the image. Is the text a caption? Or is the image just tangentially
related to the text? Could the image be logically considered part of
the paragraph?

Nick

--
Nick Theodorakis
nick_theodorakis@hotmail.com
contact form:
http://theodorakis.net/contact.html

On 2008-03-31, Jeff <jeff@spam_me_not.com> wrote:
> I'm rewriting some of my CMS code.
>
> It's very common to have a block of text with an image.
>
> This can be done this way:
>
><p><img...>enough text to flow past the image...
></p>
>
> or this way:
>
><div>
><img ...>
><p>enough text to flow past the image...</p>
></div>
>
> Now, if we set widths and float the image either left or right, they
> will appear identical. I suppose you could also set image align
> properties, although I seldom use most of the alignments for this.

They're deprecated and browsers just turn them into float anyway.

> Method two allows for a no text wrap, perhaps that's useful.
>
> Any thoughts on handling images?

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.

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.

Ben C wrote:
> On 2008-03-31, Jeff <jeff@spam_me_not.com> wrote:
>> I'm rewriting some of my CMS code.
>>
>> It's very common to have a block of text with an image.
>>
>> This can be done this way:
>>
>> <p><img...>enough text to flow past the image...
>> </p>
>>
>> or this way:
>>
>> <div>
>> <img ...>
>> <p>enough text to flow past the image...</p>
>> </div>
>>
>> Now, if we set widths and float the image either left or right, they
>> will appear identical. I suppose you could also set image align
>> properties, although I seldom use most of the alignments for this.
>
> They're deprecated and browsers just turn them into float anyway.
>
>> Method two allows for a no text wrap, perhaps that's useful.
>>
>> Any thoughts on handling images?
>
> 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.

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

Dorayme, you don't get that on your Mac do you? You get the text
starting at the top of the image rather than the bottom?

I wonder how popular Safari windows is? I'm thinking it has some issues...

Ultimately what I want is to to style the image, top, left, right, ???
with just CSS and not changing the html. I've been experimenting with a
standard module format for blocks of html that also lets you add curved
borders, drop shadows, corner effects.

I'm not sure there is really any meaning behind a div aside from what
you give it. And that structure is largely for your own purposes, such
as designating a div with an id="navigation". I don't think search
engines care and I don't know if aural browsers.

Jeff

dorayme wrote:
> In article <JsmdnaO3IfCp7mzanZ2dnUVZ_qCunZ2d@earthlink.com> ,
> Jeff <jeff@spam_me_not.com> wrote:
>
>> 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>
>>
>> Dorayme, you don't get that on your Mac do you? You get the text
>> starting at the top of the image rather than the bottom?
>
> You must distinguish between an inline image and one that is floated.
> See what happens when you change your
>
> img style="border:1px solid black;" ...
>
> to
>
> img style="border:1px solid black;float left" ...

You are right, my error. If you look at what I wrote, I had *two* style
tags and had the float in the second. Safari ignores the second. I had
made the same mistake earlier, and hadn't cleared it up. So much for a
quick test with inline style...

Jeff
>
> I am pretty sure I had examples of the different effects in
>
> <http://netweaver.com.au/floatHouse/>
>
> I think on page 2.
>
> You might see that some of your puzzles over Safari disappear when you
> make this distinction.
>

dorayme wrote:
> In article <dPudneicsZNDOmzanZ2dnUVZ_saknZ2d@earthlink.com> ,
> Jeff <jeff@spam_me_not.com> wrote:
>
>> dorayme wrote:
>>> In article <JsmdnaO3IfCp7mzanZ2dnUVZ_qCunZ2d@earthlink.com> ,
>>> Jeff <jeff@spam_me_not.com> wrote:
>>>
>>>> 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>
>>>>
>>>> Dorayme, you don't get that on your Mac do you? You get the text
>>>> starting at the top of the image rather than the bottom?
>>> You must distinguish between an inline image and one that is floated.
>>> See what happens when you change your
>>>
>>> img style="border:1px solid black;" ...
>>>
>>> to
>>>
>>> img style="border:1px solid black;float left" ...
>> You are right, my error. If you look at what I wrote, I had *two* style
>> tags and had the float in the second. Safari ignores the second. I had
>> made the same mistake earlier, and hadn't cleared it up. So much for a
>> quick test with inline style...
>
>
> If you supply a url of anything you want testing on a Mac on Safari 2, I
> can you. I think you were saying some floated style was buggered up
> in Safari?

Thanks,

But here is what I wrote:

<img style="border:1px solid black" src="some_image.jpg" style="float:
left">
^^^ style tag one^^^^^ ^^^ style two ^^

It's easy to miss! Still dumb on my part though!

Jeff
>

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.

[...]

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