magilla loves you

Full Browser SWF in Internet Explorer

Posted in HTML / CSS by shanDB on July 22, 2008

An easy one to kick this blog off, but something I can never remember when I need it..

So I’ve been working on a website in Flash that needs to automatically resize, or stretch itself to the browser window (More on how to do that in another post). Works perfectly in Safari, Firefox, and Opera – But of course breaks in IE (No surprise there, huh).

I seem to be getting this unwanted strip of blank space on the right of the screen, and also IE keeps displaying the vertical scrollbar, even though I have used overflow:hidden on both the X and Y axis in my CSS.

So here is the soution:

My SWF is contained in a DIV with the following CSS element to disable the vertical and horizontal scrollbars:

#div {
visibility: visible;
position: absolute;
top:0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 1;
display: block;
border: 0;
overflow-x:hidden;
overflow-y:hidden;
}

Now this works fine for all browsers except IE, in which you need to add the following..

In the body tag set the margins to 0. This gets rid of the unwanted white strip down the side.

<body topmargin=”0″ leftmargin=”0″>

and in my css I type the following to get rid of the dead scrollbar in IE:

body {overflow: auto;}

Leave a Reply