Background attachment issues w/Firefox

eruckus · #1 Jun 20, 2008, 07:34 PM

Hey everyone.

Im trying to break into designing without tables, but im 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 heres 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 im talking about.
YOU MUST USE FIREFOX TO SEE WHAT IM TALKING ABOUT, EVERYTHING WILL LOOK FINE IF YOU ARE USING IE

crigby · Sep 11, 2008, 04:47 PM

Hi,
If I may ask, why are you declaring it inline and externally. That will give mixed results. Seems you are leaving a lot of style in the document and not in the stylesheet. By that I meen that you declare some in both places and some only where you are used to the syntax. I realize that CSS and HTML have greatly different ones. It might be instructive to play with one or both of the good free template sites, one has some bad Zip files.

Download Our CSS Templates For Free - Free CSS Templates for your website design

Free CSS templates - Download Free CSS Templates

and see what others have to offer in the way of ideas. BTW, you do not need to define your anchors(links) with the underline style as browsers will unless told not to in their preferences and no declaration will change that. (I like to use none to remove it with hover and to change the background color to the link!)
Peace,
crigby