SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help styling an h2

    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. #2
    SitePoint Addict Beaumont's Avatar
    Join Date
    Mar 2005
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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....
    Attached Images Attached Images

  4. #4
    SitePoint Addict Beaumont's Avatar
    Join Date
    Mar 2005
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    177
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it's both maddening and weird. Thanks for looking!

  6. #6
    SitePoint Addict Beaumont's Avatar
    Join Date
    Mar 2005
    Posts
    219
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I'm sorry I couldn't be helpful. Maybe someone else will be able to help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •