Replacing <IMG ALIGN=RIGHT ...> with CSS equivalent

[Ted Mencini]

When I replaced older <IMG ALIGN=RIGHT ...> tags with a CSS definition

<IMG class=right ...>

xxx.css:

IMG.right { BORDER: 0; align: right }

I notice that the effect is NOT the same. While in the past the text was flowing smoothly around the picture
on the right side there is now a hard cut: Text, then picture below with white space on the left and finally
the text continues BELOW the picture.

How do I achieve that the text is flowing around the picture as before ?

T.

[David Dorward]

Ted Mencini wrote:

When I replaced older <IMG ALIGN=RIGHT ...> tags with a CSS definition

<IMG class=right ...>

xxx.css:

IMG.right { BORDER: 0; align: right }

I notice that the effect is NOT the same
This is becuase there is no "aligh" property in CSS.
How do I achieve that the text is flowing around the picture as before ?

Look up the float property

--
David Dorward <http://dorward.me.uk/>

[Jim Dabell]

Ted Mencini wrote:

When I replaced older <IMG ALIGN=RIGHT ...> tags with a CSS definition

<IMG class=right ...>

xxx.css:

IMG.right { BORDER: 0; align: right }

When using CSS, you don't simply put HTML attributes into a stylesheet. CSS
has its own set of properties that only occasionally overlap with obsolete
HTML attributes.

There is no such property as 'align' in CSS. You are looking for the
'float' property. If a browser does anything with an align property, then
it's proprietary behaviour that will not work across multiple browsers.

<p>
<img src="..." alt="..." />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ornare,
justo vitae faucibus ornare, est enim pretium elit, in hendrerit tortor
purus ac dolor. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Ut et nisl. Fusce sed erat. Proin ut est eu
arcu interdum volutpat. Vestibulum nibh velit, congue nec, sodales vel,
faucibus eu, magna. Cras odio quam, adipiscing nec, luctus eu, pellentesque
nec, urna. Integer feugiat, velit et ultrices tempus, sapien erat molestie
dolor, id pretium felis justo ac lectus. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Fusce nec erat. Nam
euismod tortor eget urna. Praesent vestibulum.
</p>

img {
float: right;
}

--
Jim Dabell

[Heath]

A curious thing is happening, when I use display:inline; and background:
url(); my object(<div> do you call that an object?) disappears.

Jim Dabell wrote:

Ted Mencini wrote:

When I replaced older <IMG ALIGN=RIGHT ...> tags with a CSS definition

<IMG class=right ...>

xxx.css:

IMG.right { BORDER: 0; align: right }

When using CSS, you don't simply put HTML attributes into a stylesheet. CSS
has its own set of properties that only occasionally overlap with obsolete
HTML attributes.

There is no such property as 'align' in CSS. You are looking for the
'float' property. If a browser does anything with an align property, then
it's proprietary behaviour that will not work across multiple browsers.

<p>
<img src="..." alt="..." />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ornare,
justo vitae faucibus ornare, est enim pretium elit, in hendrerit tortor
purus ac dolor. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Ut et nisl. Fusce sed erat. Proin ut est eu
arcu interdum volutpat. Vestibulum nibh velit, congue nec, sodales vel,
faucibus eu, magna. Cras odio quam, adipiscing nec, luctus eu, pellentesque
nec, urna. Integer feugiat, velit et ultrices tempus, sapien erat molestie
dolor, id pretium felis justo ac lectus. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Fusce nec erat. Nam
euismod tortor eget urna. Praesent vestibulum.
</p>

img {
float: right;
}

[Brian]

Before doing anything else, please fix the wrapping in your newsreader.

Ted Mencini wrote:

When I replaced older <IMG ALIGN=RIGHT ...> tags with a CSS
definition

<IMG class=right ...>
not the best choice for a class name.
xxx.css:

IMG.right { BORDER: 0; align: right }

I notice that the effect is NOT the same.
As well it shouldn't, since there is no align property in CSS.
How do I achieve that the text is flowing around the picture as
before ?

Start by reading the manual
http://www.w3.org/TR/REC-CSS2/

or a tutorial
http://www.google.com/search?q=css%20tutorial

If you want text to flow around the image, then you probably want

img {float: right;}

--
Brian
follow the directions in my address to email me

[Kris]

In article <bt************ *@news.t-online.com>,
te*******@hotma il.com (Ted Mencini) wrote:

When I replaced older <IMG ALIGN=RIGHT ...> tags with a CSS definition

<IMG class=right ...>

xxx.css:

IMG.right { BORDER: 0; align: right }
In CSS there is no such thing as the align property.

I notice that the effect is NOT the same. While in the past the text was
flowing smoothly around the picture
on the right side there is now a hard cut: Text, then picture below with
white space on the left and finally
the text continues BELOW the picture.

How do I achieve that the text is flowing around the picture as before ?

img.right { border: 0; float: right; }

--
Kris
kr*******@xs4al l.netherlands (nl)

[Neal]

"Ted Mencini" <te*******@hotm ail.com> wrote in message
news:bt******** *****@news.t-online.com...

When I replaced older <IMG ALIGN=RIGHT ...> tags with a CSS definition

<IMG class=right ...>

xxx.css:

IMG.right { BORDER: 0; align: right }

The style should be:

img.right { float: right; }

and the HTML

<img class="right" other attributes /><p>text goes here</p>

[Vigil]

On Sun, 04 Jan 2004 17:14:40 +0100, Ted Mencini wrote:

How do I achieve that the text is flowing around the picture as before ?

Try floating it? (float:right)

--

..

[Eric Bohlman]

te*******@hotma il.com (Ted Mencini) wrote in
news:bt******** *****@news.t-online.com:

When I replaced older <IMG ALIGN=RIGHT ...> tags with a CSS definition

<IMG class=right ...>

xxx.css:

IMG.right { BORDER: 0; align: right }

I notice that the effect is NOT the same. While in the past the text
was flowing smoothly around the picture on the right side there is now
a hard cut: Text, then picture below with white space on the left and
finally the text continues BELOW the picture.

How do I achieve that the text is flowing around the picture as before

float: right

[Barry Pearson]

Ted Mencini wrote:

When I replaced older <IMG ALIGN=RIGHT ...> tags with a CSS definition

<IMG class=right ...> [snip] IMG.right { BORDER: 0; align: right }
I wasn't aware of an "align" property!

I use a style such as:

img.right { float: right; }
I notice that the effect is NOT the same. While in the past the text
was flowing smoothly around the picture on the right side there is
now a hard cut: Text, then picture below with white space on the left
and finally the text continues BELOW the picture.

How do I achieve that the text is flowing around the picture as
before ?

I lied about the above (for simplicity). What I really use is something like:

img.right { float: right; margin: 0.5em 0 0.5em 1em; }

This pushes the image to the right as far as it can go, but leaves some space
around it.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/