Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS valign?

Reply
Thread Tools

CSS valign?

 
 
Keith
Guest
Posts: n/a
 
      06-26-2003
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


 
Reply With Quote
 
 
 
 
Andrew Tang
Guest
Posts: n/a
 
      06-26-2003

"Keith" <(E-Mail Removed)> wrote in message
news:bdee6m$7su$(E-Mail Removed)...
> 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


 
Reply With Quote
 
 
 
 
Chris Morris
Guest
Posts: n/a
 
      06-26-2003
"Keith" <(E-Mail Removed)> writes:
> 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...

--
Chris
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      06-26-2003
"Keith" <(E-Mail Removed)> wrote:

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

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html


 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      06-26-2003
"Keith" <(E-Mail Removed)> wrote:

>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

--
"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
 
Keith
Guest
Posts: n/a
 
      06-26-2003
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.



 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      06-26-2003
"Keith" <(E-Mail Removed)> wrote:

>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

--
"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
 
Steve Pugh
Guest
Posts: n/a
 
      06-27-2003
"Keith" <(E-Mail Removed)> wrote:

>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-deve.../doctypes.html
http://dbaron.org/mozilla/quirklist
http://msdn.microsoft.com/library/en...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

--
"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
 
Keith
Guest
Posts: n/a
 
      06-27-2003
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




 
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
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
confused - html validates, css validates but validate css from the html causes errors Titus A Ducksass - AKA broken-record HTML 6 11-15-2004 12:59 PM
Set CSS property equal to another CSS property? Noozer HTML 10 10-13-2004 09:20 PM
Is there a way to set the a CSS property to be explicitly the same as another CSS property? Joshua Beall HTML 1 12-10-2003 07:21 PM
print.css and screen.css tom watson HTML 1 09-09-2003 02:48 PM



Advertisments