Search code examples
htmlcssinternet-explorergoogle-chromefirefox

Negative top margin in firefox and IE when using @font-face

I've been developing a website in Google Chrome and finally decided to see what it looked like in IE and Firefox. To my astonishment, Firefox and Internet Explorer both had the same issue compared to chrome. When using @font-face to import a font Google Chrome displays things the way I want it to, but Firefox and Internet Explorer both show the font with an imaginary "negative top margin". I attached some screenshots as it is a bit hard to explain.

Google Chrome

Google Chrome

Firefox

Firefox

Internet Explorer

Internet Explorer http://img846.imageshack.us/img846/3021/a78c216586e54bc2b05d2a8.png

Google Chrome

Google Chrome

Firefox

Firefox

Internet Explorer

Internet Explorer

Does anyone have any idea what could be causing this? I haven't implemented browser-fix so all the CSS for the navigation bar is:

<div id="nav">
    <ul>
        <li>
            <a href="#main">HOME</a>
        </li>
        <li>
            <a href="#news">NEWS</a>
        </li>
        <li>
            <a href="#events">EVENTS</a>
        </li>
        <li>
            <a href="#about">ABOUT</a>
        </li>
        <li>
            <a href="#music">MUSIC</a>
        </li>
        <li>
            <a href="#study">STUDY</a>
        </li>
        <li>
            <a href="#gallery">GALLERY</a>
        </li>
        <li>
            <a href="#shop">SHOP</a>
        </li>
        <li>
            <a href="#contact">CONTACT</a>
        </li>
    </ul>
</div>

 

#nav a {
    height: 60px;
    margin-bottom: 0px;
    width: 105px;
    display: block;
    line-height: 60px;
    text-align: center;
    font-family: bebas;
    text-decoration: none;
    color: #555555;
    font-size: 25px;
}

Markup for the events list is:

<div class="entry">
    <div class="date">
        <div class="day">15</div>
        <div class="month">Nov</div>
    </div>      
    <div class="location">
        <div class="city">Melbourne</div>
        <div class="club">St Judes Anglican Church</div>
    </div>  
    <div class="clear"></div>
</div>

 

#events .entry{
    text-transform: uppercase;
    font-family: bebas;
    font-size: 30px;
    color: #555555;
    word-spacing: 4px;
    border-top: 2px solid #4A3948;
}
.city{
    font-size: 40px;
}

.location{
    padding-left:10px;
}
.day{
    font-size: 65px;
    line-height: 55px;
}
.date{
    text-align: center;
    width: 95px;
    border-right: 4px solid;
}
.club{
    font-size: 28px;
    line-height: 31px;
}

Does anyone have any information on this issue?

Solution

  • It was an issue with the font's metrics as Boris Zbarsky suggested in the comments. I downloaded a fresh copy of the typekit from a specialised @font-face website and its working now!