Deprecated, shmeprecated - at least it works!

P

puzzled

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

Steve Pugh

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.
Click to expand...

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 }
Click to expand...

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; }
Click to expand...

Why bother with the p at all? Why just apply text-align to the div?
.withspace { padding: 14px }
Click to expand...

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>
Click to expand...

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:
Click to expand...

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?
Click to expand...

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?
Click to expand...

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.
Click to expand...

<!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
 
P

puzzled

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

Stan Brown

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?
Click to expand...

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

Steve Pugh

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?
Click to expand...

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
 
C

Christoph Paeper

*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.
Click to expand...

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?
Click to expand...

Depends, either

img {vertical-align: top;}

or

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

Sid Ismail

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


Read up the CSS specs. :)

Sid
 
S

Sid Ismail

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

Richard Clark

Sid Ismail said:
Depends, either
img {vertical-align: top;}
or
img {vertical-align: text-top;}.
Click to expand...
Read up the CSS specs. :)
Click to expand...


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
 
R

Richard Clark

Steve Pugh said:
No doctype. So you're automatically going into quirks mode in browsers
that perform doctype sniffing.
Click to expand...

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.
Click to expand...

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

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?
cheers,
Click to expand...

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
 
S

Steve Pugh

What browsers go quirky without a doctype declaration?
Click to expand...

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. :)
Click to expand...

Irrelevant. Quirks and Standards modes apply to documents identified
as text/html (the situation with XHTML is more complex).
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?
Click to expand...

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:
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?
Click to expand...

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

Steve
 
S

Sid Ismail

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
Help with my responsive home page 2
Stuck with html and css 25
Help with code 0
SendGrid email issue in responsive Gmail 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Aligned to the left 3
Align img inside nav tabs section 5

Members online

No members online now.
Total: 29 (members: 0, guests: 29)
Robots: 213

Forum statistics

Threads
473,774
Messages
2,569,596
Members
45,142
Latest member
arinsharma

Latest Threads

Top