CSS <div> not scaling well between IE and Firefox -

i'm having trouble resizing template same ie. i'm trying make div called face 3 , face4 scale on both ie , firefox can't . if div fit on firefox . go on over ie . can please me .

css

.face1 {     text-align: center;     background-color: #aaaaaa;      height: 450px;     width: 390px;     position: absolute;     left: 520px;top:100px;     border-style:solid;     border-color:#1be968;     border-width:35px; } .face3 {     text-align: center;     background-color: #dddddd;      width: 300px;     position: relative;     left: 10px;top:0px;     text-align: center;     color: #ffffff;     font-family: arial;     font-size: 33px; } .face4 {     text-align: center;     background-color: #dddddd;       width: 50px;height:30px;     position: absolute;     left: 290px;top:200px;     text-align: center;     color: #cccccc;     font-family: arial;     font-size: 33px; } 

html

<div class="face1">     <div class="face3">24 x 7 customer web supprt</div>     <div class="face4">supprt</div> </div> 

demo @ http://jsfiddle.net/yg3yq/

opening http://jsfiddle.net/yg3yq/show/ in ie8 (and ie9) renders same firefox, leads me believe document might rendered in quirks mode.

to remedy this, make first line of html file (no whitespace or characters before it!)

<!document html>