Replacing an align tag inside of <img using CSS

[Paul F. Johnson]

Hi,

Probably a dumb question, but I have a lot of align="left"s on my Happy
Tree Friends page.

i.e. lots of

<img class="image" src="/images/fluffy.png" width="90" height="90"
align="left" alt="Fluffy, the wobbly dragon" />

Is there a way I can say align="left" within CSS. I know there is a
text-align property, but not an image align. The stylesheet already has
a float:left (or float:right) within the image class structure.

Can it be done?

TTFN

Paul

 

[Neal]

Hi,

Probably a dumb question, but I have a lot of align="left"s on my Happy
Tree Friends page.

i.e. lots of

<img class="image" src="/images/fluffy.png" width="90" height="90"
align="left" alt="Fluffy, the wobbly dragon" />

Is there a way I can say align="left" within CSS. I know there is a
text-align property, but not an image align. The stylesheet already has
a float:left (or float:right) within the image class structure.

Can it be done?

text-align will work fine. It's actually misnamed, it ought to be
content-align.

 

[Neal]

Nah, confusion galore about it centering non inline stuff.

inline-align, anyone?

 

[Spartanicus]

text-align will work fine. It's actually misnamed, it ought to be
content-align.

Nah, confusion galore about it centering non inline stuff.

 

[brucie]

In alt.html Neal said:

inline-align, anyone?

too hard to say when drunk. inlnaln just doesn't work.

 

[Jukka K. Korpela]

text-align will work fine. It's actually misnamed, it ought to be
content-align.

Will it? By definition, text-align applies to block elements only (hence
not to img elements unless you set the display property), and it affects
the alignment of each line.

Using the float property is the way to replace the align attribute,
should someone want to do that. (I would advice against rewriting working
code to clean it up, but suum cuique.) If this does not work for some
page, we need the URL for analysis.

 

[Spartanicus]

By definition, text-align applies to block elements only (hence
not to img elements unless you set the display property)

Wrong way 'round.

Using the float property is the way to replace the align attribute,

Using float only to align is an ugly hack, sometimes a necessary evil
but not something that should be propagated as a generic method of
alignment.

 

[Spartanicus]

Wrong way 'round.

