IE7 alignment issue.

So i'm working on this site and all is going well, but IE7 aligns the text div in the center, while all other browsers render it properly to the left of center. Any help would be appreciated, this is probably something simple that I'm just not seeing today.

test site:
http://www.vermontgeeks.com/latoscanella

Thanks!

full stylesheet:

/* CSS Document */

body{
padding:0;
margin:0;
background:url(images/body_bg.gif) repeat-x 0 0 #9C1700;
text-align: center;
}
div, p, h1, h2, h3,h4, h5, h6, img, ul, form, label{
padding:0px;
margin:0px;
color: #FFF;
font-family: "Century Gothic", Verdana, Geneva, sans-serif;
font-weight: bold;
font-size: 16px;
text-align: center;
}
ul{
list-style-type:none;
}
.clearcols
{
clear:both;
line-height:0px;
margin:0px;
padding:0px;
height:0px;
font-size:0px;
}
/*--------------------mainbody ----------------------*/
#container{
width:100%; margin:0 auto; padding:0px; }


#mainbody{
width:780px; margin:0 auto; padding:0px; }
#headerarea{
width:780px; margin:0 auto; padding:0px;}
#leftheader{
width:562px; margin:0px; padding:0px; float:left; display:block;
}
#rightheader{
width:218px; margin:0px; padding:0px; float:left; display:block;
}
#logo{
width:562px; height:115px; margin:0px; padding:0px; float:left; display:block;
}
#header{
width:562px; height:173px; margin:0px; padding:0px; float:left; display:block;
}
#headerlady{
width:218px; height:288px; float:left; margin:0px; padding:0px; display:block;
}
/*---------- Menu section ---------------*/
#menubg{
width:780px; height:51px; margin:0 auto; padding:0px; background:url(images/menu_bg.gif) no-repeat;}
#menubg ul{
width:750px; display:block; margin:0px 0 0 25px; padding:0 0 0 0px; height:37px; font-size:0;
}
#menubg ul li{
display:block; float:left; margin:0 ; padding:18px 16px 0 30px;
}
#menubg ul li a{
font:bold 11px Tahoma, Arial, Helvetica, sans-serif; color:#FF7800; text-decoration:none;padding:0; margin:0; display:block;
}
#menubg ul li a:hover{
color:#FFFFFF; text-decoration:none;
}

/*--------------- BODY PART ------------------*/
#bodyarea{
width:705px;
margin:0 auto;
padding:0px;

text-align: center;
}
#introbg{
width:699px; height:226px; margin:15px auto; padding:0px; float:left; background:url(images/intro_bg.jpg) no-repeat;}
#introbg p{
font:normal 11px Verdana, Arial, Helvetica, sans-serif; color:#A91305; text-align:justify; display:block; width:516px; margin:50px 0 0 25px;
}
#introbg p a{
display:block; font:11px Verdana, Arial, Helvetica, sans-serif; color:#000000;
text-decoration:underline; margin:15px 0 0 0; padding:0 0 10px 0px;
}
#introbg p a:hover{
text-decoration:none; color:#000000;
}

#introbg2{
width:699px; height:450px; display:inline; margin:15px auto; padding:0px; float:left; background:url(images/intro_bg2.jpg) no-repeat;}
#introbg2 p{
font:normal 13px Verdana, Arial, Helvetica, sans-serif; color:#A91305; text-align:justify; display:block; width:516px; margin:70px 0 0 25px;
}
#introbg2 p a{
display:block; font:13px Verdana, Arial, Helvetica, sans-serif; color:#000000;
text-decoration:underline; margin:15px 0 0 0; padding:0 0 10px 0px;
}
#introbg2 p a:hover{
text-decoration:none; color:#000000;
}

#introbg3{
width:699px; height:500px; margin:15px auto; padding:0px; float:left; background:url(images/intro_bg3.jpg);}
#introbg3 p{
font:normal 11px Verdana, Arial, Helvetica, sans-serif;
color:#A91305;
text-align:justify;
display:block;
width:516px;
margin:70px 0 0 25px;
}
#introbg3 p a{
display:block; font:11px Verdana, Arial, Helvetica, sans-serif; color:#000000;
text-decoration:underline; margin:15px 0 0 0; padding:0 0 10px 0px;
}
#introbg3 p a:hover{
text-decoration:none; color:#000000;
}

