michaellunsford Posted June 23, 2007 Share Posted June 23, 2007 Okay, so I write to standards -- why don't all browsers render to them? This is a rerun of an earlier unsolved problem. I really need some help to figure this one out. So far, the only thing i can think to do is the old <div> thing -- but I'd lose the 100% height. Thanks for any suggestions http://cawthornegroup.com xhtml 1.1 http://cawthornegroup.com/index2.html quirks IE 6 & 7 -- evenly distributes the height of all table rows regardless of the height I explicitly specify (in both quirks and xhtml). FF & Camino -- properly distributes the table rows, but the 100% height on a div in the middle row is one line high. quirks renders 100% fine. Safari & Opera -- properly renders everything, xhtml or quirks. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Stonehaven on the River</title> <link href="elements/style.css" rel="stylesheet" type="text/css" /> </head> <body> <table id="maintable" cellpadding="0" cellspacing="0"> <tr> <td id="header"> asdf</td> </tr> <tr> <td><div id="main_content"> </div></td> </tr> <tr> <td id="footer"> </td> </tr> </table> </body> </html> @charset "UTF-8"; /* CSS Document */ html, body { width:100%; height:100%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:0; background:#978c50; } #maintable { height:100%; width:800px; margin:auto; background:url(/images/middle_bgdk.jpg) no-repeat center center #ccdca0; } #header { height:140px; width:800px; background:url(/images/top.jpg) no-repeat #9a8954; text-align:center; vertical-align:bottom; color:#FFF; } #main_content { width:692px; height:100%; margin:auto; border-left: 3px solid #edebe9; border-right: 3px solid #edebe9; border-top:none; border-bottom:none; background: url(/images/middle_bg.jpg) center center no-repeat #edf4d2; } #footer { height:108px; width:800px; background:url(/images/bottom.jpg) no-repeat #003d2b; } Quote Link to comment Share on other sites More sharing options...
michaellunsford Posted June 23, 2007 Author Share Posted June 23, 2007 well, I found a not-quite-fixed solution. If I add a height attribute to the middle row, IE snaps into line and Firefox's inner div takes up the whole space without complaint. The only issue I have now is IE considers a height of 100% to be the entire page (instead of just 100% of what's left after the header and footer). So 80% gets it close enough to call good enough. 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.