CSS valign?

[Keith]

I'm still working my way through CSS and can't seem to do a valign and
assign it to this H6 css. Everywhere I look seems to suggest valign can't
be used unless one assigns it to a table TD.

H6 { font-size:14pt; font-family:times new roman; color:maroon;
font-weight:heavy; display: inline; background-color: white; text-align :
center; height=40; width=400; }

Keith

 

[Andrew Tang]

I'm still working my way through CSS and can't seem to do a valign and
assign it to this H6 css. Everywhere I look seems to suggest valign can't
be used unless one assigns it to a table TD.

What do you mean by a valign for a H6 tag? If you want to alter the spaces
around it, you can alter padding and margin.

Andy

 

[Chris Morris]

I'm still working my way through CSS and can't seem to do a valign and
assign it to this H6 css. Everywhere I look seems to suggest valign can't
be used unless one assigns it to a table TD.

vertical-align: (not valign) applies to table-cell and inline elements
only. You could do h6 { display: table-cell; } but I suspect that
won't do exactly what you want either...

I'd suggest running your CSS code through a checker, though, because
it's so full of errors I'm surprised it does *anything* you want it
to.

H6 { font-size:14pt;

Use of pt sizes for fonts is dangerous as it can prevent sensible
resizing. See multiple threads in the archives here and on
comp.infosystems.www.authoring.stylesheets.

font-family:times new roman;

font-family: "times new roman"; - quoting fonts with whitespace is safer.

color:maroon;
font-weight:heavy;

There is no value 'heavy' for the font-weight property. Do you mean
'bold'?

display: inline;
background-color: white;
text-align : center;
height=40; width=400;

40 and 400 what? Non-zero lengths need a unit as well as a value.
You probably mean px in this case, but you should probably consider em
or % for this.

Also, the width and height properties do not apply to 'non-replaced'
inline elements, which the 'display: inline;' above makes this one.

}

http://jigsaw.w3.org/css-validator/ is your friend...

 

[Jukka K. Korpela]

I'm still working my way through CSS and can't seem to do a valign
and assign it to this H6 css.

You really work with sixth level headings? Why?

Everywhere I look seems to suggest
valign can't be used unless one assigns it to a table TD.

There is no valign property in CSS. There is valign attribute in HTML,
allowed for some elements, and vertical-align property in CSS. But what
are you trying to accomplish? The vertical-align property most probably
does not mean what you think (for H6).

H6 { font-size:14pt; font-family:times new roman; color:maroon;
font-weight:heavy; display: inline; background-color: white;
text-align : center; height=40; width=400; }

I strongly suggest checking your style sheet with a checker like
http://www.htmlhelp.com/tools/csscheck/
http://jigsaw.w3.org/css-validator/
There are quite some errors in your CSS, to put it mildly.

(And there's little point in using vertical-align for a heading. Except
for table cells, vertical-align basically lowers or raises the baseline
of text, e.g. for creating superscripts.)

More info:
http://www.cs.tut.fi/~jkorpela/styles/howto.html
(A bit dated. Sorry, no time to update now. Must keep writing the next
book. All work and no play makes Jack a dull boy. All work and no play
makes Jack a dull boy. All work and no play makes Jack a dull boy...)

 

[Steve Pugh]

I'm still working my way through CSS and can't seem to do a valign and
assign it to this H6 css.

The CSS property is vertical-align, not valign.
It either
- aligns the content within a table cell
or
- aligns an element within the surrounding line box.

It has no effect on block elements that are not inside table cells.

H6 { font-size:14pt; font-family:times new roman; color:maroon;
font-weight:heavy; display: inline; background-color: white; text-align :
center; height=40; width=400; }

No vertical-align in those styles. So what are you trying to do?

height=40 and width=400 are wrong.
(a) should be : not =
(b) you must upply units, otherwise good browsers will ignore the
style.

There's no such value as heavy for font-weight, are you thinking of
bold ?

pt are a print unit of measure, don't use them in screen stylesheets.

And should I dare to ask whether you really have six levels of
headings in your document?

