Single-pixel Differences in Rendering of H1

Forum Moderators: open

Message Too Old, No Replies

Single-pixel Differences in Rendering of H1

robzilla

11:59 pm on Dec 30, 2008 (gmt 0)

The following simplified code produces a 100x100px red box with the header (H1) "TEST" contained in it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div style="width: 100px; height: 100px; background-color: red;">
<h1 style="font-size: 24px; padding: 0; margin: 0; border: 0;">TEST</h1>
</div>
</body>
</html>

Firefox is rendering the header one pixel lower than all other browsers I've tested, including Internet Explorer, Chrome and Opera. Firefox may be rendering it correctly, I really don't know, but it sure is outnumbered in this case. The red box looks the same everywhere, as does the look of the text. A single pixel may seem like too small a thing to lose one's head over, but, unfortunately, in the layout I'm working on, the difference is quite noticeable and getting on my nerves since I can't get it fixed.

Is anyone familiar with this?

encyclo

1:24 am on Dec 31, 2008 (gmt 0)

One pixel lower that what, exactly? Do you mean that the whole box is drawn one pixel lower? If so, the above example has no specific values for margin and padding on the

body

element, is it that? If you mean one pixel lower within the red box, I can't see it specifically, but have you tried setting the

line-height

for the

h1

element?

robzilla

1:48 am on Dec 31, 2008 (gmt 0)

The

h1

header is rendered one pixel lower within the red box (in Firefox 3.0.5). Sorry if I was vague. I had not tried the

line-height

attribute for the

h1

element. Having set it to 17px just now, I can see that the problem has been fixed in Chrome, Opera and even IE7 (i.e. they now render it as Firefox does), but not in IE6. So thanks for that. I suppose I could create a conditional comment for IE6 to set the line-height differently so it renders the header the same. I'd rather not, of course, but I don't really see any other options.

Wlauzon

6:01 pm on Dec 31, 2008 (gmt 0)

Actually px is seldom the best way to size text, as browsers and monitors may affect how it looks for various reasons.

The best way usually is to set all font sizes with em. Basically, on most monitors 1em = about 13px, which is usually considered about the smallest easily readable text.

two4god07

3:41 am on Jan 2, 2009 (gmt 0)

what exactly is an EM?

I have my whole webpage set up with px.. picture sizes font sizes.. should I just go ahead and change it up?

Wlauzon

3:59 am on Jan 2, 2009 (gmt 0)

The "em" applies only to text, not graphics. (Well, not really, you can size anything with ems but definately not recommended as you get some strange results).

There are many reasons why em is preferred, just Google css + em, you will find many sources. There are occasions to use em's for things like margins, but often px or % works better (% usually scales better but can be tricky on some layouts).

What is an em? [w3schools.com...]

[edited by: Wlauzon at 4:05 am (utc) on Jan. 2, 2009]