Deprecated, shmeprecated - at least it works!

puzzled · Nov 28, 2003

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.

brucie · Nov 28, 2003

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

Steve Pugh · Nov 28, 2003

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

puzzled · Nov 28, 2003

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?

Stan Brown · Nov 28, 2003

comp.infosystems.www.authoring.stylesheets, 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. 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/

Steve Pugh · Nov 28, 2003

puzzled said:
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

Christoph Paeper · Nov 28, 2003

*puzzled* said:
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;}.

Sid Ismail · Nov 28, 2003

: 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

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

Read up the CSS specs.

Sid

Christoph Paeper · Nov 28, 2003

*Sid Ismail* said:
Christoph Paeper <[email protected]>

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

Sid Ismail · Nov 28, 2003

: On Fri, 28 Nov 2003 22:04:39 +0100, Christoph Paeper <[email protected]>
: 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

Richard Clark · Dec 4, 2003

Sid Ismail said:
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

Steve Pugh said:
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 said:
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 said:
.withspace { padding: 14px } [snip]
It doesn't work! Why not?

Click to expand...

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 said:
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

brucie · Dec 4, 2003

And no HTML tag,

start and end tags are optional

Steve Pugh · Dec 4, 2003

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 said:
Steve Pugh said:

.withspace { padding: 14px } [snip]
It doesn't work! Why not?

Click to expand...

Images don't have padding they have margins.

Click to expand...

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 said:
Steve Pugh said:

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

Click to expand...

[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

Sid Ismail · Dec 4, 2003

On 04 Dec 2003 13:12:16 GMT, (e-mail address removed) (Richard Clark) wrote:

: What is your point?

Didn't you read my follow-up post?

Sid

Help with Visual Lightbox: Scripts	2	May 3, 2023
Help with my responsive home page	2	Dec 14, 2022
Image on header	2	May 2, 2024
Stuck with html and css	25	Dec 14, 2022
Help with code	0	Jun 12, 2022
SendGrid email issue in responsive Gmail	1	Nov 4, 2021
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Aligned to the left	3	Apr 19, 2023

Deprecated, shmeprecated - at least it works!

puzzled

brucie

Steve Pugh

puzzled

Stan Brown

Steve Pugh

Christoph Paeper

Sid Ismail

Sid Ismail

Christoph Paeper

Sid Ismail

Richard Clark

Richard Clark

brucie

Steve Pugh

Sid Ismail

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads