margin and padding problem

[matt-saunders]

Hey guys in Firefox my site looks fine but in IE it not right can someone please help me

http://www.upfrontdesigns.co.uk/build/index.html


Thanks

[Excavator]

Hello matt-saunders,
To get things to line up better when using multiple boxes like you are, I like to use both float: left; and float: right;
You can margin things over a little to get the spacing better but this (too many changes to list so quoted the entire CSS) will give you an idea what I mean:


/* CSS Document */






/* Start Body Styles */



body {
padding: 0;
margin: 0;
font: 0.7em Tahoma, sans-serif;
line-height: 1.5em;
background: #fff;
color: #454545;
}


* {
margin: 0;
padding: 0;
}


.container {
margin: 50px auto 0 auto;
width:680px;
height:auto;

}

.h3 {
clear: both;
background: #A9C0CE url(../images/corner.gif) no-repeat top right;
color: #FFF;
padding: 7px 0 7px 10px;
font: bold 1em Tahoma, Arial, Sans-Serif;
margin: 0 0 5px 0;
text-align:center;
}

.content_container {
margin: 0 auto;
width: 670px;
background-image:url(../images/middle_border.gif);
background-repeat:repeat-y;
}

.top_border {
margin: 0 auto 0 auto;
width:680px;
background-image:url(../images/top_border.gif);
background-repeat:no-repeat;
height:8px;
}

.bottom_border {
background-image:url(../images/bottom_border.gif);
height: 8px;
width: 680px;
background-repeat:no-repeat;
clear: both;
}
/* End Body Styles */








/*Header*/


.header {
padding: 0 0 0 0;
height:89px;
}



/*End Header*/











/* Start Main Navagation */

.nav {
clear: both;
font-size: 1.1em;
height: 30px;
color: #FFF;
margin: 0 0 5px 10px;
background: #FF9148;
width: 660px;
}

.nav li {
margin: 0;
padding: 7px 12px 5px 12px;
color: #FFEADC;
background: #FF9148;
float: left;
list-style: none;
}

.nav li.active {
background: #E0691A url(../images/bar.gif) no-repeat center top;
color: #fff;
font-weight: bold;
padding: 7px 10px 6px 10px;
}

.nav li a {
font-weight: bold;
color: #FFF;
text-decoration: none;
}

.nav li a:hover {
text-decoration:underline;
}


/* End Main Navagation */












/*Start HOMEPAGE Left box and right box*/


.left {
float:left;
width:330px;
height: 200px;
margin: 0 5px 5px 10px;
background:#eee;
}

.left h3 {
clear: both;
background: #6C757A url(../images/corner.gif) no-repeat top right;
color: #FFF;
padding: 7px 0 7px 10px;
font: bold 1em Tahoma, Arial, Sans-Serif;
margin: 0 0 5px 0;
}

.left img {padding-left:5px;
padding-top:5px;

}

.left p {padding-left:10px;
padding-right: 10px;
text-align:justify;
}


.right {
float:right;
width:313px;
height:200px;
margin: 0 10px 5px 0;
background:#eee;
}


.right h3 {
clear: both;
background: #6C757A url(../images/corner.gif) no-repeat top right;
color: #FFF;
padding: 7px 0 7px 10px;
font: bold 1em Tahoma, Arial, Sans-Serif;
margin: 0 0 5px 0;
}

.right img {

padding-top:10px;
padding-left:10px;

}

/*End HOMEPAGE Left box and right box*/










/*Start HOMEPAGE Service Row Web Design Eflyer and Logo Design*/

.service1 {
float:left;
width:212px;
height:250px;
background:#eee;
margin: 0 5px 0 10px;

}

.service1 h3 {
clear: both;
background: #A9C0CE url(../images/corner.gif) no-repeat top right;
color: #FFF;
padding: 7px 0 7px 10px;
font: bold 12px Tahoma, Arial, Sans-Serif;
margin: 0 0 0 0;
}

.service1 p {

padding-left:10px;
padding-top:5px;
font-family:Tahoma, Arial, Sans-Serif;
font-size:11px;
}

.service2 {
width:213px;
height:250px;
background:#eee;
margin: 210px auto 0 auto;

}

.service2 h3 {

background: #A9C0CE url(../images/corner.gif) no-repeat top right;
color: #FFF;
padding: 7px 0 7px 10px;
font: bold 1em Tahoma, Arial, Sans-Serif;
margin: 0 0 0 0;
}

.service2 p {

padding-left:10px;
padding-top:5px;
font-family:Tahoma, Arial, Sans-Serif;
font-size:11px;
}

.service3 {
float:right;
width:213px;
height:250px;
background:#eee;
margin: 0 0 0 0;
}

.service3 h3 {
clear: both;
background: #A9C0CE url(../images/corner.gif) no-repeat top right;
color: #FFF;
padding: 7px 0 7px 10px;
font: bold 1em Tahoma, Arial, Sans-Serif;
margin: 0 0 0 0;
}

.service3 p {

padding-left:10px;
padding-top:5px;
font-family:Tahoma, Arial, Sans-Serif;
font-size:11px;
}

/*cut here because forum would not let me post - too many characters.
I didn't change anything below this line:
End HOMEPAGE Service Row Web Design Eflyer and Logo Design*/





Obviously, you will need to re-order your html so .service3 is before .service2 (because .service2 is not floated anymore)