I've recently created a splash screen, which is to be animated and worked fine so far in Safari.
The html code looks like this:

```
<div id="logo">
    <div id="janik"><h1>Janik</h1></div>
    <div id="lipke"><h1>lipke</h1></div>
    <div id="tog_design"><h2>Photography and Webdesign</h2></div>
</div>  

```

CSS:

```
#logo{
top: 40%;
width: 570px;
height: 180px;
margin-left: auto;
margin-right: auto;
/*margin-top: -150px;*/
position: relative;
cursor: pointer;
}

#janik{
width: 300px;
height: 117px;
overflow: hidden;
left: 0;
position: absolute;
}

#janik h1 {
margin: 0;
font-family: Helvetica;
font-weight:normal;
font-size: 142px;
letter-spacing: -8px;
color: #3a3e40;
}

#lipke{
width: 265px;
height: 117px;
overflow: hidden;
left: 295px;
position: absolute;
}

#lipke h1{
margin: 0;
font-family: Helvetica;
font-weight:normal;
font-size: 142px;
letter-spacing: -8px;
color: #4b7586;
}

#tog_design{
text-align: center;
width: 560px;
height: 50px;
position: absolute;
top: 117px;
}

```

As I already mentioned in Safari this looks fine:
[Screenshot Safari](http://cl.ly/5hZm)

But in Firfefox, the H1 tags seem to have a different height and therefore the Text isn't masked like in Safari, as I intended.

I've checked both Browsers with CSS Inspector:
[enter link description here](http://cl.ly/5hwu)

The "error" seems to be obvious, but I can't tell right now how to fix.
I've tried out several changes to width height of the h1 tags itself aswell as the div tags.
Could anybody help me out with this?

Cheers