#introbg4{
width:699px; height:700px; margin:15px auto; padding:0px; float:left; background:url(images/intro_bg4.jpg);}
#introbg4 p{
font:normal 13px Verdana, Arial, Helvetica, sans-serif;
color:#A91305;
text-align:justify;
display:block;
width:516px;
margin:50px 0 0 25px;
}
#introbg4 p a{
display:block; font:13px Verdana, Arial, Helvetica, sans-serif; color:#000000;
text-decoration:underline; margin:15px 0 0 0; padding:0 0 10px 0px;
}
#introbg4 p a:hover{
text-decoration:none; color:#000000;
}

#bodytop{
width:701px; height:15px; margin:0px auto; padding:0px; float:left;}
#contentarea{
width:701px; margin:0 auto; padding:0px; float:left; background:#6E1809;}
#bodybottom{
width:701px; height:15px; margin:0 auto; padding:0px; float:left;}
#leftcontent{
width:215px; margin:10px; padding:0px; float:left;}
#leftcontent h2.news{
width:165px; height:35px; margin:0 0 0 0px; padding:0 0 0 0px; background:url(images/latest_news.gif) no-repeat; display:block; text-indent:-2000px;
}
#leftcontent p{
font:normal 11px Verdana, Arial, Helvetica, sans-serif; color:#BE2207; text-align:justify; display:block; width:200px; margin:20px 0 0 0px;}
#leftcontent p a{
display:block; font:11px Verdana, Arial, Helvetica, sans-serif; color:#D6CEC2;
text-decoration:underline; margin:15px 0 0 0; padding:0 0 0px 0px;
}
#leftcontent p a:hover{
text-decoration:none; color:#FFFFFF;
}


#rightcontent{
width:430px; margin:10px 0 0 0; padding:0px; float:left;}
#rightcontent h1.tips{
width:249px; height:19px; margin:0 0 0 0px; padding:0 0 0 0px; background:url(images/designer_tips.gif) no-repeat; display:block; text-indent:-2000px;
}
#rightcontent h3.service{
width:249px; height:20px; margin:0 0 0 0px; padding:0 0 0 0px; background:url(images/services.gif) no-repeat; display:block; text-indent:-2000px;
}
#rightcontent p{
font:normal 11px Verdana, Arial, Helvetica, sans-serif; color:#CE877B; text-align:justify; display:block; width:430px; margin:20px 0 0 0px;}
#rightcontent p a{
display:block; font:11px Verdana, Arial, Helvetica, sans-serif; color:#D6CEC2;
text-decoration:underline; margin:15px 0 0 0; padding:0 0 0px 0px;
}
#rightcontent p a:hover{
text-decoration:none; color:#FFFFFF;
}

#skill{
width:699px; height:226px; margin:15px auto; padding:0px; float:left;}
#skill h3.skill{
width:281px; height:25px; margin:0 0 0 0px; padding:0 0 0 0px; background:url(images/designer_skill.gif) no-repeat; display:block; text-indent:-2000px;
}
#skill h3.contact{
width:349px; height:25px; margin:0 0 0 0px; padding:0 0 0 0px; background:url(images/contact_details.gif) no-repeat; display:block; text-indent:-2000px;
}
#skill p{
font:normal 11px Verdana, Arial, Helvetica, sans-serif; color:#D18276; text-align:justify; display:block; width:685px; margin:10px 0 0 5px;
}
#skill p a{
display:block; font:11px Verdana, Arial, Helvetica, sans-serif; color:#E6CFCC;
text-decoration:underline; margin:15px 0 0 0; padding:0 0 10px 0px;
}
#skill p a:hover{
text-decoration:none; color:#FFFFFF;
}

/*---------- FOOTER AREA -----------*/
#footerarea{
width:100%; height:51px; margin:18px 0 0 0px; padding:0px; background:#5E0800;}
#footerbg{
width:780px; height:51px; no-repeat; margin:0 auto; padding:0px;}
#footerbg ul{
width:750px; display:block; margin:0px 0 0 25px; padding:0 0 0 0px; height:37px; font-size:0;
}
#footerbg ul li{
display:block; float:left; margin:0 ; padding:18px 16px 0 30px;
}
#footerbg ul li a{
font:bold 11px Tahoma, Arial, Helvetica, sans-serif; color:#FF7800; text-decoration:none;padding:0; margin:0; display:block;
}
#footerbg ul li a:hover{
color:#FFFFFF; text-decoration:none;
}
#copyrightarea{
width:780px; height:53px; margin:0 auto; padding:0px;}
#copyrightarea p{
width:302px; font:11px/14px Verdana, Arial, Helvetica, sans-serif; color:#B88279; display:block; float:left;
padding:10px 0 0 110px;
}
#copyrightarea p.copy{
width:150px; font:11px/14px Verdana, Arial, Helvetica, sans-serif; color:#B88279; display:block; float:left;
padding:10px 0 0 80px;
}

