my fixed element not displaying right in IE

[halfasleeps]

I have this CSS:

#mystuff {
	outline:dashed;
	outline-width:medium;
	outline-color:#990000;
	display:table-cell;
	background-color:#FFFFCC;
	padding:5px;
	position:fixed;
	top:100px;
	left:400px;
	z-index:400px;
}
#mystuff tr{
	color:#990000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
}
#mystuff a{
	color:#990000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	display:table-cell;
	text-align:center;
}

which pertains to this:

<div id="mystuff">
<a href="https://www.kranichs.com/request_price.php?cid=87&cpage=">My Quote</a>
<table><tr>
<td><img src="https://www.kranichs.com/product_images/987_sm_PT554-DE_S.jpg" width="75" height="75" /></td>
<td><img src="https://www.kranichs.com/product_images/995_sm_PT564-DE_S.jpg" width="75" height="75" /></td>
<td><img src="https://www.kranichs.com/product_images/925_sm_8071_S.jpg" width="75" height="75" />
</td><td>More...</td>
</tr></table>
<div align="right">close</div>
</div>

in firefox id displays a dashed outline and is in a fixed position. in IE it is just in the body not in a fixed position and does not show the dashed outline either...

any help is appreciated.

Thanks.

[felgall]

Internet Exploder does not support position:fixed

The way to handle it is to use an IE conditional to specify position:absolute for IE and then use JScript (either in a separate script or within an expression in the CSS) to reposition the element by the scroll amount.

[htmlguy]

felgall is right, position:fixed is not supported in IE. Perhaps instead of using javascript, make the page using position: absolute;, it shouldn't take too much time.
Zack

[felgall]

The following CSS will fix the object with id="fixed" to the top of the screen in IE6. Simply use it to override the standard position:fixed. Add the offset distance if required. You can also do the same for left to fix it for horizontal scrolling.

For quirks mode replace documentElenent with body.

<!--[if lt IE 7]>
<style>
#fixed {
  position:absolute;
  top:expression(eval(document.documentElement.scrollTop));
}
</style>
<![endif]-->

[Paul O'B]

IE6 doesn't understand outline either so you will have to use a border instead.