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*******@hotmail.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*******@xs4all.netherlands (nl)

[Neal]

"Ted Mencini" <te*******@hotmail.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*******@hotmail.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/

[Keith Bowes]

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. 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 { float: right }

[Stan Brown]

In article <bt*************@news.t-online.com> in
comp.infosystems.www.authoring.html, Ted Mencini wrote:

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

<IMG class=right ...>
This is not strictly invalid yet, but (1) it's a bad idea to use a
CSS keyword as a class name, (2) you should put quotes around the
class name, and (3) you should put element names in lower case.
(The second and third points look forward to XHTML compatibility.)
IMG.right { BORDER: 0; align: right }

Note followups to this CSS question to ciwas, where it should have
been posted in the first place. Will you PLEASE not crosspost every
question you have?

"align" is not a valid property. What you want is
{ border: none; float: right }
Note also that you want to say "img" not "IMG".

See the CSS spec URL in my sig. It's always a good idea to check the
or validate your HTML and CSS -- preferably both.

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Brian]

Stan Brown wrote:

(1) it's a bad idea to use a CSS keyword as a class name, (2) you
should put quotes around the class name, and (3) you should put
element names in lower case. (The second and third points look
forward to XHTML compatibility.)

I agree with (1) and (2), but I'm not so sure about (3). I always use
caps for elements. And I see no reason to move toward xhtml, so I
don't see it as an issue. I'd venture to say that the best choice for
most www authors is html 4.01/strict, and not xhtml (in any variety).

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