Different Display In Firefox And Internet Explorer

I am developing a website using html and css but I have a problem the way website is displayed in the different browsers.
I have a div (div class="top")for the top logo and name of the website etc. I have added a background to the div. I have made another div inside the top div. Both the top div and the logo div are absolutely positioned. I have set the float property for the logo div to be float:left;. I have added another div inside the top div for the headign h1 of the website. this div is also absolutely positioned and it has following properties

div.heading { position:absolute; width:auto; height:auto; top:35px left:220px }

now the problem is that in internet explorer the div is appearing to be about 30px above the position at which it is appearing in firefox.
what could be the problem.
Please reply

The issue with internet explorer and firefox is that they use different rendering engine. IE being the microsoft product is not associated with any open source or other popular kit, not evern webkit. So your site's display will look different to IE, Mozilla, safari and chrome. One thing you can do for now is to search for the IE specific div tags and modifications that will keep display consistent with both these browsers. But on serious note, stop worrying about internet explorer because more and more people are going to switch to chrome or firefox.

The issue with internet explorer and firefox is that they use different rendering engine. IE being the microsoft product is not associated with any open source or other popular kit, not evern webkit. So your site's display will look different to IE, Mozilla, safari and chrome. One thing you can do for now is to search for the IE specific div tags and modifications that will keep display consistent with both these browsers. But on serious note, stop worrying about internet explorer because more and more people are going to switch to chrome or firefox.

I have read somewhere that if you make certain declaration in the start of the HTML document, then the later versions of internet explorer will display the page properly. I was reading a book about learning HTML and CSS and as you said the book stated that different browsers have different methods of displaying the websites and the problem is especially visible when someone uses absolutely positioned div tags. The book said that different browsers handle pixels differently and that is why percentage based or "em" based calculations should be used.I don't know whether the problem will persist with percent based calculations but what I know is that it is very easy to use pixels based calculations and for an amateur like me, percent based calculations are not easy.

I usually do not use the position/left/right/top/bottom elements of css, instead I fool around with margins and paddings .

 

Now, I did notice one thing which might cause the problem: "auto". As already said, IE and FF (and other browsers) use different rendering engines, but also different default values and different algorithms for the value auto. You must understand that there are a lot of different properties which define the size of an object in html:

padding (space between the objects border and the objects inside)

defined dimensions (width/height)

border-size

margin (space around the object which is always empty and defines the actual size of the object)

So, my suggestion is to set the dimensions to a fixed value and the margin and the padding to 0px (only when dealing with visual elements (including the title of your website), if you're working with blocks of text (content of your site), it's advised to have a padding and/or margin set)

I usually do not use the position/left/right/top/bottom elements of css, instead I fool around with margins and paddings .

 

Now, I did notice one thing which might cause the problem: "auto". As already said, IE and FF (and other browsers) use different rendering engines, but also different default values and different algorithms for the value auto. You must understand that there are a lot of different properties which define the size of an object in html:

padding (space between the objects border and the objects inside)

defined dimensions (width/height)

border-size

margin (space around the object which is always empty and defines the actual size of the object)

So, my suggestion is to set the dimensions to a fixed value and the margin and the padding to 0px (only when dealing with visual elements (including the title of your website), if you're working with blocks of text (content of your site), it's advised to have a padding and/or margin set)

The problem is with the heading of the website. I changed the width and the height from auto to a fixed value but the problem could not be fixed. Then I saw a differences. When I used <h1> tag inside a div tag, Internet explorer did not add spaces above and below the h1 element (the space which is added above and below a block level element) while the firefor did add the space. Then I just added <p> </p> before the <h1> and the problem was corrected. For the empty paragraph firefox added nothing else but internet explorer added white space in the top and then in both browsers the position of my heading became the same.

Have you noticed such a problem before.

For information the firefox version on my pc is 3.1.6 and the internet explorer version is 8 beta.