Umm, on reflection I assume you meant to say that text-align can be
specified on block level elements only (I was thrown by the "not to img
elements" bit which makes no sense since the img element is empty).

 

[Jukka K. Korpela]

Umm, on reflection I assume you meant to say that text-align can be
specified on block level elements only

No, I meant exactly what I wrote. You can _specify_ any property for any
element (e.g. img { text-align: left; ]), but by definition some
properties _apply_ (i.e., may have an observable effect on rendering) to
some elements only.

(I was thrown by the "not to img
elements" bit which makes no sense since the img element is empty).

It makes perfect sense. The img element is not a block element (unless
you explicitly set its display property). That's all that matters here.
But for the record: Emptyness is a matter of HTML syntax, not CSS. The
img element is (by default) a replaced inline element in CSS.

 

[Neal]

Umm, on reflection I assume you meant to say that text-align can be
specified on block level elements only

No, I meant exactly what I wrote. You can _specify_ any property for any
element (e.g. img { text-align: left; ]), but by definition some
properties _apply_ (i.e., may have an observable effect on rendering) to
some elements only.

You got me backwards. I wasn't suggesting we put text-align on the img
element, but on its container.

Agreed, though, that plenty of times float is better. But text-align
applied to an ancestor element will affect image positioning.

 

[Spartanicus]

Umm, on reflection I assume you meant to say that text-align can be
specified on block level elements only

No, I meant exactly what I wrote. You can _specify_ any property for any
element (e.g. img { text-align: left; ]), but by definition some
properties _apply_ (i.e., may have an observable effect on rendering) to
some elements only.

Right, which is why text-align doesn't apply to the img element
regardless of what it's display property is set to.

 

[Jukka K. Korpela]

No, I meant exactly what I wrote. You can _specify_ any property for
any element (e.g. img { text-align: left; ]), but by definition some
properties _apply_ (i.e., may have an observable effect on rendering)
to some elements only.

Right, which is why text-align doesn't apply to the img element
regardless of what it's display property is set to.

Not so. Compare the effects of these:

<p>
<img src="demo.gif" alt="foo">
<p>
<img src="demo.gif" alt="foo" style="text-align:right">
<p>
<img src="demo.gif" alt="foo" style="text-align:right;display:block">

In the last case, the image is right-aligned - the <img> element is now
treated as a block element, as far as rendering is considered, and the
image itself is treated as if it were a single letter. And since a block
element by default occupies the entire available width, that "letter" is
placed on the very right.

 

[Jukka K. Korpela]

I wasn't suggesting we put text-align on the img
element, but on its container.

It still isn't the same as using align="..." for the img element.

Agreed, though, that plenty of times float is better. But text-align
applied to an ancestor element will affect image positioning.

It may affect (this really depends), but it's a different thing. In
special cases the effects coincide, but compare for example the effect of

<p>
<img src="demo.gif" alt="foo" align="right">
</p>
<p>Hello world</p>

with that of

<p style="text-align:right">
<img src="demo.gif" alt="foo">
</p>
<p>Hello world</p>

You'll see that "Hello world" appears below the image in the latter case
but (normally) on the left of the image in the first case.

The align attribute is really a polymorphic monstrosity. It has different
effects (and different sets of possible values) for different elements.
(Actually, looking at how I've described the element in a handbook on
HTML, I'm surprised at seeing that I was able to squeeze it into six
pages. )

This is perhaps the best reason for using CSS (instead of HTML) for
alignment and floating: the CSS was is superficially a bit more
complicated, but in reality it's simpler, and much easier to deal with,
conceptually and pragmatically. In CSS, as properly implemented,
text-align _only_ affects alignment of lines of text inside a block
(though with a somewhat odd interpretation of "text" - it includes images
and form fields).

 

[Spartanicus]

No, I meant exactly what I wrote. You can _specify_ any property for
any element (e.g. img { text-align: left; ]), but by definition some
properties _apply_ (i.e., may have an observable effect on rendering)
to some elements only.

Right, which is why text-align doesn't apply to the img element
regardless of what it's display property is set to.

Not so. Compare the effects of these:

<p>
<img src="demo.gif" alt="foo">
<p>
<img src="demo.gif" alt="foo" style="text-align:right">
<p>
<img src="demo.gif" alt="foo" style="text-align:right;display:block">

In the last case, the image is right-aligned - the <img> element is now
treated as a block element

Only in IE, and as per usual it's wrong.

 

[Jukka K. Korpela]

Only in IE, and as per usual it's wrong.

So only in about 90 % of browsing situations.

Whether it's wrong is most debatable. The question is: if you make an img
element as a block element in CSS, should the image be treated as inline
content of the block?

 

[Sam Hughes]

So only in about 90 % of browsing situations.

Whether it's wrong is most debatable. The question is: if you make an
img element as a block element in CSS, should the image be treated as
inline content of the block?

Could the image _not_ be treated as inline content of the block? When is
content not inline? We could not take a single character and make it a
block element; we could only make a _container_ of the character a block
element. Images should be treated in the same way: An image element
_contains_ the image; it is not the image itself.

 

[Toby Inkster]

Images should be treated in the same way: An image element
_contains_ the image; it is not the image itself.

Hmmm, though we'd want "width:Xpx;height:Ypx" to effect the image itself,
and not the containing block, right?

 

[Spartanicus]

So only in about 90 % of browsing situations.

Whether it's wrong is most debatable. The question is: if you make an img
element as a block element in CSS, should the image be treated as inline
content of the block?

After trawling through the specs combined with a few experiments the
best I can come up with is: good question.

 

[Sam Hughes]

Hmmm, though we'd want "width:Xpx;height:Ypx" to effect the image itself,
and not the containing block, right?

I don't see why we would.

If we want to affect the image itself, we can use the width and height
attributes.

 

[Spartanicus]

After trawling through the specs combined with a few experiments the
best I can come up with is: good question.

Can't believe I didn't spot this right away: What should happen (and
does happen in Opera & Moz) is that the width of the generated block
level container defaults to the intrinsic width of the replaced element
as per spec: http://www.w3.org/TR/CSS21/visudet.html#the-width-property

IE on the other hand appears to generate a block level container and
erroneously sets it's width to auto.