Deprecated, shmeprecated - at least it works!

Discussion in 'HTML' started by puzzled, Nov 28, 2003.

  1. puzzled

    puzzled Guest

    Okay, so my subject sounds a bit crass. As much as I'd like to
    totally embrace css and avoid "deprecated" usage, sometimes the
    deprecated stuff is so much easier and more effective. Plus, it at
    least does what I want it to, while I'm left puzzled trying to make a
    css implementation do the same thing.

    Here is a simple example.

    I want to have four identical-sized images displayed in a two-by-two
    arrangement, wtih room for a centered photo caption beneath them. I
    also DON'T want the images touching, which they do in Mozilla unless I
    explicitly make other arragements.

    Hold your noses; here's the way I'd do it:

    <html>
    <head>
    <style type="text/css">
    div.photofloat { float: left; vertical-align: text-top }
    div.photofloat p { text-align: center; }

    .withspace { padding: 14px }
    </style>
    </head>

    <body>

    <div class="photofloat">
    <p>
    <img hspace="14" vspace="14" src="img1.gif" width="110" height="70">
    <img vspace="14" src="img2.gif" width="110" height="70"><br>
    <img hspace="14" src="img3.gif" width="110" height="70">
    <img src="img4.gif" width="110" height="70"><br>
    And a caption here!
    </p>
    </div>

    </body>
    </html>

    <html>
    <head>
    <style type="text/css">
    div.photofloat { float: left; vertical-align: text-top }
    div.photofloat p { text-align: center; }

    .withspace { padding: 14px }
    </style>
    </head>

    Okay, no live puppies were destroyed in this implementation and
    nothing bad happened, EXCEPT that I used the deprecated hspace and
    vspace to position my images where I wanted them.

    Now, trying it using css (obviously, incorrect css, because it's not
    working), here's what I do:

    <body>

    <div class="photofloat">
    <p>
    <img class="withspace" src="img1.gif" width="110" height="70">
    <img class="withspace" src="img2.gif" width="110" height="70"><br>
    <img class="withspace" src="img3.gif" width="110" height="70">
    <img class="withspace" src="img4.gif" width="110" height="70"><br>
    And a caption here!
    </p>
    </div>

    </body>
    </html>

    It doesn't work! Why not?

    I have many other examples of stuff I'm trying in css (mostly using
    divs to position image elements) and failing. I can never find
    exactly what I'm looking for on the web, so I just try and miss the
    mark.

    So my general question is why are hspace and vspace and a lot of other
    useful features of html deprecated when they seem to work well for
    what they were intended, while no equally-staightforward css
    equivalent exists?

    And secondly, please offer some suggestions to me to implement the
    above in css.
     
    puzzled, Nov 28, 2003
    #1
    1. Advertising

  2. puzzled

    brucie Guest

    in post <news:>
    puzzled said:

    > I want to have four identical-sized images displayed in a two-by-two
    > arrangement, wtih room for a centered photo caption beneath them. I
    > also DON'T want the images touching,


    http://stuff.bruciesusenetshit.info/2x2-image-thingy.html

    f'ups alt.html

    --
    brucie
    29/November/2003 05:09:18 am
     
    brucie, Nov 28, 2003
    #2
    1. Advertising

  3. puzzled

    Steve Pugh Guest

    puzzled <> wrote:

    >I want to have four identical-sized images displayed in a two-by-two
    >arrangement, wtih room for a centered photo caption beneath them. I
    >also DON'T want the images touching, which they do in Mozilla unless I
    >explicitly make other arragements.


    >


    No doctype. So you're automatically going into quirks mode in browsers
    that perform doctype sniffing.

    ><html>
    ><head>
    > <style type="text/css">
    > div.photofloat { float: left; vertical-align: text-top }


    floated elements need an explicit width. In this case the float is
    pointless as there's nothing following the div to be floated alongside
    It. Is this an abstraction of a larger page?

    vertica-align doesn't apply to block level elements like div. So
    that's pointless.

    > div.photofloat p { text-align: center; }


    Why bother with the p at all? Why just apply text-align to the div?

    > .withspace { padding: 14px }


    Not used in this example.

    > </style>
    ></head>
    >
    ><body>
    >
    ><div class="photofloat">
    ><p>
    ><img hspace="14" vspace="14" src="img1.gif" width="110" height="70">
    ><img vspace="14" src="img2.gif" width="110" height="70"><br>
    ><img hspace="14" src="img3.gif" width="110" height="70">
    ><img src="img4.gif" width="110" height="70"><br>


    Missing the required alt atrribute on all four images.

    >And a caption here!
    ></p>
    ></div>
    >
    ></body>
    ></html>
    >
    ><html>
    ><head>
    > <style type="text/css">
    > div.photofloat { float: left; vertical-align: text-top }
    > div.photofloat p { text-align: center; }
    >
    > .withspace { padding: 14px }
    > </style>
    ></head>
    >
    >Okay, no live puppies were destroyed in this implementation and
    >nothing bad happened, EXCEPT that I used the deprecated hspace and
    >vspace to position my images where I wanted them.
    >
    >Now, trying it using css (obviously, incorrect css, because it's not
    >working), here's what I do:


    Presumably using the CSS as above? You seem to have inserted your
    comments in an odd palce.

    ><body>
    >
    ><div class="photofloat">
    ><p>
    ><img class="withspace" src="img1.gif" width="110" height="70">
    ><img class="withspace" src="img2.gif" width="110" height="70"><br>
    ><img class="withspace" src="img3.gif" width="110" height="70">
    ><img class="withspace" src="img4.gif" width="110" height="70"><br>
    >And a caption here!
    ></p>
    ></div>
    >
    ></body>
    ></html>
    >
    >It doesn't work! Why not?


    Images don't have padding they have margins.

    >So my general question is why are hspace and vspace and a lot of other
    >useful features of html deprecated when they seem to work well for
    >what they were intended, while no equally-staightforward css
    >equivalent exists?


    They're deprecated so that the HTML can focus on structure and
    sematntics and leave all the presentation to CSS.

    >And secondly, please offer some suggestions to me to implement the
    >above in css.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <style type="text/css">
    div.photofloat { text-align: center; width: 300px; float: left;}
    div.photofloat img { margin: 14px; }
    </style>
    </head>
    <body>
    <div class="photofloat">
    <img src="img1.gif" width="110" height="70" alt="1">
    <img src="img2.gif" width="110" height="70" alt="2"><br>
    <img src="img3.gif" width="110" height="70" alt="3">
    <img src="img4.gif" width="110" height="70" alt="4"><br>
    And a caption here!
    </div>
    </body>
    </html>

    cheers,
    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Nov 28, 2003
    #3
  4. puzzled

    puzzled Guest

    Thanks Steve and Brucie for the helpful tips. All worked great. I'm
    embarrassed about confusing "padding" and "margin" - that was too
    simple.

    Okay, another one. If I have two photos next to each other in a div
    or paragraph, I believe they default to lining up with their bottom
    edges even. How do I, using css, make them default to lining up with
    their TOP edges even?
     
    puzzled, Nov 28, 2003
    #4
  5. puzzled

    Stan Brown Guest

    In article <> in
    comp.infosystems.www.authoring.stylesheets, puzzled
    <> wrote:
    >If I have two photos next to each other in a div
    >or paragraph, I believe they default to lining up with their bottom
    >edges even. How do I, using css, make them default to lining up with
    >their TOP edges even?


    Style them with vertical-align:top.

    --
    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/
     
    Stan Brown, Nov 28, 2003
    #5
  6. puzzled

    Steve Pugh Guest

    puzzled <> wrote:

    >Thanks Steve and Brucie for the helpful tips. All worked great. I'm
    >embarrassed about confusing "padding" and "margin" - that was too
    >simple.
    >
    >Okay, another one. If I have two photos next to each other in a div
    >or paragraph, I believe they default to lining up with their bottom
    >edges even. How do I, using css, make them default to lining up with
    >their TOP edges even?


    Remember when I said that vertical-align didn't apply to block level
    elements? Well it does apply to inline elements like images.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <title>Image alignment</title>
    <style type="text/css">
    img {border: 2px solid red;}
    p.two img {vertical-align: top;}
    </style>
    </head>
    <body>
    <p class="one">some text <img width="50" height="50" src="foo"
    alt="1"><img width="50" height="100" src="bar" alt="2"> some text</p>
    <p class="two">some text <img width="50" height="20" src="foo"
    alt="1"><img width="50" height="100" src="bar" alt="2"> some text</p>
    </body>
    </html>

    cheers,
    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Nov 28, 2003
    #6
  7. *puzzled* <>:
    >
    > If I have two photos next to each other in a div or paragraph,
    > I believe they default to lining up with their bottom edges even.


    The initial value for 'vertical-align' is 'baseline', but user agent
    stylesheets for HTML may differ for 'img'.

    > How do I, using css, make them default to lining up with
    > their TOP edges even?


    Depends, either

    img {vertical-align: top;}

    or

    img {vertical-align: text-top;}.

    --
    Alcohol didn't cause the high crime rates of the '20s and '30s, Prohibition did.
    And drugs do not cause today's alarming crime rates, but drug prohibition does.
    (US District Judge James C. Paine, November 1991)
     
    Christoph Paeper, Nov 28, 2003
    #7
  8. puzzled

    Sid Ismail Guest

    On Fri, 28 Nov 2003 20:34:43 GMT, puzzled <> wrote:

    : Okay, another one. If I have two photos next to each other in a div
    : or paragraph, I believe they default to lining up with their bottom
    : edges even. How do I, using css, make them default to lining up with
    : their TOP edges even?


    http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align

    Sid
     
    Sid Ismail, Nov 28, 2003
    #8
  9. puzzled

    Sid Ismail Guest

    On Fri, 28 Nov 2003 22:04:39 +0100, Christoph Paeper <>
    wrote:

    : Depends, either
    :
    : img {vertical-align: top;}
    :
    : or
    :
    : img {vertical-align: text-top;}.


    Read up the CSS specs. :)

    Sid
     
    Sid Ismail, Nov 28, 2003
    #9
  10. *Sid Ismail* <>:
    > Christoph Paeper <>
    >
    > : img {vertical-align: top;}
    > : img {vertical-align: text-top;}.
    >
    > Read up the CSS specs. :)


    Backwards this time or what did you want to tell me?

    --
    The Hitchhiker's Guide to the Galaxy:
    "The Universe, as has been observed before, is an unsettlingly big place,
    a fact which for the sake of a quiet life most people tend to ignore."
     
    Christoph Paeper, Nov 28, 2003
    #10
  11. puzzled

    Sid Ismail Guest

    On Fri, 28 Nov 2003 23:46:54 +0200, Sid Ismail <> wrote:

    : On Fri, 28 Nov 2003 22:04:39 +0100, Christoph Paeper <>
    : wrote:
    :
    : : Depends, either
    : :
    : : img {vertical-align: top;}
    : :
    : : or
    : :
    : : img {vertical-align: text-top;}.
    :
    :
    : Read up the CSS specs. :)


    Sorry - braindead here - apologies. Was correct.

    Sid
     
    Sid Ismail, Nov 28, 2003
    #11
  12. In article <>, Sid Ismail
    <> writes:

    >Depends, either
    > img {vertical-align: top;}
    >or
    > img {vertical-align: text-top;}.


    >
    >Read up the CSS specs. :)



    Under "vertical-align" my copy of the spec says:
    Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom
    | <percentage>
    Initial: baseline
    Applies to: all elements
    Inherited: yes
    Percentage values: refer to the 'line-height' of the element itself

    It includes both "top" and "text-top" as values. What is your point?

    Oh, wait, reading further in the definitions:
    top: Vertically aligns the CONTENTS of an object supporting valign to the top
    of the object.
    text-top: Vertically aligns the TEXT of an object supporting valign to the top
    of the object.

    So, since an image is not "text", you would use "top" to vertically align the
    image, but "text-top" to vertically align the text, relative to an object,
    right?

    (Definition for deprecation: Opposite of the K.I.S.S. principle? :)


    Pilgrims and the Mayflower Compact
    http://members.aol.com/RichClark7/pilgrims.htm

    Jesus' Birth (and related issues)
    http://members.aol.com/RichClark7/read/birth_JC.htm
     
    Richard Clark, Dec 4, 2003
    #12
  13. In article <>, Steve Pugh
    <> writes:

    >No doctype. So you're automatically going into quirks mode in browsers
    >that perform doctype sniffing.


    And no HTML tag, but I think he was just giving excerpts of his code relative
    to his questions. What browsers go quirky without a doctype declaration? If the
    web page had either an HTM or HTML file name extension, you would think that
    even some of the older browsers would recognize it as a document type of html
    text. (Or "text/html" to be politically correct. :)

    Steve Pugh <> writes furthermore:

    >Missing the required alt atrribute on all four images.


    Yes, for sure! Even code excerpts in discussion areas should include ALT text,
    (but not because people with text-only browsers and people browsing with images
    switched off need some alt text, but because the author didn't provide a URL
    link to the web page so we could all go look at the images, and we, or at least
    I, can't "picture" what he's trying to do! Are we talking thumbnails, or
    navigation buttons, or what? :)

    Steve Pugh <> writes furthermore:

    >> .withspace { padding: 14px }

    [snip]
    >>It doesn't work! Why not?

    >
    >Images don't have padding they have margins.


    The code had the class=withspace inside the IMG tag. My HTML reference library,
    under Style Sheet Box properties included: "padding", as well as margin,
    border, and other properties. Under padding it says: "This property describes
    how much space is inserted between the >border< and the content of the
    element." I would guess the reason the "padding" style did not work in the IMG
    tag is because neither the tag nor the style set a "border" property, and a
    default border=0 was assumed?

    Steve Pugh <> writes furthermore:

    > div.photofloat { text-align: center; width: 300px; float: left;}
    > div.photofloat img { margin: 14px; }

    [snip]
    ><div class="photofloat">
    ><img src="img1.gif" width="110" height="70" alt="1">
    ><img src="img2.gif" width="110" height="70" alt="2">

    [snip]

    Allright, I can see that 300px would make the 3rd and 4th image wrap, since 3
    images of 110 width total=330 would not fit, but would not 2 images of 110px
    and 14px margins to the left and right of each total 276px? What happens to the
    extra 24px for the 300px total?

    > cheers,


    Thanks for the perk! (Switching to cheerful mode! :)


    Pilgrims and the Mayflower Compact
    http://members.aol.com/RichClark7/pilgrims.htm

    Jesus' Birth (and related issues)
    http://members.aol.com/RichClark7/read/birth_JC.htm
     
    Richard Clark, Dec 4, 2003
    #13
  14. puzzled

    brucie Guest

    in post <news:>
    Richard Clark said:

    > And no HTML tag,


    start and end tags are optional

    --
    brucie
    04/December/2003 11:13:33 pm kilo
     
    brucie, Dec 4, 2003
    #14
  15. puzzled

    Steve Pugh Guest

    dy (Richard Clark) wrote:
    >In article <>, Steve Pugh
    ><> writes:
    >
    >>No doctype. So you're automatically going into quirks mode in browsers
    >>that perform doctype sniffing.

    >
    > What browsers go quirky without a doctype declaration?


    All browsers that perform doctype sniffing.

    > If the
    >web page had either an HTM or HTML file name extension, you would think that
    >even some of the older browsers would recognize it as a document type of html
    >text. (Or "text/html" to be politically correct. :)


    Irrelevant. Quirks and Standards modes apply to documents identified
    as text/html (the situation with XHTML is more complex).

    >Steve Pugh <> writes furthermore:
    >
    >>> .withspace { padding: 14px }

    >[snip]
    >>>It doesn't work! Why not?

    >>
    >>Images don't have padding they have margins.

    >
    >The code had the class=withspace inside the IMG tag. My HTML reference library,
    >under Style Sheet Box properties included: "padding", as well as margin,
    >border, and other properties. Under padding it says: "This property describes
    >how much space is inserted between the >border< and the content of the
    >element." I would guess the reason the "padding" style did not work in the IMG
    >tag is because neither the tag nor the style set a "border" property, and a
    >default border=0 was assumed?


    Not sure. My comment was based on browser behaviour rather than the
    CSS specs, which do indeed imply that images could have padding.

    http://www.w3.org/TR/CSS2/box.html#propdef-padding

    Quick test shows that IE6 applies padding to images only in Standards
    mode. So presumably older versions of IE never apply padding.

    The current version of Opera has a bug whereby if padding is applied
    to an image and if the height is given in the HTML them the padding is
    applied inside that height and the image itself is squashed to fit the
    remaining space.

    So, applying padding to images is by no means forbidden by CSS, and I
    apologise for giving that impression. But it certainly can't be
    recommended at this time.

    >Steve Pugh <> writes furthermore:
    >
    >> div.photofloat { text-align: center; width: 300px; float: left;}
    >> div.photofloat img { margin: 14px; }

    >[snip]
    >><div class="photofloat">
    >><img src="img1.gif" width="110" height="70" alt="1">
    >><img src="img2.gif" width="110" height="70" alt="2">

    >[snip]
    >
    >Allright, I can see that 300px would make the 3rd and 4th image wrap, since 3
    >images of 110 width total=330 would not fit, but would not 2 images of 110px
    >and 14px margins to the left and right of each total 276px? What happens to the
    >extra 24px for the 300px total?


    IE is crap - it needs a bit of extra space. 300px is erring on the
    safe side, a bit less may well suffice.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Dec 4, 2003
    #15
  16. puzzled

    Sid Ismail Guest

    On 04 Dec 2003 13:12:16 GMT, dy (Richard Clark) wrote:

    : What is your point?

    Didn't you read my follow-up post?

    Sid
     
    Sid Ismail, Dec 4, 2003
    #16
    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. Barney Barumba
    Replies:
    0
    Views:
    578
    Barney Barumba
    Jul 23, 2003
  2. F. GEIGER
    Replies:
    3
    Views:
    813
    F. GEIGER
    Aug 6, 2004
  3. AAaron123
    Replies:
    0
    Views:
    648
    AAaron123
    Oct 3, 2008
  4. Alexander Burger

    getMethod() works and works not

    Alexander Burger, Nov 27, 2010, in forum: Java
    Replies:
    25
    Views:
    1,846
    Alexander Burger
    Nov 29, 2010
  5. abargaddon
    Replies:
    1
    Views:
    217
    clintmazur
    Feb 4, 2008
Loading...

Share This Page