Centered?

Discussion in 'HTML' started by Samuël van Laere, Oct 2, 2003.

  1. My testpage hold a <h1> element for the title:
    http://samuel.phpindex.nl/test2.htm

    On IE5.5 the title isn't centered, while on Mozilla it is.
    Only way i could fix it under IE is to add 10px to the padding
    but then it would look bad under Netscape, specially when zooming.

    I suppose it is best to leave it as it is, its readable on both browsers
    anyway
    But is Mozilla correct in centering the title?
    And more important, why is Mozilla centering the title?

    Didn't check it on IE6, perhaps they fixed it but we all know MS so that
    isn't very likely.



    --
    With regards,
    Samuël van Laere
    the Netherlands
     
    Samuël van Laere, Oct 2, 2003
    #1
    1. Advertising

  2. Samuël van Laere

    Steve Pugh Guest

    "Samuël van Laere" <> wrote:

    >My testpage hold a <h1> element for the title:
    >http://samuel.phpindex.nl/test2.htm
    >
    >On IE5.5 the title isn't centered, while on Mozilla it is.


    You mean vertically centered? I just spent a couple of minutes trying
    to work out why any browser would center it horizontally...

    The h1 is at the top of the parent div in IE6, in the middle in Moz
    1.4 and at the bottom in Opera 7.2

    Adding borders to the h1 will let you see more easily what each
    browser is doing.

    It seems to be the default margin-top of the h1. Adding margin-top: 0
    moves the heading to the top in all three of the above browsers.
    Setting it to 0.7em centres (with some variation between browsers) it
    at 'typical' font sizes which is the best you can hope for when you
    have text and an image alongside each other like this.

    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, Oct 2, 2003
    #2
    1. Advertising

  3. ----- Original Message -----
    From: "Steve Pugh" <>
    >
    > You mean vertically centered? I just spent a couple of minutes trying
    > to work out why any browser would center it horizontally...
    >
    > The h1 is at the top of the parent div in IE6, in the middle in Moz
    > 1.4 and at the bottom in Opera 7.2
    >
    > Adding borders to the h1 will let you see more easily what each
    > browser is doing.
    >
    > It seems to be the default margin-top of the h1. Adding margin-top: 0
    > moves the heading to the top in all three of the above browsers.
    > Setting it to 0.7em centres (with some variation between browsers) it
    > at 'typical' font sizes which is the best you can hope for when you
    > have text and an image alongside each other like this.
    >


    Yes i ment vertically centered, should have mentioned that <g>
    Well it works in a way, but changing the text size to something bigger or
    smaller will alter the position
    inside the div, setting the divs height to auto won't prevent this.
    Is this because of the image?

    Well anyway its good enough.
    Thanks Steve.


    --
    With regards,
    Samuël van Laere
    the Netherlands
     
    Samuël van Laere, Oct 2, 2003
    #3
  4. Samuël van Laere

    Steve Pugh Guest

    "Samuël van Laere" <> wrote:

    >----- Original Message -----
    >From: "Steve Pugh" <>
    >>
    >>
    >> The h1 is at the top of the parent div in IE6, in the middle in Moz
    >> 1.4 and at the bottom in Opera 7.2
    >>
    >> Adding borders to the h1 will let you see more easily what each
    >> browser is doing.
    >>
    >> It seems to be the default margin-top of the h1. Adding margin-top: 0
    >> moves the heading to the top in all three of the above browsers.
    >> Setting it to 0.7em centres (with some variation between browsers) it
    >> at 'typical' font sizes which is the best you can hope for when you
    >> have text and an image alongside each other like this.
    >>


    >Well it works in a way, but changing the text size to something bigger or
    >smaller will alter the positioninside the div,


    Yes that's what I meant by 'typical' font sizes and this being the
    best you can hope for.

    >setting the divs height to auto won't prevent this.
    >Is this because of the image?


    Yep. As the div contains an image and a floated h1, the height of the
    div is entirely dependent upon the height of the image.

    You could experiment with the line-height property (and zero margins)
    if you are certain that the text will never wrap.

    My preferred solution would get rid of all the divs and use just an h1
    and an img inside it. But until IE supports min-height I don't think
    it's practical.

    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, Oct 3, 2003
    #4
    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. Ryan Wade

    Controls Always Centered

    Ryan Wade, Oct 4, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    374
    Steve C. Orr [MVP, MCSD]
    Oct 4, 2004
  2. Nico
    Replies:
    0
    Views:
    467
  3. palmis
    Replies:
    4
    Views:
    800
    palmis
    Jan 23, 2006
  4. Andrew Emberson

    centered page width for text

    Andrew Emberson, Oct 9, 2003, in forum: HTML
    Replies:
    1
    Views:
    409
    bengee
    Oct 10, 2003
  5. =?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=

    Centered table

    =?ISO-8859-1?Q?Fran=E7ois_de_Dardel?=, Nov 1, 2003, in forum: HTML
    Replies:
    2
    Views:
    458
    PeterMcC
    Nov 1, 2003
Loading...

Share This Page