CSS - Firefox - DIV issue - css

Question

I have a weird FIREFOX issue. If you go to http://www.aerlawgroup.com - scroll down and see the box on the right hand side (with the gavel). As you can see, the text and phone number are flushed too far to the right. If you see site in Chrome or Safari, it renders fine. I was advised to reset the .hr css tag, but that didn't work. I use Weebly, so while I can change the HTML and CSS, Weebly will insert it's own code upon publishing. Here is the code:
<div id="FREE2">FREE CASE</div>
<div class="PHONENUMBER" id="PHONE3">(800) 852 - 9851</div>
<div class="EVALUATION" id="EVAL2">EVALUATION</div>
<div class="CALLORCLICK" id="CALL2">CALL OR CLICK</div>
</div>
and
#FREE2 {
font-family: Arial, Helvetica, sans-serif;
color: #b2c8ff;
position: absolute;
top: 23px;
font-size: 22px;
left: 693px;
}
#EVAL2 {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
top: 42px;
font-size: 20px;
left: 693px;
}
#CALL2 {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
position: absolute;
top: 65px;
left: 693px;
font-size: 17px;
}
#PHONE3 {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
top: 170px;
position: absolute;
left: 824px;
margin: 0px;
padding: 0px;
font-size: 16px;
}

Answer 1

It isn't a good idea to use absolute positioning on the elements inside that box relative to the page. I think Chrome/Safari and Mozilla have different ideas as to what those pieces of text should be relative to. Having them relative to the box itself will remedy your problems (from what I've been messing around with in developer tools, it's fixing it).
To make left: xx and top: xx reposition the element relative to the box, simply set the positioning of its container (.bigimg) to relative.
.bigimg {
background-image: url("http://www.aerlawgroup.com/uploads/2/1/1/5/21159280/9150872_orig.jpg");
width: 282px;
height: 199px;
position: relative;
}
Now if you change your values for #FREE2 for example to make them visible
#FREE2 {
font-family: Arial,Helvetica,sans-serif;
color: rgb(178, 200, 255);
top: 30px;
font-size: 22px;
left: 20px;
position: absolute;
}
You will need to adjust the values for all elements inside the box, and then it will be consistent between browsers. These values are just an example, you'll need to find the difference between the old and the new values yourself.

Answer 2

If you're using position absolute, you have to set position relative to its parent element. For example, the parent element for ".PHONENUMBER" would be ".bgimg".
.bgimg {position:relative;}
.PHONENUMBER {position:absolute; top:170px; right:20px;}
So ".PHONENUMBER" will position absolute, relative to ".bgimg".