DOCTYPE html PUBLIC DTD XHTML 1.0 Transitional

StackOverflow https://stackoverflow.com/questions/4149090

Question

In the master page of mine the above line exists

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

But why is it getting me problems?

In a content page i am embedding an SWF object

var flashvars = {xmlPath: "xml/" + GetQueryString("x") + ".xml" };
  var params = { allowFullScreen: "true", wmode: "transparent" };
  var attributes = {};
  swfobject.embedSWF("main.swf", "gallery", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

If i comment out the DOCTYPE "line" the SWF object fills the screen (As it should). If i DO NOT comment out the DOCTYPE "line" the SWF object fills only in horizontal direction.

So what is going on here? Could i have both DOCTYPE and the SWF object tiled in both vertical and horizontal direction?

UPDATE: And here is the CSS that is applied without success

<style type="text/css">
*{
margin:0;
padding:0;
}
html, body, #gallery { background: #EFEFEF; height:100%; }
body { margin:0; padding:0; overflow:hidden; }
</style>

ANOTHER UPDATE: In Chrome it works great, in Internet explorer the SWF fills 20% of the display and is placed at the top of the page and finally in Firefox, nothing is displayed.

Was it helpful?

Solution

In Standards Mode, if you want a statically-positioned element to be the same height as the viewport, it and all ancestors (potentially including body and html) have to have a CSS height: 100%. The 100% height is relative to the size of the parent, and if the parent doesn't have an explicit height, percentages are meaningless.

If you want an absolutely-positioned elements to be the same height as the viewport it's the same but with positioned containing blocks instead of every element. This case is usually easier as there may not be any containing blocks between the viewport and the element.

In Quirks mode (which is what you get when you remove the doctype), height: 100% often has a different effect, amongst many typically-less-helpful bugs.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top