Shadow Posted May 2, 2010 Share Posted May 2, 2010 So, after over a day of trying to fix this on my own and failing horribly I need some help... I've only been doing CSS for a short time so keep that in mind when explaining the solution please.The problem is that in IE7 the header, path, borders 1, 2, 3, 4, and 7 remain aligned to the center of the page while everything in the wrapper elemental decides to move its self off to the right a fair bit and I can't figure out how to get it to all stay connected in IE7 but other then the 'decapitation' it shows everything displayed correctly . It works perfectly fine in IE8 and Firefox. The reason for the auto height settings and the min height settings is that its part of a large site I'm building and some pages will have a fair bit of content and I need to pages to extend to take it all and I want them all to be a minimum size so it seems consistent appearance wise (other then the pages with a lot of content of course). In the wrapper there is a 5px space on the left and right sides and a 5px space on each side of the #maincontent container and that is supposed to be there due to a seamless repeating background image that will go there for when the pages auto-size their height.HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head></head><title></title><body class="indexcsslayout"><div id="container"><div id="header"><!-- end #header --></div><div id="path"><!-- end #path --></div><div id="wrapper1"><div id="cssmenu"><!-- end #cssmenu --></div><div id="contributingartiistsadspace1"><!-- end #artistsadspace1 --></div><div id="border8"><!-- end #border8 --></div><div id="adsspace1"><!-- end #adsspace1 --></div><div id="maincontent"><!-- end #maincontent --></div><div id="border5"><!-- end #border5 --></div><div id="footer"><!-- end #footer --></div><div id="border6"><!-- end #border6 --></div><!-- end #wrapper1 --></div><div id="border1"><!-- end #border1 --></div><div id="border2"><!-- end #border2 --></div><div id="border3"><!-- end #border3 --></div><div id="border4"><!-- end #border4 --></div><div id="border7"><!-- end #border7 --></div><!-- end #container --></div></body></html> CSS @charset "utf-8";/* CSS Document */body { font:100% Verdana, Arial, Helvetica, sans-serif; background-color:#000; margin:0; padding:0; font-size:12px; text-align:center; color:#000000;}.indexcsslayout #container { position:relative; top:10px; width:950px; max-height:auto; min-height::960px; margin: 0 auto; text-aling:left;}.indexcsslayout #header { position:relative; top:5px; left:5px; height:100px; width:940px; background-color:#F00;}.indexcsslayout #header h1 { margin: 0;}.indexcsslayout #path { position:absolute; top:110px; left:5px; height:15px; width:930px; padding-left:10px; text-align:left; background-color:#90F;}.indexcsslayout #cssmenu { position:absolute; top:0px; left:5px; width:160px; max-height:auto; min-height:800px; background-color:#00F;}.indexcsslayout #contributingartiistsadspace1 { position:absolute; top:0px; right:5px; height:195px; width:160px; background-color:#FF0;}.indexcsslayout #adsspace1 { position:absolute; top:200px; right:5px; height:600px; width:160px; background-color:#F9F;}.indexcsslayout #maincontent { position:relitive; top:0px; left:0px; width: 590px; max-height:auto; min-height:770px; margin-top:0px; margin-left:170px; margin-right:170px; padding-top:15px; padding-left:10px; padding-right:10px; padding-bottom:15px; color: #000; text-align:left; background-color:#600;}.indexcsslayout #footer { position:relative; bottom:10px; left:5px; width:940px; height:20px; background-color:#FC0;}.indexcsslayout #footer p { margin:0; padding:0px; }.indexcsslayout #wrapper1 { position:absolute; top:130px; margin-left:0px; height:auto; width:950px;}.indexcsslayout #border1 { position:absolute; top:0px; left:0px; height:5px; width:950px; background-color:#0F0;}.indexcsslayout #border2 { position:absolute; top:105px; left:5px; height:5px; width:940px; background-color:#0F0;}.indexcsslayout #border3 { position:absolute; top:5px; left:0px; height:125px; width:5px; background-color:#0F0;}.indexcsslayout #border4 { position:absolute; top:5px; right:0px; height:125px; width:5px; background-color:#0F0;}.indexcsslayout #border5 { position:relitive; height:5px; width:940px; margin-bottom:10px; margin-left:5px; background-color:#0F0;}.indexcsslayout #border6 { position:relitive; height:5px; width:940px; margin-top:-10px; margin-left:5px; background-color:#0F0;}.indexcsslayout #border7 { position:absolute; top:125px; left:5px; height:5px; width:940px; background-color:#0F0;}.indexcsslayout #border8 { position:absolute; top:195px; right:5px; height:5px; width:160px; background-color:#0F0;}.flirt { float:right; margin-left:8px;}.flirt { float:left; margin-right:8px;} Link to comment Share on other sites More sharing options...
dsonesuk Posted May 2, 2010 Share Posted May 2, 2010 once you fix spelling mistakes 'aling' - 'align'. 'relitive' - 'relative' will find it works fine.min-height:auto; is not valid, height: auto; yes! Link to comment Share on other sites More sharing options...
Shadow Posted May 2, 2010 Author Share Posted May 2, 2010 Thanks for the help, it works fine now.All that trying to figure out what was wrong and it was a spelling mistake I never noticed, now I feel quite foolish Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.