Mozilla and Safari CSS Margins

May 22nd, 2004 Posted in General |

One of the more difficult things I fought with trying to get this css layout, was the different margins that IE6 and Mozzilla display for the same margin width. A 15px width margin is alot smaller in Mozzilla than in IE with was causing the middle and right columns to press up against the left most edge. Below is the solution I found to fix this:

#maincol{
float: left;
width: 476px;
background-color:#fff;
margin: 8px 0px 8px 15px;
padding: 0px;
border: 1px solid #ccc;
}

html>body #maincol {
/* these margins affect Mozilla and Safari */
margin: 8px 0px 8px 31px;
}

html>body #maincol is a selector thats valid CSS code that IE6 dosen’t read, so the rule of margins gets overwritten on Mozilla and Safari browsers.

Related Posts