CSS valign?

Discussion in 'HTML' started by Keith, Jun 26, 2003.

  1. Keith

    Keith Guest

    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
    Keith, Jun 26, 2003
    #1
    1. Advertising

  2. Keith

    Andrew Tang Guest

    "Keith" <> wrote in message
    news:bdee6m$7su$...
    > 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
    Andrew Tang, Jun 26, 2003
    #2
    1. Advertising

  3. Keith

    Chris Morris Guest

    "Keith" <> 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
    Chris Morris, Jun 26, 2003
    #3
  4. "Keith" <> 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
    Jukka K. Korpela, Jun 26, 2003
    #4
  5. Keith

    Steve Pugh Guest

    "Keith" <> 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 <> <http://steve.pugh.net/>
    Steve Pugh, Jun 26, 2003
    #5
  6. Keith

    Keith Guest

    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.
    Keith, Jun 26, 2003
    #6
  7. Keith

    Steve Pugh Guest

    "Keith" <> 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 <> <http://steve.pugh.net/>
    Steve Pugh, Jun 26, 2003
    #7
  8. Keith

    Steve Pugh Guest

    "Keith" <> 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-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

    --
    "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/>
    Steve Pugh, Jun 27, 2003
    #8
  9. Keith

    Keith Guest

    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
    Keith, Jun 27, 2003
    #9
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Cezar

    valign in DataGrid Column

    Cezar, Dec 2, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    967
    g pavlov
    Dec 3, 2003
  2. =?Utf-8?B?QXJuZQ==?=

    valign=top doesn't always work

    =?Utf-8?B?QXJuZQ==?=, Dec 6, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    421
    =?Utf-8?B?QXJuZQ==?=
    Dec 6, 2004
  3. =?Utf-8?B?QXJuZQ==?=

    valign=top how does it work

    =?Utf-8?B?QXJuZQ==?=, Dec 6, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    422
    =?Utf-8?B?QXJuZQ==?=
    Dec 7, 2004
  4. =?Utf-8?B?QXJuZQ==?=

    Valign=top doesn't always work

    =?Utf-8?B?QXJuZQ==?=, Dec 6, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    588
    Dave Fancher
    Dec 7, 2004
  5. VB Programmer

    vAlign won't work

    VB Programmer, Apr 11, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    840
    VB Programmer
    Apr 12, 2005
Loading...

Share This Page