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.
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)
- 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)
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.