Hi, I am designing and tweaking a layout for my client and I can't seem to get my alignment just right. At first glance, it looks fine, but notice to the left hand side at the top of the layout and right hand side of the footer area? Notice that 2 or 3 pixel mis alignment? I know it has to do with my width and padding variables, but I have tried everything. I am becoming cross-eyed and can't get it fixed. PLEASE HELP!

Oh and in IE, there is a thing grey strip at the bottom of the page just below the gold writing that reads: BUY SELL TRADE LOCATE, but in FF it isn't there. I would prefer it not be there, but have no idea how to make IE behave. Any suggestions?

The url is http://premierautosource.com

Thank you so much!


OH and here is the contents of my css file:


body {
background-color: #0d0c0c;
font-family: Verdana, sans-serif;
font-size: 18px;
font-color: #fff;
margin: 0;
padding: 0;
}

input, select, textarea {
background-color: #2c2827;
font-family: Verdana,Tahoma, sans-serif;
color: #fff;
font-size: 0.9em;
border: 1px solid #0d0c0c;
margin:2px;
padding:0px;

}

.inventoryimage {margin:6px; float:left;border: #000000 1px solid;}

.listheader {list-style-image: url(/images/bullet.gif);}


a:link, a:active, a:visited {
Font-Weight:none;
Color: #0d0c0c;
Text-Decoration: none;
}
a:hover {
Font-Weight:none;
Color: #000;
Cursor: hand;
Text-Decoration: none;
}



a.textlink:link {
color:#fff;
font-weight:bold;
font-size: 12px;
text-decoration:none;
border-bottom: 1px dashed #0d0c0c;
}

a.textlink:active {
color:#fff;
font-weight:bold;
font-size: 12px;
text-decoration:none;
border-bottom: 1px dashed #0d0c0c;
}

a.textlink:visited {
color:#fff;
font-weight:bold;
font-size: 12px;
text-decoration:none;
border-bottom: 1px dashed #0d0c0c;
}

a.textlink:hover {
color:#cf9420;
font-weight:bold;
font-size: 12px;
text-decoration:none;
border-bottom: 1px dashed #0d0c0c;
}

.sidebarlabels {font-family: Tahoma; color:#cf9420; font-size:20px;}

.footeraddress {font-family: Tahoma; color:#fff; font-size:12px;}

.footertext {font-family: Ariel; font-size: 10px;}

#container{
position: relative;
text-align: center;
color: #fff;
font-size: 18px;

}
div#outer {
width: 690px;
background-color:#0d0c0c;
margin: 0 auto;
padding:15px;
padding-top:15px;
/*border:0;*/
text-align: left;
font-size: 70%;
}

#header{
height: 308px;
width: 690px;
margin: 0 auto;
padding: 0;
/*border: 1px solid white;*/

}
#header1{
background: url(/images/map.jpg) no-repeat;
height: 86px;

}

#header2{
background: url(/images/top3.jpg) no-repeat;
height: 222px;
padding: 0;
}

#header1 ul{
margin: 0px 0px 0px 8px;
padding-top: 57px;
list-style: none;
font-family: Impact,Tahoma;
font-size: 20px;
font-weight: none;
color: #171717;
padding-left: 5px;





}

#header1 li{
display: inline;
margin-right: 8px;

}


#middletop {
width: 650px;
margin: 0 auto;
padding:0px;
padding-bottom:0px;
background-color:#2c2827;
/*border:0; */
border-left: 0px solid #202020;
border-right: 0px solid #202020;
border-top: 0px;
border-bottom: 0px solid #202020;

}

#rightcolumn {
width:205px;
padding:0px;
margin: 0 0 0 440px;
margin-top:0px;
background-color:#2c2827;
/*float: right; */
/*padding:10px;*/


}

#leftcolumn {
width:400px;
background-color:#2c2827;
padding: 7px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 10px;
float: left;
display: inline;
/* border: 1px solid #FF8C00; */


}


.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;

}



.biopic {border: #000000 1px solid;
padding: 4px;

}

a.greenlink:link {
color:#cf9420;
font-weight:bold;
font-size: 12px;
text-decoration:none;
border-bottom: 1px dashed #fff;
}

a.greenlink:active {
color:#cf9420;
font-weight:bold;
font-size: 12px;
text-decoration:none;
border-bottom: 1px dashed #fff;
}

a.greenlink:visited {
color:#cf9420;
font-weight:bold;
font-size: 12px;
text-decoration:none;
border-bottom: 1px dashed #fff;
}

a.greenlink:hover {
color:#fff;
font-weight:bold;
font-size: 12px;
text-decoration:none;
border-bottom: 1px dashed #cf9420;
}

You have a lot of nested divs in there. Kinda hard to find a problem. It could be anywhere mixed in with them all.

It could also be a graphical issue too. Make sure they're properly sized so they match up.

I've seen your site before.. and helped you before too
Ok.. I think you're just running into a browser rounding problem with the margin: 0 auto; on the #midtop. Take out margin: 0 auto and put in just margin-left: 21px on #midtop.

For the footer, I would actually put a footer div in there and put that image in as a background. Use the same margin-left; 21px on the footer <div> as #midtop. However, that image is 652 px wide.. trim it to exactly 650px wide and it should line up.

Thank you so much! And yes, LadyinRed, you have been my saving angel before. ::bows at your feet:: (hehe).

How do you think everything looks? Granted, as I am writing this, I have not trimmed my footer image yet, because I am not on my computer, but it may be fixed by the time you see this message. Any other tips or suggestions?

I think it looks pretty good. You've done a nice job with it