CSS Margin Problem in Safari and Chrome

[LBRapid]

Hi my site, www.johndesu.com has an issue where a margin appears in Google Chrome and Safari. There is an 8px margin that appears. I want to get rid of it. The site displays fine in Firefox and IE.

Thanks,
John

[PeejAvery]

[ moved ]

[PeejAvery]

Every browser acts a little bit different than others when it comes to the body's default settings. Add the following to your CSS.

body {margin: 0px;}

[LBRapid]

Every browser acts a little bit different than others when it comes to the body's default settings. Add the following to your CSS.

body {margin: 0px;}

i have done that but the problem still persists

[PeejAvery]

You might want to do the same with your #main element. Or even specify it for the default of div tags.

[LBRapid]

i added it to the #main and specified it as the default but it still doesn't want to work for some reason

[PeejAvery]

After looking at it further, you have something overwritting the CSS of the margin property of the body tag. I'm not sure what it is, but if you add style="margin: 0px;" within the body tag, you will see that border go away.

[LBRapid]

After looking at it further, you have something overwritting the CSS of the margin property of the body tag. I'm not sure what it is, but if you add style="margin: 0px;" within the body tag, you will see that border go away.

thanks for all the help. everything seems to be working fine now :)

[LBRapid]

Ok so that solved half the problem. Yet again in both Safari and Chrome the footer is not displaying correctly. This is probably another CSS issue, and yet again I am stumped.

Any more of your wisdom PeejAvery?

Thanks in advance

[PeejAvery]

Just as something was causing the other styles to be re-written, this is most likely the case. There are only two options. 1. Remove the CSS causing the re-write. 2. Put the CSS you want last, or in the actual HTML element tags.

[LBRapid]

I figured out the footer issue, but I don't understand why so many things are being re-written in safari and chrome only. My text formatting is also not working for some reason.

I've only had time lately to work on this a little because of finals, so any more help would be much appreciated.

[Xeel]

the main problem in these days that each browser has its own style defaults for the elements. So to fight this it is a good practice to reset these values. So each main CSS I write begins with:
html, body, table, th, tr, td, p, img, hr, ul, li, h1, h2, h3, h4, h5, div, form, fieldset {padding:0; margin:0; border:none;}
and later I just override the values when it's needed.

[LBRapid]

I found http://developer.yahoo.com/yui/reset/

This gives defaults across browsers and seems to have fixed many of my problems.
Thanks :)