To make it work for ie5 or ie6 quirks, just un-nest the frame div from the content div. Now ie6 can use any doctype or none -- it should work standards or quirks mode. This page starts with:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The xml declaration is kind of pointless,
since the page is being served as text/(x)html and the character set is
being sent as a header and declared in the meta tags, but starting with
the xml declaration puts ie6 into "backwards compatibility" or
"quirks" mode. I'm sure the code will explode in a lot of older
browsers, so it's probably best to hide it from them with an @import
command or with media="all". Also there are some
apparently unfixable problems in ie mac. Ie5 mac understands fixed positioning
but it's implementation is buggy
and it also has troubles with positioning elements to the right.
Here's the css for this page:
html, body, #content {margin: 0; padding: 0; height: 100%; width: 100%;
}
/* hidden from non ie win browsers by the * html selector and this: \*/
* html body, * html {overflow: hidden; }
* html #content {overflow: auto; }
* html #frame {position: absolute; right: 16px; }
/* 16px makes room for the scroll bar, ie mac starts reading again at the end
of this comment */
/* ie won't use the fixed or right properties because the above has precedence
*/
#frame {position: fixed; right: 0; top: 0; height: 100%; width: 20%;}
/* just to make it pretty */
#frame {background: #bed; color: #347; }
p {padding: .5em; }
a {color: #f00; }
/* watch out for overlap with scrolling elements */
#content p {margin-right: 25%; }
Nothing stretches a page with class like fake latin:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum auctor aliquam sapien. Vivamus wisi. Integer eget tellus ac felis cursus ultricies. Suspendisse hendrerit leo non est. Nullam tortor. Aliquam erat volutpat. Donec quam. Pellentesque nec leo in odio volutpat rhoncus. In hac habitasse platea dictumst. Nullam pulvinar aliquet magna. Etiam odio. Sed eros. Etiam ultricies, nunc a mollis dictum, purus nisl gravida turpis, et bibendum diam felis non tellus. Morbi justo wisi, ullamcorper pellentesque, feugiat nec, mattis ut, justo.
Quisque laoreet est ut mi. Vivamus pharetra. Etiam enim est, ornare placerat, ultrices a, vestibulum quis, magna. Nam nec sem ut nunc convallis scelerisque. Aenean interdum augue quis mauris. Integer ipsum velit, venenatis non, varius vitae, nonummy id, tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin sed tellus eget libero ultrices auctor. Donec nec arcu ut quam consequat porta. Donec nec massa. Aliquam eu ligula at risus eleifend bibendum. Duis fringilla mi imperdiet justo. Praesent hendrerit mi et orci. Donec cursus ipsum eu magna. Sed mi tortor, venenatis eu, semper eu, lobortis at, turpis. Suspendisse potenti.
Donec eget nunc. Etiam aliquam, nulla in placerat suscipit, arcu nibh varius quam, vitae lobortis massa justo sed leo. Suspendisse pretium. Phasellus lorem purus, dapibus at, blandit a, luctus id, dui. Vestibulum sollicitudin orci sit amet velit. Etiam consequat tristique nunc. Suspendisse tempor quam vel pede. Curabitur wisi dolor, nonummy quis, condimentum id, elementum nec, ligula. Duis nonummy sodales dolor. Fusce tortor. Vivamus arcu. Suspendisse quis sem eu purus bibendum vehicula. In et libero. Vivamus vestibulum bibendum ante. Cras volutpat. Fusce convallis fringilla elit. Proin sem. Sed felis. Sed felis tortor, iaculis quis, placerat sed, gravida sed, sem.