TheFilmGod Posted July 5, 2007 Share Posted July 5, 2007 Hi, I'm making a website for my school. It worked perfectly in FF and IE6 until I checked it on my cousin's computer! It doesn't align center with IE7. It works like a charm on IE6. Here's the link: wwpknights.com Thanks in advance. CSS: /* CSS Document */ body{ padding:0px; margin:0px; background-image: url(images/bg.png); background-repeat: repeat-y; color:#5E5E5E; font:13px/18px Arial, Helvetica, sans-serif; background-position: center; } .black { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; } div, p, ul, h2, h3, img{padding:0px; margin:0px;} ul{list-style-type:none;} /*----TOP PANEL----*/ #topPan{ width:778px; height:158px; position:relative; margin:0px auto; background:url(images/topPan-bg.gif) 0 0 repeat-x #15AEFD; color:#fff; padding:0px; background-color: #FFFFFF; } #topPan img.logo{width:451px; height:113px; position:absolute; top:8px; left:50px;} #topPan p{font-size:16px; padding:70px 0 0 43px;} #topPanlogin { position: absolute; left: 513px; top: 18px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; font-weight: bold; } #topContactPan p.callus{background:#0C71A4; color:#fff; width:64px; height:14px; line-height:14px; font-size:14px; font-weight:bold; text-transform:uppercase; padding:0px;} #topContactPan p.no{font-size:26px; padding:4px 0 0;} #topMenuPan{width:683px; height:16px; position:absolute; bottom:9px; left:48px;} #topMenuLeftPan{width:69px; height:16px; float:left; background:url(images/menu-leftbg.gif) 0 0 no-repeat;} #topMenuMiddlePan{width:544px; height:16px; float:left;} #topMenuMiddlePan ul{width:544px; height:16px;} #topMenuMiddlePan ul li{width:67px; height:16px; border-right:1px solid #E5E5E5; float:left;} #topMenuMiddlePan ul li a{width:67px; height:16px; display:block; background:#fff; color:#4A4A4A; font:10px/16px "Trebuchet MS",Arial, Helvetica, sans-serif; text-decoration:none; font-weight:bold; text-align:center; text-transform:uppercase;} #topMenuMiddlePan ul li a:hover{background:#fff; color:#0574AF; text-decoration:none;} #topMenuMiddlePan ul li.home{background:#fff; color:#0574AF; text-decoration:none; font:10px/16px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-transform:uppercase;} #topMenuMiddlePan ul li.contact{width:67px; border-right:1px solid #fff;} #topMenuMiddlePan ul li.contact a{width:67px; height:16px; display:block; background:#fff; color:#4A4A4A; font:10px/16px "Trebuchet MS",Arial, Helvetica, sans-serif; text-decoration:none; font-weight:bold; text-align:center; text-transform:uppercase;} #topMenuMiddlePan ul li.contact a:hover{background:#fff; color:#0574AF; text-decoration:none;} #topMenuRightPan{width:70px; height:16px; float:left; background:url(images/menu-rightbg.gif) 0 0 no-repeat;} /*----/TOP PANEL----*/ /*----BODY PANEL----*/ #bodyPan{ width:693px; position:relative; margin:0 auto; padding:25px 0 25px; background-color: #FFFFFF; } /*----BODY LEFT PANEL----*/ #bodyLeftPan{ width:430px; float:left; padding:12px 11px 10px 5px; background-color: #FFFFFF; } #bodyLeftPan h2{width:410px; height:30px; background:url(images/border1.gif) 100% 70% no-repeat #fff; color:#00111A; font:28px/28px Georgia, "Times New Roman", Times, serif;} #bodyLeftPan h2 span{background:#fff; color:#046598;} #bodyLeftPan h3{width:410px; height:30px; background:url(images/border2.gif) 100% 70% no-repeat #fff; color:#00111A; font:28px/28px Georgia, "Times New Roman", Times, serif;} #bodyLeftPan h3 span{background:#fff; color:#046598;} #bodyLeftPan p{padding:7px 0 0;} #bodyLeftPan p span{background:#fff; color:#046598; font-weight:bold;} #bodyLeftPan ul{width:410px; margin:10px 0 0;} #bodyLeftPan ul li{width:410px; height:20px;} #bodyLeftPan ul li a{width:390px; height:20px; background:url(images/button.gif) 0 6px no-repeat #fff; color:#1A1A1A; text-decoration:underline; padding:0 0 0 20px;} #bodyLeftPan ul li a:hover{width:390px; height:20px; background:url(images/button-hover.gif) 0 6px no-repeat #fff; color:#676363; text-decoration:underline;} #bodyLeftPan p.more{background:#F3F3F3; color:#003D5C; width:410px; height:11px; margin:25px 0; padding:0px; line-height:11px; font-size:11px; } #bodyLeftPan p.more a{display:block; width:44px; height:11px; background:#fff; color:#003D5C; text-decoration:none; margin:0 0 0 246px; line-height:11px; text-align:center; padding:0px; text-transform:uppercase;} #bodyLeftPan p.more a:hover{display:block; width:44px; height:11px; background:#E0DEDE; color:#003D5C; text-decoration:none;} #bodyLeftNextPan{width:410px; clear:both; padding:10px 0 0;} #bodyLeftPan p.next{background:#F3F3F3; color:#003D5C; width:410px; height:11px; padding:0px; line-height:11px; font-size:11px; clear:both; } #bodyLeftPan p.next a{display:block; width:44px; height:11px; background:#fff; color:#003D5C; text-decoration:none; margin:0 0 0 246px; line-height:11px; text-align:center; padding:0px; text-transform:uppercase;} #bodyLeftPan p.next a:hover{display:block; width:44px; height:11px; background:#E0DEDE; color:#003D5C; text-decoration:none;} #bookcatagories{width:410px; position:relative; margin:0 auto; padding:5px 0 0;} #namePan{width:156px; float:left; background:url(images/name-dot.gif) 100% 85% no-repeat #fff; color:#4F4F4F; font-size:14px; text-transform:uppercase;} #nameonePan{width:156px; float:left;} #nameonePan ul{width:156px;} #nameonePan ul li{width:140px; height:20px; background:url(images/arrow.gif) 0 6px no-repeat #fff; color:#03537D; padding:0 0 0 10px;} #pricePan{width:106px; float:left; background:url(images/price-dot.gif) 100% 85% no-repeat #fff; color:#4F4F4F; font-size:14px; text-transform:uppercase;} #priceonePan{width:143px; float:left;} #priceonePan ul{width:143px;} #priceonePan ul li{width:133px; height:20px; background:url(images/price-border.gif) 100% 50% no-repeat #fff; color:#00111A; line-height:20px; font-size:12px; font-weight:bold; padding:0 0 0 10px;} #discountPan{width:126px; float:left; background:url(images/discount-dot.gif) 100% 85% no-repeat #fff; color:#4F4F4F; font-size:14px; text-transform:uppercase; padding:0 0 0 12px;} #discountonePan{width:110px; float:left;} #discountonePan ul{width:110px;} #discountonePan ul li{width:100px; height:20px; background:url(images/dicount-border.gif) 100% 50% no-repeat #fff; color:#00111A; font-size:12px; font-weight:bold; padding:0 0 0 10px;} /*----/BODY LEFT PANEL----*/ /*----BODY RIGHT PANEL----*/ #bodyRightPan{width:245px; float:right; border:1px solid #DADADA; background:#F3F3F3; color:#1A1A1A; padding:0 0 47px;} #bodyRightPan h2{width:195px; height:35px; display:block; border:1px solid #DADADA; background:#fff; color:#00111A; font:24px/34px Georgia, "Times New Roman", Times, serif; margin:6px 8px 16px; padding:0 0 0 20px;} #bodyRightPan h2 span{background:#fff; color:#046598;} #bodyRightPan h3{width:195px; height:35px; display:block; border:1px solid #DADADA; background:#fff; color:#00111A; font:24px/34px Georgia, "Times New Roman", Times, serif; margin:6px 8px 0; padding:0 0 0 20px;} #bodyRightPan h3 span{background:#fff; color:#046598;} #bodyRightPan ul{width:180px; margin:0 0 17px 29px;} #bodyRightPan ul li{width:180px; height:18px;} #bodyRightPan ul li a{width:160px; height:18px; display:block; background:url(images/button.gif) 0 6px no-repeat #F3F3F3; color:#1A1A1A; text-decoration:none; padding:0 0 0 20px;} #bodyRightPan ul li a:hover{background:url(images/button-hover.gif) 0 6px no-repeat #F3F3F3; color:#797878; text-decoration:none;} #bodyRightPan p{padding:0px 29px 0px 29px;} #bodyRightPan p.boldtext{padding:10px 29px 0px; font-size:14px; background:#F3F3F3; color:#1A1A1A; font-weight:bold;} #bodyRightPan p.more{background:#fff; color:#003D5C; width:175px; height:11px; margin:10px 29px 10px; padding:0px; line-height:11px; } #bodyRightPan p.more a{display:block; width:44px; height:11px; background:#F3F3F3; color:#003D5C; text-decoration:none; margin:0 0 0 97px; font-size:11px; line-height:11px; text-align:center; text-transform:uppercase;} #bodyRightPan p.more a:hover{display:block; width:44px; height:11px; background:#E0DEDE; color:#003D5C; text-decoration:none;} /*----/BODY RIGHT PANEL----*/ /*----/BODY PANEL----*/ /*----FOOTER PANEL----*/ #footermainPan{ height:85px; background:url(images/footerbg.gif) 0 0 repeat-x #fff; color:#010101; clear:both; padding:72px 0 0; width: 778px; margin:0px auto; } #footerPan{width:683px; position:relative; margin:0 auto; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif} #footerPan ul{width:624px; position:relative; margin:0 auto;} #footerPan li{float:left; } #footerPan ul li a{padding:0 10px 0; color:#010101; background:#F3F3F3; text-decoration:none;} #footerPan ul li a:hover{text-decoration:underline;} #footerPan p.copyright{width:204px; background:#F3F3F3; color:#04496D; position:absolute; top:23px; left:40px; font-size:12px;} #footerPan ul.templateworld{width:291px; background:#F3F3F3; color:#444; display:block; position:absolute; top:40px; left:40px; font-size:10px;} #footerPan ul.templateworld li{height:20px;} #footerPan ul.templateworld li a{background:#F3F3F3; display:block; color:#444; text-decoration:none;} #footerPan ul.templateworld li a:hover{text-decoration:underline;} #footerPanhtml{width:79px; height:13px; display:block; position:absolute; top:26px; left:260px;} #footerPanhtml a{width:48px; height:11px; display:block; background:url(images/blue-arrow.gif) 85% 60% no-repeat #fff; color:#4F4F4F; border:1px solid #DEDEDE; line-height:11px; font-size:11px; font-weight:bold; text-decoration:none; padding:1px 0 0 10px;} #footerPanhtml a:hover{background:url(images/gray-arrow.gif) 85% 60% no-repeat #fff; color:#4F4F4F;} #footerPancss{width:50px; height:13px; display:block; position:absolute; top:26px; left:322px;} #footerPancss a{width:40px; height:11px; display:block; background:url(images/blue-arrow.gif) 35px 3px no-repeat #fff; color:#4F4F4F; border:1px solid #DEDEDE; line-height:11px; font-size:11px; font-weight:bold; text-decoration:none; padding:1px 0 0 10px; text-transform:uppercase;} #footerPancss a:hover{background:url(images/gray-arrow.gif) 35px 3px no-repeat #fff; color:#4F4F4F;} .heading { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #0000FF; } Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted July 6, 2007 Author Share Posted July 6, 2007 Okay. I got it to work. I used "text-align: center;" in the body and in the rest of the page blocks had text-align: left;. It works great in IE. But now the footer seems to be not centered. IE is really pissing me off! Here's the link: wwpknights.com. The new CSS: /* CSS Document */ body{ padding:0px; margin:0px auto; text-align: center; background-image: url(images/bg.png); background-repeat: repeat-y; color:#5E5E5E; font:13px/18px Arial, Helvetica, sans-serif; background-position: center; } .black { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; } div, p, ul, h2, h3, img{padding:0px; margin:0px;} ul{list-style-type:none;} /*----TOP PANEL----*/ #topPan{ width:778px; height:158px; position:relative; margin:0px auto; background:url(images/topPan-bg.gif) 0 0 repeat-x #15AEFD; color:#fff; padding:0px; background-color: #FFFFFF; } #topPan img.logo{width:451px; height:113px; position:absolute; top:8px; left:50px;} #topPan p{font-size:16px; padding:70px 0 0 43px;} #topPanlogin { position: absolute; left: 513px; top: 18px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; font-weight: bold; } #topContactPan p.callus{background:#0C71A4; color:#fff; width:64px; height:14px; line-height:14px; font-size:14px; font-weight:bold; text-transform:uppercase; padding:0px;} #topContactPan p.no{font-size:26px; padding:4px 0 0;} #topMenuPan{width:683px; height:16px; position:absolute; bottom:9px; left:48px;} #topMenuLeftPan{width:69px; height:16px; float:left; background:url(images/menu-leftbg.gif) 0 0 no-repeat;} #topMenuMiddlePan{width:544px; height:16px; float:left;} #topMenuMiddlePan ul{width:544px; height:16px;} #topMenuMiddlePan ul li{width:67px; height:16px; border-right:1px solid #E5E5E5; float:left;} #topMenuMiddlePan ul li a{width:67px; height:16px; display:block; background:#fff; color:#4A4A4A; font:10px/16px "Trebuchet MS",Arial, Helvetica, sans-serif; text-decoration:none; font-weight:bold; text-align:center; text-transform:uppercase;} #topMenuMiddlePan ul li a:hover{background:#fff; color:#0574AF; text-decoration:none;} #topMenuMiddlePan ul li.home{background:#fff; color:#0574AF; text-decoration:none; font:10px/16px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-transform:uppercase;} #topMenuMiddlePan ul li.contact{width:67px; border-right:1px solid #fff;} #topMenuMiddlePan ul li.contact a{width:67px; height:16px; display:block; background:#fff; color:#4A4A4A; font:10px/16px "Trebuchet MS",Arial, Helvetica, sans-serif; text-decoration:none; font-weight:bold; text-align:center; text-transform:uppercase;} #topMenuMiddlePan ul li.contact a:hover{background:#fff; color:#0574AF; text-decoration:none;} #topMenuRightPan{width:70px; height:16px; float:left; background:url(images/menu-rightbg.gif) 0 0 no-repeat;} /*----/TOP PANEL----*/ /*----BODY PANEL----*/ #bodyPan{ text-align: left; width:693px; position:relative; margin:0 auto; padding:25px 0 25px; background-color: #FFFFFF; } /*----BODY LEFT PANEL----*/ #bodyLeftPan{ width:430px; float:left; padding:12px 11px 10px 5px; background-color: #FFFFFF; } #bodyLeftPan h2{width:410px; height:30px; background:url(images/border1.gif) 100% 70% no-repeat #fff; color:#00111A; font:28px/28px Georgia, "Times New Roman", Times, serif;} #bodyLeftPan h2 span{background:#fff; color:#046598;} #bodyLeftPan h3{width:410px; height:30px; background:url(images/border2.gif) 100% 70% no-repeat #fff; color:#00111A; font:28px/28px Georgia, "Times New Roman", Times, serif;} #bodyLeftPan h3 span{background:#fff; color:#046598;} #bodyLeftPan p{padding:7px 0 0;} #bodyLeftPan p span{background:#fff; color:#046598; font-weight:bold;} #bodyLeftPan ul{width:410px; margin:10px 0 0;} #bodyLeftPan ul li{width:410px; height:20px;} #bodyLeftPan ul li a{width:390px; height:20px; background:url(images/button.gif) 0 6px no-repeat #fff; color:#1A1A1A; text-decoration:underline; padding:0 0 0 20px;} #bodyLeftPan ul li a:hover{width:390px; height:20px; background:url(images/button-hover.gif) 0 6px no-repeat #fff; color:#676363; text-decoration:underline;} #bodyLeftPan p.more{background:#F3F3F3; color:#003D5C; width:410px; height:11px; margin:25px 0; padding:0px; line-height:11px; font-size:11px; } #bodyLeftPan p.more a{display:block; width:44px; height:11px; background:#fff; color:#003D5C; text-decoration:none; margin:0 0 0 246px; line-height:11px; text-align:center; padding:0px; text-transform:uppercase;} #bodyLeftPan p.more a:hover{display:block; width:44px; height:11px; background:#E0DEDE; color:#003D5C; text-decoration:none;} #bodyLeftNextPan{width:410px; clear:both; padding:10px 0 0;} #bodyLeftPan p.next{background:#F3F3F3; color:#003D5C; width:410px; height:11px; padding:0px; line-height:11px; font-size:11px; clear:both; } #bodyLeftPan p.next a{display:block; width:44px; height:11px; background:#fff; color:#003D5C; text-decoration:none; margin:0 0 0 246px; line-height:11px; text-align:center; padding:0px; text-transform:uppercase;} #bodyLeftPan p.next a:hover{display:block; width:44px; height:11px; background:#E0DEDE; color:#003D5C; text-decoration:none;} #bookcatagories{width:410px; position:relative; margin:0 auto; padding:5px 0 0;} #namePan{width:156px; float:left; background:url(images/name-dot.gif) 100% 85% no-repeat #fff; color:#4F4F4F; font-size:14px; text-transform:uppercase;} #nameonePan{width:156px; float:left;} #nameonePan ul{width:156px;} #nameonePan ul li{width:140px; height:20px; background:url(images/arrow.gif) 0 6px no-repeat #fff; color:#03537D; padding:0 0 0 10px;} #pricePan{width:106px; float:left; background:url(images/price-dot.gif) 100% 85% no-repeat #fff; color:#4F4F4F; font-size:14px; text-transform:uppercase;} #priceonePan{width:143px; float:left;} #priceonePan ul{width:143px;} #priceonePan ul li{width:133px; height:20px; background:url(images/price-border.gif) 100% 50% no-repeat #fff; color:#00111A; line-height:20px; font-size:12px; font-weight:bold; padding:0 0 0 10px;} #discountPan{width:126px; float:left; background:url(images/discount-dot.gif) 100% 85% no-repeat #fff; color:#4F4F4F; font-size:14px; text-transform:uppercase; padding:0 0 0 12px;} #discountonePan{width:110px; float:left;} #discountonePan ul{width:110px;} #discountonePan ul li{width:100px; height:20px; background:url(images/dicount-border.gif) 100% 50% no-repeat #fff; color:#00111A; font-size:12px; font-weight:bold; padding:0 0 0 10px;} /*----/BODY LEFT PANEL----*/ /*----BODY RIGHT PANEL----*/ #bodyRightPan{width:245px; float:right; border:1px solid #DADADA; background:#F3F3F3; color:#1A1A1A; padding:0 0 47px;} #bodyRightPan h2{width:195px; height:35px; display:block; border:1px solid #DADADA; background:#fff; color:#00111A; font:24px/34px Georgia, "Times New Roman", Times, serif; margin:6px 8px 16px; padding:0 0 0 20px;} #bodyRightPan h2 span{background:#fff; color:#046598;} #bodyRightPan h3{width:195px; height:35px; display:block; border:1px solid #DADADA; background:#fff; color:#00111A; font:24px/34px Georgia, "Times New Roman", Times, serif; margin:6px 8px 0; padding:0 0 0 20px;} #bodyRightPan h3 span{background:#fff; color:#046598;} #bodyRightPan ul{width:180px; margin:0 0 17px 29px;} #bodyRightPan ul li{width:180px; height:18px;} #bodyRightPan ul li a{width:160px; height:18px; display:block; background:url(images/button.gif) 0 6px no-repeat #F3F3F3; color:#1A1A1A; text-decoration:none; padding:0 0 0 20px;} #bodyRightPan ul li a:hover{background:url(images/button-hover.gif) 0 6px no-repeat #F3F3F3; color:#797878; text-decoration:none;} #bodyRightPan p{padding:0px 29px 0px 29px;} #bodyRightPan p.boldtext{padding:10px 29px 0px; font-size:14px; background:#F3F3F3; color:#1A1A1A; font-weight:bold;} #bodyRightPan p.more{background:#fff; color:#003D5C; width:175px; height:11px; margin:10px 29px 10px; padding:0px; line-height:11px; } #bodyRightPan p.more a{display:block; width:44px; height:11px; background:#F3F3F3; color:#003D5C; text-decoration:none; margin:0 0 0 97px; font-size:11px; line-height:11px; text-align:center; text-transform:uppercase;} #bodyRightPan p.more a:hover{display:block; width:44px; height:11px; background:#E0DEDE; color:#003D5C; text-decoration:none;} /*----/BODY RIGHT PANEL----*/ /*----/BODY PANEL----*/ /*----FOOTER PANEL----*/ #footermainPan{ text-align: left; height:85px; background:url(images/footerbg.gif) 0 0 repeat-x #fff; color:#010101; clear:both; padding:72px 0 0; width: 778px; margin:0px auto; } #footerPan{width:683px; position:relative; margin:0 auto; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif} #footerPan ul{width:624px; position:relative; margin:0 auto;} #footerPan li{float:left; } #footerPan ul li a{padding:0 10px 0; color:#010101; background:#F3F3F3; text-decoration:none;} #footerPan ul li a:hover{text-decoration:underline;} #footerPan p.copyright{width:204px; background:#F3F3F3; color:#04496D; position:absolute; top:23px; left:40px; font-size:12px;} #footerPan ul.templateworld{width:291px; background:#F3F3F3; color:#444; display:block; position:absolute; top:40px; left:40px; font-size:10px;} #footerPan ul.templateworld li{height:20px;} #footerPan ul.templateworld li a{background:#F3F3F3; display:block; color:#444; text-decoration:none;} #footerPan ul.templateworld li a:hover{text-decoration:underline;} #footerPanhtml{width:79px; height:13px; display:block; position:absolute; top:26px; left:260px;} #footerPanhtml a{width:48px; height:11px; display:block; background:url(images/blue-arrow.gif) 85% 60% no-repeat #fff; color:#4F4F4F; border:1px solid #DEDEDE; line-height:11px; font-size:11px; font-weight:bold; text-decoration:none; padding:1px 0 0 10px;} #footerPanhtml a:hover{background:url(images/gray-arrow.gif) 85% 60% no-repeat #fff; color:#4F4F4F;} #footerPancss{width:50px; height:13px; display:block; position:absolute; top:26px; left:322px;} #footerPancss a{width:40px; height:11px; display:block; background:url(images/blue-arrow.gif) 35px 3px no-repeat #fff; color:#4F4F4F; border:1px solid #DEDEDE; line-height:11px; font-size:11px; font-weight:bold; text-decoration:none; padding:1px 0 0 10px; text-transform:uppercase;} #footerPancss a:hover{background:url(images/gray-arrow.gif) 35px 3px no-repeat #fff; color:#4F4F4F;} .heading { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #0000FF; } Quote Link to comment Share on other sites More sharing options...
soycharliente Posted July 7, 2007 Share Posted July 7, 2007 What exactly isn't aligning properly? The entire site? Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted July 7, 2007 Author Share Posted July 7, 2007 the footer. The navigation there is not properly aligned centered. While in FF its centered corrected. You can see it at wwpknights.com Of course, it doesn't look that bad, but it would be nice for it work properly. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted July 7, 2007 Author Share Posted July 7, 2007 here's a picture showing how it looks in IE. I'd like it to be centered. LINK: wwpknights.com/shot Thanks for your help in advance. Quote Link to comment Share on other sites More sharing options...
soycharliente Posted July 8, 2007 Share Posted July 8, 2007 toppan and footerpan are different widths. Try making them the same? Or just give footerpan a width of 100% so it will grow as wide as it's container. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.