Deprecated, shmeprecated - at least it works!

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

11-28-2003

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/...ge-thingy.html

f'ups alt.html

--
brucie
29/November/2003 05:09:18 am

11-28-2003

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

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

11-28-2003

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/

11-28-2003

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

11-28-2003

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

11-28-2003

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.a...vertical-align

Sid

11-28-2003

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

11-28-2003

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Need regular expression for at least 7 characters and at least 1 special chatacter	AAaron123	ASP .Net	0	10-03-2008 01:25 PM
at least one of your changes...	=?Utf-8?B?SXZv?=	Wireless Networking	3	03-18-2007 11:23 PM
How length should the key be at least for WEP(64, 128bit), WPA and WPA2?	redsung@gmail.com	Wireless Networking	1	11-17-2005 06:00 AM
After Update, Original Profile Is Gone...Or At Least Not Active	Freebird	Firefox	6	04-02-2005 08:47 AM
at least	Stray Dog, World Media Host Org	Firefox	0	12-24-2004 01:45 AM