HTML and CSS for Curl applets embedded in object elements

[lcurlr]

Over at developers.curl.com I have a blog post on an IE8 quirk which I hit while standardizing the html at my aule-browser.com website.

When I moved the height and width parameters from the object tag and into a CSS style for objects, the size of my embedded applet immediately collapsed to the upper-left corner in IE8.

It took some effort to discover that the order of the parameters was upsetting IE: in a moment of desperation I flipped width and height et voilà a full page applet.

Only now IE was throwing up an unnecessary vertical scrollbar to the right. Hmmm. I was finally reduced to setting the width at 100% (did not cause horizontal scrollbar) and the height to 99% - BUT with the height first and THEN the width:

<style type="text/css" media="screen">
html{margin:0;height:100%}
body {
margin:0;
padding:0;
height:100%;
background-color:#FFFFEE;
}
object {
height:99%;
width:100%;
}
</style>

The problem only arises if my HTML pages have a DOCTYPE set - but that was part of my standardization effort ( I am using the Curl web-content language from curl.com to markup texts in poetry, literature and philosophy and to add annotations, notes, glosses, scholia and other critical apparatus.)

[drhowarddrfine]

The doctype is the set of rules you are telling the browser you are following when you created the page. Change the doctype, you changed the rules and, hence, the page changes. IE, specifically, will never attempt to perform like all the other far more modern browsers without a doctype.

The doctype is required on all modern web pages.

[lcurlr]

Since I won't go without DOCTYPE even on pages only used to embed an <object> I have had to find an answer for IE8 - and that has been to set the style for HTML to include
html{overflow: auto;
and to set the style for body with
body {
scroll="no";
overflow: hidden;
border-bottom-style:none; outline-width:0;
height:100%;

That meets my needs of a 100% <object> height without a bogus right-side vertical scrollbar.

Of course in testing on linux Ubuntu Firefox I found that I cannot tell a <div> to float right above an <hr> which already has a <span> aligned above it left - which is fine on any other browser I had tested (Win IE8, win and linux Chrome, Opera, linux Epiphany) ... and makes a nice top line on my pages ... so a cross-browser life goes ...