position: absolute issue on different browser - html

Question

I have a positioned absolute div where text is going to be appended
<div id="text_head">
<p class="dot">·</p>
<div class="line"></div>
<div class="line"></div>
<p id="p_head">Here is my</p>
<p id="p_sub">WEB DESIGN</p>
</div>
and the following css
.dot {
color: #FFFFFF;
font-size: 80px;
left: 131px;
position: absolute;
top: 22px;
}
.line { 
background-color: #FFFFFF;
height: 2px;
position: absolute;
right: 0;
top: 67px;
width: 118px;
}
as you can see in this Picture there is a difference how both browser render this!
I set margin: 0px and padding: 0pxas default style for the pelement!
Any help would be much appreciated!
edit additional css:
p { margin: 0;
padding: 0;
color: #FFF;
}
#p_head {
font-family: impregnable_personal_use_onRg;
font-size: 74px;
margin: 0;
padding: 0;
}
#p_sub {
font-family: alternategothic2_btregular;
font-size: 54px;
margin: 0;
padding: 0;
position: absolute;
right: 0;
}

Answer 1

Possibly a problem with line-height. Did you try resetting the line-height on p?
p {line-height: 1.2;}
Or you could just reset all line-height's:
body {line-height: 1.2;}

Answer 2

Could you post your entire html/css files? I pasted your code into an editor, but the page rendered very differently from your screenshot.
By the way, I would advise you to use the #font-face attribute to embed web fonts if you aren't already, that way your typography will look the same across devices. :)

Answer 3

Set the parent position to relative before playing with the offsets of the childs. Because you have set all the child elements set to absolute they will continue to look up the hierarchy to relate themselves and if the parent is not set to relative they will go all the way up to the body tag.
#text_head {
position: relative;
}