michaellunsford Posted November 30, 2006 Share Posted November 30, 2006 I've made a simple page which reneders fine in everything except IE. I only have IE6 to test with, though, so who knows what the other versions are doing. Perhaps the intuitive folks at phpfreaks are at the cusp of creating an "IE Hacks" forum? Bring it on.Deleting the doctype (quirks mode) makes IE love the page. If I include a doctype (tested with html 4.1 trans, xhtml 1.0 trans, and xhtml 1.1) it just loses all control. Other than the doctype, everything else on the page is identical.basic code (without doctype):[code=php:0]<table style="height:100%; width:100%"><tr><td style="height:125px; width:100% background:url(image/header.jpg) repeat-x top; text-align:center;"><img src="images/logo.jpg" width="250" height="50" alt="" /></td></tr> <!-- /* creates a stretchable header with a logo centered, doctype in IE makes this like 500px high, even though we've said it's 125px */ --><tr><td style="width:100%; padding:1px;">page content</td></tr><!-- /* supposed to auto-stretch to height available, doctype in IE makes this as high as the content, and no bigger */ --><tr><td style="width:100%; height:25px; background:url(image/footer.jpg) repeat-x;"></td></tr><!-- /* same as first row. footer image which auto-stretches. IE makes this higher than the requested 25px when specifying a doctype */ --></table>[/code]I'm thinking about using PHP's $_SERVER['HTTP_USER_AGENT'] to determine if they're using IE, and if so, not publishing the doctype. Thoughts?curious to see it in action?http://new.realestatedela.com/index.php?dt=xhtml11http://new.realestatedela.com/index.php?dt=xhtml_transhttp://new.realestatedela.com/index.php?dt=html4_transhttp://new.realestatedela.com/index.php?dt=quirksAlso, I've checked to make sure line breaks are CR LF (windows format). Quote Link to comment Share on other sites More sharing options...
Daniel0 Posted November 30, 2006 Share Posted November 30, 2006 Try use divs instead.Table-less layouts often makes IE work. Quote Link to comment Share on other sites More sharing options...
michaellunsford Posted November 30, 2006 Author Share Posted November 30, 2006 I can't figure out how to do it with <div>. The challenge is the middle div. It needs to take up the whatever's left of the page height after the top's 117px and bottom's 25px are calculated in. It should push the bottom div to the bottom of the page if it's less than full, or beyond the bottom if it is past full.make sense? Quote Link to comment Share on other sites More sharing options...
Daniel0 Posted November 30, 2006 Share Posted November 30, 2006 Try this: [code]<?xml version="1.0" encoding="utf-8"?><!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" xml:lang="en-US" lang="en-US"><head><title>Sample layout</title><style type="text/css">#header { display: block; width: 100%; height: 150px; background:url(image/header.jpg) repeat-x top; text-align:center;}#content { display: block; padding: 1px; width: 100%;}#footer { display: block; width: 100%; height:25px; background:url(image/footer.jpg) repeat-x; position: absolute; bottom: 25px; left: 0px;}</style></head><body><div id="header"><img src="images/logo.jpg" width="250" height="50" alt="logo" /></div><div id="main">page content</div><div id="footer">footer</div></body></html>[/code] Quote Link to comment Share on other sites More sharing options...
michaellunsford Posted November 30, 2006 Author Share Posted November 30, 2006 hey, great. it works! And, more importantly, IE doesn't have a heart attack. ;D 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.