fixed background problem [Archive]

caymaniac

01-17-2008, 07:11 PM

Hi there

I have a site that works well in mozilla based browsers but not.

I have a sort of div iframe with a fixed background and auto content scrollers ... which don't seem to even come close to happening in IE ..

http://www.nautilus.ky/main.php
css file
body{
background: url(images/bg_grad.png) repeat-x;
text-align: center;
font-family: verdana;
font-size: small;
}
#splash{
background: url(images/home.jpg) no-repeat;
width: 750px;
height: 450px;
margin: 53px auto 0 auto;
position: relative;
text-align: left;
}
#splash #arrow{
position: absolute;
height: 43px;
width: 155px;
top: 330px;
right: 38px;
}
#splash #text{
background: url(images/textbox_splash.png) no-repeat;
position: absolute;
height: 106px;
width: 311px;
top: 110px;
font-weight: bold;
left: 48px;
color: #fff;
}

#splash #text p.man{
padding: 17px 11px 8px 11px;
margin:0;
font-size: 110%;
color: #FFFFCC;
}
#splash #text p.luxury{
padding: 0px 15px;
line-height: 1.5em;
margin:0;
font-size: 90%;
}
#splash #nav{
position: absolute;
top: -33px;
left: 400px;

}
/*
Theme Name: Barra Style
Theme URI: http://visiblebits.com
Description: Stylesheet for Barra
Version: 1.0
Author: Jon Buda of VisibleBits
Author URI: http://www.visiblebits.com/
*/

a img{
border:0;
padding:0;
}
a{
color: #f3e29a;
}
a:hover{
color: #fff;
text-decoration: none;
}
h2,h1{
color: #f3e29a;
font-size: 120%;
}
h1{
position: absolute;
top: 34px;
_top: 45px;
left: 200px;
width: 200px;
}
#main{
background: url(images/home.jpg) no-repeat;
width: 750px;
height: 450px;
margin: 53px auto 0 auto;
position: relative;
text-align: left;
}
#main #nav{
position: absolute;
top: -33px;
left: 400px;

}
#main #text{
background: url(images/textbox_main.png) no-repeat;
position: absolute;
height: 300px;
width: 670px;
margin: 5px 5px 5px 5px;
font-weight: bold;
left: 48px;
color: #fff;
overflow: auto;
top: 110px;
padding: 0px 10px 0px 10px;
}

#main #text p.header{
padding: 17px 11px 8px 11px;
margin:0;
font-size: 110%;
color: #FFFFCC;
}
#splash #text p.content{
padding: 0px 15px;
line-height: 1.5em;
margin:0;
font-size: 90%;
}
/*- Menu Tabs F--------------------------- */

#tabsF {
float:right;
width:100%;
font-size:93%;
line-height:normal;
border-bottom:0px solid #666;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("images/tableftF.gif") no-repeat left top;
margin:0;
padding:0 5px 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url("images/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}
.photoleft {
text-align:center;
float:left;
padding:4px 4px 4px 4px;
margin-right: 5px;
margin-bottom: 5px;
border: 1px solid #000;
background-color:#FFFFFF;
}
.photoright {
text-align:center;
float:right;
padding:4px 4px 4px 4px;
margin-left: 5px;
margin-bottom: 5px;
border: 1px solid #000;
background-color:#FFFFFF;
}
#main #text p.toursh{
padding: 17px 11px 8px 11px;
margin:0;
font-size: 150%;
color:#990066;
text-indent: 80px;
}
#main #text p.tourslist{
padding: 0px 15px;
line-height: 1.5em;
margin:0;
font-size: 90%;
color:#FFFFCC;
}
#main #text p.toursdetails{
padding: 0px 15px 10px 0px;
line-height: 1.2em;
margin:0;
font-size: 80%;
text-indent: 20px;
}
html file
<!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>Nautilus Cayman Luxury Tours</title>
<link href="nauti2008.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="main">
<div id="nav">
<div id="tabsF">
<ul>
<li><a href="main.php" title="Nautilus Home"><span>Home</span></a></li>
<li><a href="tours.php" title="Nautilus Tours"><span>Tours</span></a></li>
<li><a href="form/contact.php" title="Contact Nautilus"><span>Contact</span></a></li>
</ul>
</div></div>
<div id="text">
<br />
<p>If you would like to contact us to book a trip or find out any more information please feel free to email us at info@nautilus.ky or use the convenient form below.



</p>
<form enctype="multipart/form-data" method="post" action="http://www.freedback.com/mail.php" accept-charset="UTF-8">
<div>
<input type="hidden" name="acctid" id="acctid" value="8gqxq8xc37lg7iox" />
<input type="hidden" name="formid" id="formid" value="342601" />
<input type="hidden" name="required_vars" id="required_vars" value="name,email,field-4eab9a7a94cc7be" />
</div>
<table cellspacing="5" cellpadding="5" border="0">
<tr>
<td valign="top">
<strong>Name:</strong>
</td>
<td valign="top">
<input type="text" name="name" id="name" size="40" value="" />

</td>
</tr>
<tr>
<td valign="top">
<strong>Email Address:</strong>
</td>
<td valign="top">
<input type="text" name="email" id="email" size="40" value="" />

</td>
</tr>
<tr>
<td valign="top">
<strong>What would you like to know ?</strong>
</td>
<td valign="top">
<textarea name="field-4eab9a7a94cc7be" id="field-4eab9a7a94cc7be" rows="6" cols="40"></textarea>

</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value=" Submit Form " />
</td>
</tr>
</table>
</form>
</b></font></center>


alternatively if you would like to hear a friendly voice please call us at +1 (345) 945 1355

</div>
</div>
</body>
</html>

any help would be loved !

Giles