January 2, 201115 yr Hello, I apologize if a solution to this problem has already been provided, but I'm intensly agrivated by IE's not following standards. I have a site in which I declare height in percentages of two divs within the body wrapper: <style type="text/css"> body {margin: 0; padding: 0;} #bodywrapper {width: 100%; margin: 0 auto; padding: 0;} #titlewrapper {width: 100%; background-color: blue; height: 25%;} #contentwrapper {width: 75%; margin: 0 auto; padding: 0; background-color: red; height: 75.4%; -moz-border-radius: 20px; border-radius: 20px;} #leftsidebar {width: 12.4%; height: 75%; float: left; border: 1px solid black; -moz-border-radius: 15px; border-radius: 15px;} #rightsidebar {width: 12.4%; height: 75%; float: right; border: 1px solid black;-moz-border-radius: 15px; border-radius: 15px;} #vline {position: relative; top: 15%; left: 50%; background-color: black; width: 1px; height: 75%;} #rightcontent {width: 45%; height: 90%; border: 1px solid black; -moz-border-radius: 20px; border-radius: 20px; float: right; position: relative; top: 5%;} #leftcontent {width: 45%; height:90%; border: 1px solid black; position: relative; top: 5%; -moz-border-radius: 20px; border-radius: 20px; float: left;} </style> </head> <body> <div id="bodywrapper"> <div id="titlewrapper"> </div> <div id="contentwrapper"><div id="leftcontent"></div> <div id="rightcontent"></div><div id="vline"> </div> </div> </div> and the margin's all messed up (in internet explorer), but the page looks fine in firefox and chrome. Could anyone recommend a site where they describe an official method to fix compatibility issues with IE? Thank you! Edited January 2, 201115 yr by Danotto
January 2, 201115 yr height as a % is very unreliable and I would advise against using it. Use fixed heights or don't state a height at all and let divs find their own height. Note that you have styles for #leftsidebar and #rightsidebar but haven't used them. So you have titlewrapper height: 25% #contentwrapper height: 75.4%; (why 75.4%?) Total height 100.4% #leftsidebar and #rightsidebar height: 75% (unused) #leftcontent and #rightcontent height: 90% plus top: 5% This code does seem to produce what you want in IE7 and Firefox:- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <style type="text/css"> html, body { height: 100%; } body {margin: 0; padding: 0;} #bodywrapper {width: 100%; margin: 0 auto; padding: 0; height: 100%;} #titlewrapper {width: 100%; background-color: blue; height: 25%;} #contentwrapper {width: 75%; margin: 0 auto; padding: 0; background-color: red; height: 75%; -moz-border-radius: 20px; border-radius: 20px;} #leftsidebar {width: 12.4%; height: 75%; float: left; border: 1px solid black; -moz-border-radius: 15px; border-radius: 15px;} #rightsidebar {width: 12.4%; height: 75%; float: right; border: 1px solid black;-moz-border-radius: 15px; border-radius: 15px;} #vline {position: relative; top: 15%; background-color: black; width: 1px; height: 75%; margin: 0 auto;} #rightcontent {width: 45%; height: 90%; border: 1px solid black; -moz-border-radius: 20px; border-radius: 20px; float: right; position: relative; top: 5%;} #leftcontent {width: 45%; height:90%; border: 1px solid black; position: relative; top: 5%; -moz-border-radius: 20px; border-radius: 20px; float: left;} </style> </head> <body> <div id="bodywrapper"> <div id="titlewrapper">titlewrapper</div> <div id="contentwrapper"> <div id="leftcontent">leftcontent</div> <div id="rightcontent">rightcontent</div> <div id="vline"></div> </div> </div> </body> </html> Edited January 2, 201115 yr by Wickham
Create an account or sign in to comment