/*------------- CONTACT FORM ----------- */
#contactbody{
width:380px;
height:270px;
margin:0 auto;
padding-top:20px;
background:none;
}
#contact{
width:379px; margin:0 auto 0 auto;
}
#contact form{
width:378px; display:block; margin:0 auto 0 auto;
}
#contact form label{
margin:0 12px 0px 10px; display:block; font:11px Tahoma, Helvetica, sans-serif; float:left; color:#D18276;
width:100px;
}
#contact form input{
width:220px; height:17px; margin:0 0 8px 0; padding:0; float:left;
}
#contact form input.bu{
background:url(images/submit.gif) no-repeat 0 0; width:59px; height:22px; margin:12px 7px 0 0px; float:left; border:none;
cursor:pointer; display:block; float:left;
}
#contact form input.re{
background:url(images/reset.gif) no-repeat 0 0; width:52px; height:22px; margin:12px 0px 0 0px; float:left; border:none;
cursor:pointer; display:block; float:left;
}

.table1 {
text-align: center;
}
.bgbold {
font-weight: bold;
}

Hello and welcome to the forums! It doesn't look like a matter of IE centering the div. You are missing a closing </p> tag (might be related). Fix the validator error (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.vermontgeeks.com%2Flatoscanella%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&ss=1&verbose=1) and see if the problem persists.

Fixed that, but to no avail. Just IE7 issue, so that's lame. Anyone else? Thanks!

Hello mister dix,
The first thing I see is the floats in #bodyarea need cleared. Like this -#bodyarea{
width:705px;
margin:0 auto;
padding:0px;
overflow: auto;
text-align: center;
}
Read about clearing floats like that at http://www.quirksmode.org/css/clearing.html


Looking further I see #introbg is float:left;
It's the full width of it's containing div though, no need for a float there. Coluld be more like this -
#introbg{
width:699px;
height:226px;
margin:15px auto;
padding:0px;
background:url(images/intro_bg.jpg) no-repeat;
}

Your text is geting pushed over because it's inheriting text-align:center; from somewhere above it. Change it to text-align:left; and you'll see it get totally messed up because your using display:inline; (which is messing things up) and the float:left; to try to fix it. display tag is probably not needed here, neither is the float.
Try it all like this -/*--------------- BODY PART ------------------*/
#bodyarea{
width:705px;
margin:0 auto;
padding:0px;
text-align: center;
}
#introbg{
width:699px;
height:226px;
margin:15px auto;
padding:0px;
background:url(images/intro_bg.jpg) no-repeat;
}
#introbg p{
font:normal 11px Verdana, Arial, Helvetica, sans-serif; color:#A91305; text-align:justify; display:block; width:516px; margin:50px 0 0 25px;
}
#introbg p a{
display:block; font:11px Verdana, Arial, Helvetica, sans-serif; color:#000000;
text-decoration:underline; margin:15px 0 0 0; padding:0 0 10px 0px;
}
#introbg p a:hover{
text-decoration:none; color:#000000;
}

#introbg2{
width:699px;
height:450px;
margin:15px auto;
padding:0px;
overflow: auto;
text-align: left;
background:url(images/intro_bg2.jpg) no-repeat;
}
#introbg2 p{
font:normal 13px Verdana, Arial, Helvetica, sans-serif; color:#A91305; text-align:justify; display:block; width:516px; margin:70px 0 0 25px;
}

Oh, by the way - Good job on the valid code! Change that p2s.png from align="right" to float:left; and you should be able to up that to a Strict DocType.

First off, thanks to excavator. I've trolled these boards here and there and found many a fix before, but this being my first post, it was a great response and of course, accurate as ever.

Being a self taught html/css/etc; geek, I rely heavily on people like the people on this board.

And on the final note, yeah, I was being a little lazy with that align="right" i'll fix it!