Replacing an align tag inside of <img using CSS

Discussion in 'HTML' started by Paul F. Johnson, Oct 12, 2004.

  1. 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
    Paul F. Johnson, Oct 12, 2004
    #1
    1. Advertising

  2. Paul F. Johnson

    Neal Guest

    On Tue, 12 Oct 2004 15:34:26 +0100, Paul F. Johnson
    <> wrote:

    > 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, Oct 12, 2004
    #2
    1. Advertising

  3. Paul F. Johnson

    Neal Guest

    On Tue, 12 Oct 2004 15:59:43 +0100, Spartanicus <> wrote:

    > Neal <> wrote:
    >
    >> text-align will work fine. It's actually misnamed, it ought to be
    >> content-align.

    >
    > Nah, confusion galore about it centering non inline stuff.


    inline-align, anyone?
    Neal, Oct 12, 2004
    #3
  4. Paul F. Johnson

    Spartanicus Guest

    Neal <> wrote:

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


    Nah, confusion galore about it centering non inline stuff.

    --
    Spartanicus
    Spartanicus, Oct 12, 2004
    #4
  5. Paul F. Johnson

    brucie Guest

    In alt.html Neal said:

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


    >> Nah, confusion galore about it centering non inline stuff.


    > inline-align, anyone?


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


    --


    v o i c e s
    brucie, Oct 12, 2004
    #5
  6. Neal <> wrote:

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


    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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Oct 12, 2004
    #6
  7. Paul F. Johnson

    Spartanicus Guest

    "Jukka K. Korpela" <> wrote:

    >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
    Spartanicus, Oct 12, 2004
    #7
  8. Paul F. Johnson

    Spartanicus Guest

    Spartanicus <> wrote:

    >"Jukka K. Korpela" <> wrote:
    >
    >>By definition, text-align applies to block elements only (hence
    >>not to img elements unless you set the display property)

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

    --
    Spartanicus
    Spartanicus, Oct 12, 2004
    #8
  9. Spartanicus <> wrote:

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

    >>
    >>Wrong way 'round.

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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Oct 12, 2004
    #9
  10. Paul F. Johnson

    Neal Guest

    On Tue, 12 Oct 2004 18:55:00 +0000 (UTC), Jukka K. Korpela
    <> wrote:

    > Spartanicus <> wrote:
    >
    >>>> By definition, text-align applies to block elements only (hence not
    >>>> to img elements unless you set the display property)
    >>>
    >>> Wrong way 'round.

    >>
    >> 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.
    Neal, Oct 12, 2004
    #10
  11. Paul F. Johnson

    Spartanicus Guest

    "Jukka K. Korpela" <> wrote:

    >>>>By definition, text-align applies to block elements only (hence not
    >>>>to img elements unless you set the display property)
    >>>
    >>>Wrong way 'round.

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

    --
    Spartanicus
    Spartanicus, Oct 13, 2004
    #11
  12. Spartanicus <> wrote:

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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Oct 13, 2004
    #12
  13. Neal <> wrote:

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

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Oct 13, 2004
    #13
  14. Paul F. Johnson

    Spartanicus Guest

    "Jukka K. Korpela" <> wrote:

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

    --
    Spartanicus
    Spartanicus, Oct 13, 2004
    #14
  15. Spartanicus <> wrote:

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


    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?

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
    Jukka K. Korpela, Oct 13, 2004
    #15
  16. Paul F. Johnson

    Sam Hughes Guest

    "Jukka K. Korpela" <> wrote in
    news:Xns9581D54B67EC2jkorpelacstutfi@193.229.0.31:

    > Spartanicus <> wrote:
    >
    >>><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.

    >
    > 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.
    Sam Hughes, Oct 14, 2004
    #16
  17. Paul F. Johnson

    Toby Inkster Guest

    Sam Hughes wrote:

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

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Oct 14, 2004
    #17
  18. Paul F. Johnson

    Spartanicus Guest

    "Jukka K. Korpela" <> wrote:

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

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

    --
    Spartanicus
    Spartanicus, Oct 14, 2004
    #18
  19. Paul F. Johnson

    Sam Hughes Guest

    Toby Inkster <> wrote in
    news:p:

    > Sam Hughes wrote:
    >
    >> 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?


    I don't see why we would.

    If we want to affect the image itself, we can use the width and height
    attributes.
    Sam Hughes, Oct 14, 2004
    #19
  20. Paul F. Johnson

    Spartanicus Guest

    Spartanicus <> wrote:

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

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


    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.

    --
    Spartanicus
    Spartanicus, Oct 15, 2004
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Kay
    Replies:
    2
    Views:
    7,136
  2. news.austin.rr.com

    how to download img from html img tag

    news.austin.rr.com, Apr 27, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    500
    Steve C. Orr [MVP, MCSD]
    Apr 27, 2005
  3. shruds
    Replies:
    1
    Views:
    747
    John C. Bollinger
    Jan 27, 2006
  4. mark | r
    Replies:
    1
    Views:
    66,015
    Steve Pugh
    Jan 6, 2004
  5. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    [CSS] Div-Tag and Vertical Align

    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Aug 19, 2006, in forum: HTML
    Replies:
    6
    Views:
    22,485
    dorayme
    Aug 22, 2006
Loading...

Share This Page