Background attachment issues w/Firefox
Hey everyone.
Im trying to break into designing without tables, but I'm running into this problem. I want to make a background in a div fixed, but whenever I add
Code:
background-attachment:fixed;
The background changes position while viewing the page in Firefox. Everything seems to be working fine in IE (using ie6) which is real strange... ive never had things work perfectly in IE and have a problem with Firefox before.
Anyone have any ideas? Many thanks in advance!
Here is the source for the css
Code:
body {
margin:0px;
padding:0px;
height:100%;}
body, p, div, span {
font-family:verdana;
font-size:10pt;
color:#333346; }
A:link { font-weight:bold; text-decoration: underline; color: #333346 }
A:visited { font-weight:bold; text-decoration: underline; color: #333346 }
A:hover { font-weight:bold; text-decoration: underline; color: #4784c7 }
.main_box {
position:relative;
top: 50%;
left: 50%;
height:550px;
width:818px;
margin:-275px 0px 0px -409px; }
.top {
background-image:url('../img/bg_boxtop.png');
height:16px; }
.mid {
background-image:url('../img/bg_boxmid.png'); }
.bottom {
background-image:url('../img/bg_boxbottom.png');
height:23px; }
.header {
height:148px;
padding-left:10px; }
.content {
height:100%;
position:relative;
padding:10px 10px 0px 10px; }
.nav {
width:140px; }
.mca_home {
position:absolute;
top:10px;
left:150px;
width:649px;
height:353px;
padding:6px 0px 2px 10px;
overflow:auto;
background-image:url('../img/content_home_bg.png');
background-repeat:no-repeat; }
And here's the code for the page
Code:
<html><head>
<title></title>
<LINK REL="stylesheet" HREF="./inc/style_main2.inc.css" TYPE="text/css">
</head><body>
<div class="main_box">
<!-- START HEADER -->
<div class="top"></div>
<div class="mid" style="height:148">
<div class="header" align="center">HEADER<br><br>BACKGROUND FIXED</div>
</div>
<!-- END HEADER / START NAVIGATION -->
<div class="mid" style="height:363">
<div class="content">
<div class="nav">
<div class="nav"><img src="img/nav_homea.png" name="home" height="28" width="140" border="0"></a></div>
<div class="nav"><img src="img/nav_ar2.png" name="ar2" height="28" width="140" border="0"></a></div>
<div class="nav"><img src="img/nav_ar3.png" name="ar3" height="28" width="140" border="0"></a></div>
<div class="nav"><img src="img/nav_ar4.png" name="ar4" height="28" width="140" border="0"></a></div>
</div>
<div class="mca_home" style="background-attachment:fixed;">CONTENT AREA<BR><BR>SOME COOL WORDS...WORDS CAN BE FUN!</div>
</div>
</div>
<!-- END MAIN CONTENT AREA / START FOOTER -->
<div class="bottom"></div>
<!-- END FOOTER -->
</div>
</body></html>
You can check it out live with the background fixed here to see what I'm talking about.
YOU MUST USE FIREFOX TO SEE WHAT IM TALKING ABOUT, EVERYTHING WILL LOOK FINE IF YOU ARE USING IE