Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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:
    Code:
    /* 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;
    }
    Last edited by mister dix; 03-05-2009 at 06:07 PM.

  • #2
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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 and see if the problem persists.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fixed that, but to no avail. Just IE7 issue, so that's lame. Anyone else? Thanks!

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello mister dix,
    The first thing I see is the floats in #bodyarea need cleared. Like this -
    Code:
    #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 -
    Code:
    #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 -
    Code:
    /*--------------- 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;
    	}
    Edit: 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.
    Last edited by Excavator; 03-05-2009 at 07:41 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •