Anonymous 0

In Firefox on a Mac, my website displays correctly; white header and footer span 100% width of browser window. Middle black area is flash and displays artwork.

But in IE7, and most browsers on a PC, only the middle flash area displays. The white header and footer divs do not display, making it impossible to see the navigation and contact info.

The code I'm using to create those two divs is this:

the header:

(flash navigation here)

the footer:

(flash contact info here)

My doctype code is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

1 answer

Doug 1095
3
points

Your site has three sections:

<div> (position:absolute; top:0;)
<div> (position:absolute; bottom:0;)
<object> (width:100%; height:100%)

Since the first two divs are absolutely positioned, they are taken out of the flow. Only the flash object at the bottom (artdirection.swf) is still in the flow and with height and width set to 100%, it covers the whole site. The first two divs are still there, just underneath and hidden from view.

Edit: Of course, you would expect the z-index to bring the top and bottom div above the middle flash object, but this requires an additional parameter on the flash object. Put this inside the object:

<param name="wmode" value="transparent" />

and it should work fine.

Answered over 6 years ago by Doug