Need help styling an h2

HTML & CSS
1

URL: http://tinyurl.com/32dqlgc

I’m trying to figure out how to make the h2.home look correct in all browsers. It’s the part that says “Featured Class.” It looks good in Firefox, Opera, Chrome, and amazingly, IE (at least IE 8). As far as I can tell, Safari is not cooperating. I’m on a PC and have that version of Safari, but a look at Browsercam shows that Safari isn’t playing well.

This is a weird one. I’m using @font-face to generate the font and I’ve been playing with the line-height to get it right. Not good…

Do you see the issue?

h2.home {
width: 498px;
height: 33px;
background: url(‘…/images/homeh2-bg.png’) center center no-repeat;
text-transform: uppercase;
color: #5b5a5a;
font-size: 40px;
font-family: ‘BebasNeueRegular’, Arial, Sans-serif;
font-weight: normal;
margin: 0;
padding: 0;
line-height: 33px;
}

2

You’re saying that it displays properly in Safari Win but not Safari Mac? Where it’s not displaying properly, it’s actually showing the text in that font, but the positioning isn’t consistent with the other browsers? How is it in Firefox Mac?

3

No, it’s not showing correctly in Safari Win or Mac. The font is displaying fine, but the actual positioning is wrong. It looks good in all other browsers, I believe. I don’t have a Mac, but on Browsercam, it looks okay, I think.

The top of the word should match the top of the gray bar that is on the right. In fact, that is a whole background image and the words should fit exactly inside. Here…I’ll attach the image…

4

Hmm, I don’t know. Positioning text precisely, especially cross-browser/ platform, can be maddening. Unfortunately I don’t have Safari installed right now, so I can’t easily monkey around with your page.

It’s weird if it’s off in Safari but not Chrome, since they’re both WebKit.

5

Yes, it’s both maddening and weird. :slight_smile: Thanks for looking!

6

Yeah, I’m sorry I couldn’t be helpful. Maybe someone else will be able to help.