Centered?

  • Thread starter Samuël van Laere
  • Start date
S

Samuël van Laere

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

Steve Pugh

Samuël van Laere said:
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
 
S

Samuël van Laere

----- Original Message -----
From: "Steve Pugh said:
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.
 
S

Steve Pugh

Samuël van Laere said:
----- Original Message -----
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
 

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

Members online

Forum statistics

Threads
473,744
Messages
2,569,480
Members
44,900
Latest member
Nell636132

Latest Threads

Top