Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Centered?

Reply
Thread Tools

Centered?

 
 
SamuŽl van Laere
Guest
Posts: n/a
 
      10-02-2003
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


 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      10-02-2003
"SamuŽl van Laere" <(E-Mail Removed)> 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 <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
 
 
 
SamuŽl van Laere
Guest
Posts: n/a
 
      10-02-2003
----- Original Message -----
From: "Steve Pugh" <(E-Mail Removed)>
>
> 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


 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      10-03-2003
"SamuŽl van Laere" <(E-Mail Removed)> wrote:

>----- Original Message -----
>From: "Steve Pugh" <(E-Mail Removed)>
>>
>>
>> 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 <(E-Mail Removed)> <http://steve.pugh.net/>
 
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




Advertisments