Why does my h1 look different in FF compared to Chrome and Safari?

Question

The h1, h2, and h3 of my site (only on local server atm) are much bolder in FF than in Chrome and Safari. The alignment is also slightly off. Why is this happening and how can I offset it?

Note: this is not happening for my partner on Ubuntu (I am on a Mac and the difference is significant).

This is effecting the alignment of everything and since I'm using firebug to get everything juuuust right, this is obviously problematic!

I'll copy the inherited CSS for an element that is behaving badly. I'm not sure if it's needed, but I figure it can't hurt:

#show_page_info h1 {
    color: #FFF7E7;
    display: block;
    font: bold 23pt Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 17px 5px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    width: 445px;
}
style3.css (line 342)
Inherited fromdiv#show_page_info
#show_page_info {
    text-align: left;
}
style3.css (line 326)
Inherited fromdiv#show_page_item
.show_item, #show_page_item {
    list-style: none outside none;
}
style3.css (line 295)
Inherited frombody
body {
    color: #333333;
    font: 13pt/1.5 Helvetica,Arial,sans-serif;
}

The bolder text is one thing, but the alignment is a colossal pain. If I center in FF, it's off in Chrome, if I center in Chrome, it's off in FF etc.

Thank you in advance!!

Edit: html (this is just for the case of the above CSS, this happens for all h1,h2,h3...)

<div id="show_page_item">
    <div id="show_page_info">
        <h1>{{show.time|date:"l, N jS"}}
        <span id="show_detail_cost">
        {% if show.cost == 0 %}
            Free!
        {% else %}
            ${{ show.cost|floatformat:"-2" }}
        {% endif %}
        </span>
        </h1>
    </div>
</div>

@Gaurav: I am not using a CSS reset as the one I had originally intended to use caused more issues than it solved. We are pretty far along now at this point though I'd be open to a good recommendation! — Matt Parrilla, Aug 06 '11 at 17:25
http://dowebsitesneedtolookexactlythesameineverybrowser.com/ more info here: http://blog.berndtgroup.net/?p=105 — jao, Aug 06 '11 at 17:27
Thank you jao, but my font is not centered in my title element. I'd like it to be. — Matt Parrilla, Aug 06 '11 at 17:47
what versions of Chrome/FF are you using? I can't see any difference [here](http://jsfiddle.net/thomas4g/B6WBv/2/) in Chrome 14 & FF8 — Thomas Shields, Aug 06 '11 at 18:02
@Thomas: I still have a difference when I follow your link. The font is wider (bolder?) as well as positioned closer to the top of the "Result" box. Is this some setting of mine in FF that I am unaware of (it's not zoom, but something else)? Is it possible that it has something to do with my OS? — Matt Parrilla, Aug 06 '11 at 18:08
Using Chrome 13 and FF5, sorry to not address that initial question. Though I should note, my partner is using FF5 as well and has no issues (on Ubuntu). — Matt Parrilla, Aug 06 '11 at 18:39
@Matt sorry for the holdup. I have a hunch, but no point posting an answer 'till i'm sure. Does [this](http://jsfiddle.net/thomas4g/B6WBv/4/) still look diff. in your browsers? — Thomas Shields, Aug 06 '11 at 23:00
@Thomas. No worries, I appreciate the attention and the fact that you aren't just brushing me off. Yes, the link you provided does still look different. I just deleted/reinstalled FF hoping for a tiny miracle, but no dice. — Matt Parrilla, Aug 07 '11 at 00:30

score 2 · Answer 1 · answered Aug 06 '11 at 23:50

2

Per the fonts, each browser renders them differently. Try this to have better control over the weights in moz:

        @-moz-document url-prefix() {
    * { font-weight: 100; }
    h1, h2, h3, h4, h5, h6 { font-weight: 400; 
    }

answered Aug 06 '11 at 23:50

Commandrea

561
3
10
24

score 1 · Answer 2 · edited May 23 '17 at 09:58

1

Prior to Chrome 14.0.833 (see this question), the text-shadow is rendered more tightly on the text than Firefox. I think this is what accounts for the apparently "more bold" text in Firefox. Commandrea's answer could be pertinent as well. As to the alignment issue; I'm not sure - see my comments on your question.

edited May 23 '17 at 09:58

Community

1
1

answered Aug 07 '11 at 00:01

Thomas Shields

8,874
5
42
77

It's definitely not just a shadow issue, as I can turn the shadow off and see that it's still both wider and aligned differently. Honestly though, the alignment is by far more troubling as it is the difference between a sharp looking site and a sloppy one. The good news is that this seems to be limited to my computer, the bad news it makes firebug un-useable! – Matt Parrilla Aug 07 '11 at 00:33
I realize you (or anybody for that matter) might not be able to solve this problem for me. I genuinely appreciate your help though. – Matt Parrilla Aug 07 '11 at 00:34
2

@Matt hop on into a [chat room](http://chat.stackoverflow.com/rooms/2198/room-for-thomas-shields-and-matt) with me, if you don't mind so we can sort this out without clogging the comments. – Thomas Shields Aug 07 '11 at 00:44

Why does my h1 look different in FF compared to Chrome and Safari?

2 Answers2