The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

This (my) page appears different in different browsers

ok ill make this short. You just need FireFox and Explorer to see what im talking about (because i only tested the page under those two browsers).

my question is as simple as this ... why the hell isn't the page looking the same in both broswers?? here's the basic layout in HTML along with the CSS code to see it by your-self , with comments on the HTML page :

In IE the padding is added on the inside of the width thus reducing the content area available for display. In the correct box model padding and borders are added to the elements dimensions thus preserving the stated width/height of the content area.

So Ie makes the element 485px x 800px
All other browsers make it 495px x 810px

Therefore you need to either add the padding on an inner element that has no width specified or use one of the methods mentioned in the sticky thread. The method used for ie6 depends on whether you are working in standards or quirks mode so read the faq as it explains it all.

Also note that all browsers render elements default margins and padding differently so you also need to control these explicitly. e.g. p {margin:5px 0} h1 {margin:0} etc.