Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Deprecated, shmeprecated - at least it works!

Reply
Thread Tools

Deprecated, shmeprecated - at least it works!

 
 
puzzled
Guest
Posts: n/a
 
      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.
 
Reply With Quote
 
 
 
 
brucie
Guest
Posts: n/a
 
      11-28-2003
in post <news:(E-Mail Removed) >
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
 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      11-28-2003
puzzled <(E-Mail Removed)> 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 <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
puzzled
Guest
Posts: n/a
 
      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?
 
Reply With Quote
 
Stan Brown
Guest
Posts: n/a
 
      11-28-2003
In article <(E-Mail Removed)> in
comp.infosystems.www.authoring.stylesheets, puzzled
<(E-Mail Removed)> 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/
 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      11-28-2003
puzzled <(E-Mail Removed)> 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 <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
Christoph Paeper
Guest
Posts: n/a
 
      11-28-2003
*puzzled* <(E-Mail Removed)>:
>
> 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)
 
Reply With Quote
 
Sid Ismail
Guest
Posts: n/a
 
      11-28-2003
On Fri, 28 Nov 2003 20:34:43 GMT, puzzled <(E-Mail Removed)> 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

 
Reply With Quote
 
Sid Ismail
Guest
Posts: n/a
 
      11-28-2003
On Fri, 28 Nov 2003 22:04:39 +0100, Christoph Paeper <(E-Mail Removed)>
wrote:

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


Read up the CSS specs.

Sid

 
Reply With Quote
 
Christoph Paeper
Guest
Posts: n/a
 
      11-28-2003
*Sid Ismail* <(E-Mail Removed)>:
> Christoph Paeper <(E-Mail Removed)>
>
> : 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."
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


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



Advertisments