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; } Link to comment https://forums.phpfreaks.com/topic/56806-solved-five-different-programs-three-different-renders/ 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. Link to comment https://forums.phpfreaks.com/topic/56806-solved-five-different-programs-three-different-renders/#findComment-280958 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.