CODEWITHSUNDEEP
cssmacosfirefox
Matt Parrilla
Matt Parrilla

Reputation: 3221

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

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>

Upvotes: 1

Views: 1917

Answers (2)

Thomas Shields
Thomas Shields

Reputation: 8942

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.

Upvotes: 1

Commandrea
Commandrea

Reputation: 561

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; 
    }

Upvotes: 2

Related Questions