Different H1 css height in Safari/Firefox

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: a开发者_如何学编程bsolute;
top: 117px;
}

As I already mentioned in Safari this looks fine: Screenshot Safari

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

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

I came across a better fix IMO. Using the element inspector in Google Chrome, I noticed that amongst the various CSS Rules panels that the inspector was telling me either applied or didnt apply to my H tag content, there was one CSS rule that wasn't coming from my own CSS settings and its called "user agent stylesheet".

This is an example of the actual browser setting a CSS rule value based on the html of the element (H tag). In my example it is on the homepage of this domain: http://myrentals-keywest.com/ and the CMS rendered the H4 tag with a

value inside it without me even coding for it. Firefox and Chrome has a setting to add CSS rule to the

value within the H4 tag which increases the height value of the element as follows:

    p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

So I found where the added height was coming from. The way I fixed this that didn't have any unwanted effect in Safari or Internet Explorer browsers, was to add the following rule into my CSS file to override the User Agent rule:

h4 p {
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
}

My advice to you, is to use the same method to identify what user agent rule is affecting your desired layout in some browsers, then override the rule for the specific element inside your own CSS file by copying the User Agent rule but changing its setting to fit with what you originally planned.

See screen capture image for a detailed outline of the User Agent rule and my own override which cancels out the user agent :)

different browsers handle H1 tag in different way. you can handle this problem by using line-height css property to specify exact line height.

line-height: 20px;