Steve

 

[Keith]

Thanks to all who responded and I will answer your points to my valign
query:-
H6 { font-size:14pt; font-family:times new roman; color:maroon;
font-weight:heavy; display: inline; background-color: white; text-align
:center; height=40; width=400; }

Andrew Tang said:-
valign can't be used and advised the use of padding to acheive what I want,
which it did.

Chris Morris said:-
I'd suggest running your CSS code through a checker, though, because it's so
full of errors I'm surprised it does *anything* you want it to. - Well
Chris, surprisingly it does everything on my MS Internet Explorer v5.50 even
with all the errors. - I have now run it through
http://jigsaw.w3.org/css-validator/ and I'm now in the process of trying to
understand and then wade through all my many css errors.

Jukka K Korpela said:-
You really work with sixth level headings? Why? - I said "I'm still working
my way through CSS", so I used all six levels to do various tests on
different examples. However, what would be wrong in having say three web
pages each using two totaly differing level headings called from the same
style sheet.?
Jukka said 'but what are you trying to accomplish'? - Andrew Tang
accomplished what I wanted.

Steve Pugh said:-
No vertical-align in those styles. So what are you trying to do? - I did
not use valign in my H6 statement because I knew it did not work, hence my
post.
Steve also said 'you must upply units, otherwise good browsers will ignore
the style'. I had a look at our club browser stats and 63% used Explorer
6.0, 17% used Explorer 5.5, 13% used Explorer 5.0, and 7% used Mozilla
..0. - I know Explorer 5.5 does allow my incorrect style, so which of the
others will not allow my incorrect css style.

Once again, thanks to you all.

 

[Steve Pugh]

Thanks to all who responded and I will answer your points to my valign
query:-

Steve also said 'you must upply units, otherwise good browsers will ignore
the style'. I had a look at our club browser stats and 63% used Explorer
6.0, 17% used Explorer 5.5, 13% used Explorer 5.0, and 7% used Mozilla
.0. - I know Explorer 5.5 does allow my incorrect style, so which of the
others will not allow my incorrect css style.

Depending on the doctype used IE6 won't apply the styles. And there's
Mozilla, Opera, etc.

Just because some browsers guess that you might mean pixels is that
any reason to break the rules and omit the units? Do it properly and
it works in all browsers, do it wrongly and it won't. But hey it's
your choice.

Steve

 

[Steve Pugh]

You also say:- 'Depending on the doctype used IE6 won't apply the styles',
but surely if <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"> was used (just picked at random of a popular site), the
browser would ignor because of the <! > and presumably even correct css
would not be implemented.

Oh boy, you're about to learn about one of the biggest headaches in
modern web site authoring.

Modern browsers (IE5 Mac, IE6 Win, Mozilla and hence Netscape 6+,
Opera 7, and a few others) have multiple rendering modes. In one mode
(normally called Quirks mode) they emulate the bugs of the previous
generation of browsers. In the other mode (normally called Standards
mode) the more closely apply the published standards.

What makes a browser use one mode or the other? The doctype (or lack
of) found in the page puts them into one mode or the other.

Further reading -
http://www.mozilla.org/docs/web-developer/quirks/doctypes.html
http://dbaron.org/mozilla/quirklist
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp?frame=true
http://www.opera.com/docs/specs/doctype/
http://gutfeldt.ch/matthias/articles/doctypeswitch.html
http://www.hut.fi/u/hsivonen/doctype.html

Steve

 

[Keith]

As you say Steve, "Oh boy, you're about to learn about one of the biggest
headaches in
modern web site authoring". I must admit that in these early days of trying
to even half master css, the DOCTYPE declaration has not even come up with
the various examples I have copied and tried to understand. I have had a
look at your advised reading links and I'm pretty baffled.

Do I interpret correctly that the example on the MSDN site regarding the
illustration of the difference in the way width and height properties are
calculated in Internet Explorer 6 vs. earlier versions; effectively means
that if css is used to say give the height and width of an image, then all
the versions of IE will display the picture at various sizes?

Regards

Keith