CSS Forum

**DrSeuss** · 09-04-2007, 02:34 PM

On this page when you click on "The concept of High-Density Mobile Storage" it pops up a small window that displays a flash animation showing the concept. This works fine in all IEs, but in FF the flash object seems to be displaying lower in the window, and the words on the bottom are getting cut off?? I have a separate css file for this pop up window:

Code:

body {
    background: #FFFFFF;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #0000000;
    margin: 0px 0px;
    padding: 0px 0px;
}
#concept {
    position: absolute;
    margin: 0px 0px;
    padding: 0px 0px;
    height: 305px;
    width: 355px;
}

And here is the html of the popup:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>High-Density Mobile Storage Concept</title>
<link href="concept.css" rel="stylesheet" type="text/css" media="all" />
</head>

<body>
<div id="concept">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
width="355" height="305">
    <param name="movie" value="concept2-ani.swf" />
    <param name="quality" value="Best" />
    <param name="wmode" value="transparent" />
    <param name="bgcolor" value="#ffffff" />
    <embed src="concept2-ani.swf"
width="355" 
height="374" quality="Best" wmode="opaque" bgcolor="#ffffff" 
type="application/x-shockwave-flash" 
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"> </embed>
  </object>
</div>
<br/>
  
</body>
</html>

Any idea what night be causint this, and how to fix it??

Thanks for your help

**LadynRed** · 09-04-2007, 03:10 PM

If you're going to use position:absolute than you have to use the top property to position the box where you want it.

**DrSeuss** · 09-04-2007, 03:16 PM

Thanks, I have added

top: 0px;
left: 0px;

to the #concept div, but it did not solve it...

**LadynRed** · 09-04-2007, 03:25 PM

Try making your window height about 40px higher, you have to allow for the window's title and status bar.

Or, you could give it a top: -30px and see if that'll work.

**DrSeuss** · 09-04-2007, 05:08 PM

Well setting top to -30px worked in FF, but then it is also pushed up in IE... so I just added a separate style sheet for IE with top: 0px and it works!

Thanks!