Question

i’m making a simple website.
i’m using chrome as default to check my site, and after i get to the result i want, i check the site with explorer and firefox BUT then i found out that the size of a div and it’s position is not the same in different browsers(in IE9).

css file:

   body 
{
    height:1000px;
    width:inherit;

background-image: url('תמונות/BackGroundBig.jpg'); /* fallback */
background-image: url('תמונות/BackGroundBig.jpg'), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: url('תמונות/BackGroundBig.jpg'), -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
background-image: url('תמונות/BackGroundBig.jpg'), -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
background-image: url('תמונות/BackGroundBig.jpg'), -ms-linear-gradient(top, #444444, #00000); /* IE10 */
background-image: url('תמונות/BackGroundBig.jpg'), -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background-image: url('תמונות/BackGroundBig.jpg'), linear-gradient(top, #444444, #999999); /* W3C */ 

}

#Header
{
    width:inherit;
    height:225px;
    border:1px solid red;
}
#Header img
{

    position:absolute;
    left:20.4em;
 }

html file:

 <div id="Header">
    <div class="headerDiv"></div>
    <img id="headerLogo" src="../תמונות/HeaderLOGO2.jpg" alt="" />
    <div  class="headerDiv"></div>
</div>

with this code i can’t see a background image in IE9 and the size different of the objects i can see are very different in IE9 from chrome and firefox.

i want to know somthing:
do different browsers have different meaning to, lets say a div with a 100px width and a 200px height?

any adivce a link to an artical about it will be great!
(sorry for my english)

Answer 1

100px width, and 200px height are equal across all browsers.
You’ll be safe there.

Do take into consideration that you are using em, that is equal to the current font-size without specifying the actual font-size. You’re leaving that interpretation for the browser.

body {
    font-size: 10px; /* this will make em cross-behave */
}

But browsers do have different implementations of paddings, margins and some other oddities. Even though the majority of CSS rules are supported equality cross-browser there are some peculiarities here and there.

You should try to test cross-browser as you develop to prevent a “how can this be” final result.

Taking a look at Quirksmode.org is always a life-saver.

Chrome, Firefox and Safari you can test out of the box and a huge percentage of users already have the latest and greatest version. For IE you can use IE Tester that will help you see how different versions react to different CSS markups.