FireFox IE CSS Fixed Position Overlapping DIVs

liunx

Guest
I have been trying all day to get this dumb image to stick at the bottom of the page, centered, and have content scroll behind it.

I had a so-so solution in IE, but it was jumpy and didn't work in FireFox. In FF, I got it to work beautifully without any jumping, but it does not work in IE. I appreciate any help! Thanks in advance!



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>My Document Name</title>

<style type="text/css" media="screen">
<!--
#seats { visibility: visible;
position: fixed;
top: 0px;
left: 0px;
height:100%;
width:100%;
z-index: 10;
margin: 0px;
padding: 0px;
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto;
top: 0;
position: relative;
}
-->
</style>
</head>

<body background: #808080 url('images/curtain.jpg') fixed bottom left;
text-align: center>

<DIV id="content">

<table width="700" height="100%" border="0" bordercolor="#00FFFF"
cellspacing="0" cellpadding="0" align="center" bgcolor="#FFFFFF">
<tr>
<td>
A big fat hairy table that I want to scroll behind the bottom image
</td>
</tr>
</table>

</body>
</html>

<DIV id="seats">

<table width="100%" height="100%" border="0" bordercolor="#FF00FF"
cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" height="100%"> </td>
</tr>
<tr>
<td height="150" valign="bottom" align="center">

<table width="700" height="100%" border="0" cellspacing="0"
cellpadding="0" align="center">
<tr>
<td align="center" valign="bottom">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/seats.gif" width="700"
height="112">
</td>
</tr>
<tr>
<td height="10" bgcolor="#000000"> </td>
</tr>
</table>

</td>
</tr>
</table>

</DIV><!--close seats-->
</DIV><!--close content-->

</body>
</html>Man my links are not showing up in FireFox now. I must have really scxrewed up somewhere.
 
Back
Top