...

View Full Version : scrolling background image in FF



prophetofjah
08-03-2007, 08:23 PM
Howdy,
I am running into an issue with a scrolling background image I have in a div (id=#rightcontent) with overflow set to scroll. It works great in IE6 and IE7 (it scrolls with text)... but the background image remains "fixed" in FF.

I want the background image to scroll with the text in FF like it does in IE6 and IE7.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Dr Joseph Stan - Aesthetic &amp; Implant Dentistry of Beverly Hills</title>
<link href="site.css" rel="stylesheet" type="text/css">
</head>

<body id="drshapirob">
<div id="main">
<!--#include file="include/nav_doctors.html" -->
<div id="container">
<div id="leftimage">
<img src="images/drshapiro.jpg" alt="Dr. Shapiro" width="250" height="330"></div>
<!-- end of leftimage -->
<div id="rightcontent" style="background-image:url(images/drshapiro.gif); background-repeat:no-repeat; background-attachment:scroll;" >

<p>&nbsp;</p>
<p>&nbsp;</p>


<p>Dr. Shapiro graduated from Monmouth University with a bachelor of science (B.S.) degree prior to attending dental school at the University of Medicine and Dentistry of New Jersey where he earned his doctorate of medical dentistry (D.M.D.) in 1992.</p>
<p>Following dental school, Dr. Shapiro worked for general group practices and performed outpatient dentistry for a variety of nursing homes and critical-care facilities.</p>
<p>Dr. Shapiro opened his own practice in 1993 in his hometown of Ocean, New Jersey where he provided comprehensive family and cosmetic dentistry for twelve years before relocating to sunny California in 2005.</p>
<p>Dr. Shapiro continues to further his education by constant attendance of seminars, lectures and continual studying of various dental journals and abstracts.</p>
<p><strong>Doctor of Medical Dentistry</strong><br>New Jersey Dental School,<br>University of Medicine &amp; Dentistry of New Jersey - Newark, NJ (1992) </p>
</div>
<!-- end of rightcontent -->

</div> <!-- end of container -->

</div> <!-- end of main -->


<div id="footer">
Aesthetic and Implant Dentistry of Beverly Hills - 310.652.2400<img src="images/copywrite.gif" alt="copywrite" width="14" height="14" border="0" title="Copyright 2006, Aesthetic and Implant Dentistry of Beverly Hills, all rights reserved"><a href="mailto:info@unforgettablesmile.com"><img src="images/email.gif" alt="Email Us" width="17" height="13" border="0" title="Email Us"></a> </div>
<!-- end of footer -->

</body>
</html>


CSS:

/* CSS Document */
html {
height: 100%;
}

body {
height:100%;
background-color:#DDDDDD;
margin: 0px;
padding: 0px;
position: relative;


}
#main {
bottom: 30px;
background-image: url(images/backgroundlayout.gif);
background-repeat: no-repeat;
height: 100%;
background-position: -60px -150px;
position: relative;
background-color: #5bb1e2;
}

#footer {
position: absolute;
bottom: 0px;
height: 30px;
color: #666666;
line-height: 30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 0.7em;
letter-spacing: 0.05em;
padding-left: 1em;
}

#footer img {
margin-left:10px;
vertical-align: middle;


}

#footer img:hover {
cursor:pointer;
}
#container {
height: 329px;
width: 548px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-left-color: #CCCCCC;
border-right-color: #f2f2f2;
border-bottom-color: #f2f2f2;
position: relative;
top: 81px;
left: 402px;

}

a.linkopacity:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}

#nav, #nav2 {
position: absolute;
height: 250px;
width: 240px;
left: 140px;
top: 80px;
}
#nav ul {
font-family: "Times New Roman", Times, serif;
color: #333333;
font-size: 11px;
list-style-type: none;
text-align: right;
line-height: 18px;
margin-left: 0px;
padding-left: 0px;
font-weight: normal;
}

#nav2 ul {
font-family: "Times New Roman", Times, serif;
color: #333333;
font-size: 11px;
list-style-type: none;
text-align: right;
line-height: 14px;
margin-left: 0px;
padding-left: 0px;
font-weight: normal;
}

#nav ul a:link, #nav ul a:active, #nav ul a:visited, #nav2 ul a:link, #nav2 ul a:active, #nav2 ul a:visited {
color:#333333;
text-decoration:none;

}

#nav ul a:hover, #nav2 ul a:hover {
color:#333333;
text-decoration:none;
/*padding-right:13px;*/
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #ffffff; /*background-image:url(images/navarrow.gif);
background-repeat: no-repeat;
background-position: right 60%;*/
}

/*#nav ul a:link, #nav ul a:active, #nav ul a:visited {
color:#000000;
text-decoration:none;

}

#nav ul a:hover {
color:#000000;
text-decoration:none;

}*/

#mainmenu {
color:#000000;
text-decoration:none;
margin-bottom:10px;
background-image:url(images/blackarrow.gif);
background-repeat: no-repeat;
background-position: 100%;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding-right: 10px;
}


#digitalxraysb #digitalxrays,
#intraoralcamerab #intraoralcamera,
#airabrasionb #airabrasion,
#catscanb #catscan,
#contactinformationb #contactinformation,
#contactformb #contactform,
#mapb #map,
#endodonticsb #endodontics,
#periodonticsb #periodontics,
#askthedocb #askthedoc,
#facialamenb #facialamen,
#teethwhiteb #teethwhite,
#invisalignb #invisalign,
#inlaysoutlaysb #inlaysoutlays,
#metalfreefillingb #metalfreefilling,
#gumcontourb #gumcontour,
#laserdentistryb #laserdentistry,
#tmjtreatb #tmjtreat,
#porcelaincrownsb #porcelaincrowns,
#porcelainveneersb #porcelainveneers,
#lumineersb #lumineers,
#mouthrehabb #mouthrehab,
#implantsb #implants,
#smiledesignb #smiledesign,
#sedationdentistryb #sedationdentistry,
#ritaeb #ritae,
#alexbb #alexb,
#ahmedab #ahmeda,
#rulaab #rulaa,
#lindadb #lindad,
#nourdenehb #nourdeneh,
#annieab #anniea,
#mitchellcb #mitchellc,
#soniaeb #soniae,
#wendyrb #wendyr,
#katrinasb #katrinas,
#mohamedhb #mohamedh,
#carmenab #carmena,
#heathergriffesb #heathergriffes,
#drshapirob #drshapiro,
#drfeldb #drfeld,
#drbroujerdib #drbroujerdi,
#drstanb #drstan,
#contactb #contact,
#docblogb #docblog,
#dentallabb #dentallab,
#thenewsb #thenews,
#patientinfob #patientinfo,
#yourcomfortb #yourcomfort,
#dentalsolutionsb #dentalsolutions,
#cosmeticsolutionsb #cosmeticsolutions,
#vipclientsb #vipclients,
#smilegalleryb #smilegallery,
#meetdocsb #meetdocs,
#welcomeb #welcome

{

color:#000000;
text-decoration:none;
padding-right:13px;
background-image:url(images/navarrow.gif);
background-repeat: no-repeat;
background-position: right 45%;

}
#container #leftimage {
height: 330px;
width: 250px;
float: left;
}
#container #rightcontent {
height: 330px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
padding-right: 5px;
padding-left: 10px;
overflow: scroll;
}

#container #rightcontent a:link, #container #rightcontent a:active, #container #rightcontent a:visited, #container #rightcontent a:hover {
color:#5bb1e2;
text-decoration:none;
}
#container #leftimagewide {

height: 330px;
width: 330px;
float: left;
}
/******************************* START OF SMILE GALERY ****************************************************/
#container #carmenadiv {
height: 330px;
width: 250px;
float: left;
}

#container #carmenadiv a:link, #container #carmenadiv a:active, #container #carmenadiv a:visited {
height: 330px;
width: 250px;
display: block;
background-image: url(images/carmena01.jpg);
background-repeat: no-repeat;
}

#container #carmenadiv a:hover {
height: 330px;
width: 250px;
display: block;
background-image: url(images/carmena02.jpg);
background-repeat: no-repeat;
}

/***********/
#container #mohamedhdiv {
height: 330px;
width: 250px;
float: left;
}

#container #mohamedhdiv a:link, #container #mohamedhdiv a:active, #container #mohamedhdiv a:visited {
height: 330px;
width: 250px;
display: block;
background-image: url(images/mohamedh01.jpg);
background-repeat: no-repeat;
}

#container #mohamedhdiv a:hover {
height: 330px;
width: 250px;
display: block;
background-image: url(images/mohamedh02.jpg);
background-repeat: no-repeat;
}

/***********/
#container #wendydiv {
height: 330px;
width: 250px;
float: left;
}

#container #wendydiv a:link, #container #wendydiv a:active, #container #wendydiv a:visited {
height: 330px;
width: 250px;
display: block;
background-image: url(images/wendy1.jpg);
background-repeat: no-repeat;
}

#container #wendydiv a:hover {
height: 330px;
width: 250px;
display: block;
background-image: url(images/wendy2.jpg);
background-repeat: no-repeat;
}

/***********/
#container #soniadiv {
height: 330px;
width: 250px;
float: left;
}

#container #soniadiv a:link, #container #soniadiv a:active, #container #soniadiv a:visited {
height: 330px;
width: 250px;
display: block;
background-image: url(images/sonia1.jpg);
background-repeat: no-repeat;
}

#container #soniadiv a:hover {
height: 330px;
width: 250px;
display: block;
background-image: url(images/sonia2.jpg);
background-repeat: no-repeat;
}

/***********/
#container #ruladiv {
height: 330px;
width: 250px;
float: left;
}

#container #ruladiv a:link, #container #ruladiv a:active, #container #ruladiv a:visited {
height: 330px;
width: 250px;
display: block;
background-image: url(images/rula1.jpg);
background-repeat: no-repeat;
}

#container #ruladiv a:hover {
height: 330px;
width: 250px;
display: block;
background-image: url(images/rula2.jpg);
background-repeat: no-repeat;
}

/***********/
#container #ritadiv {
height: 330px;
width: 250px;
float: left;
}

#container #ritadiv a:link, #container #ritadiv a:active, #container #ritadiv a:visited {
height: 330px;
width: 250px;
display: block;
background-image: url(images/rita1.jpg);
background-repeat: no-repeat;
}

#container #ritadiv a:hover {
height: 330px;
width: 250px;
display: block;
background-image: url(images/rita2.jpg);
background-repeat: no-repeat;
}

/***********/
#container #nourdenediv {
height: 330px;
width: 250px;
float: left;
}

#container #nourdenediv a:link, #container #nourdenediv a:active, #container #nourdenediv a:visited {
height: 330px;
width: 250px;
display: block;
background-image: url(images/nourdene1.jpg);
background-repeat: no-repeat;
}

#container #nourdenediv a:hover {
height: 330px;
width: 250px;
display: block;
background-image: url(images/nourdene2.jpg);
background-repeat: no-repeat;
}

/***********/
#container #alexdiv {
height: 330px;
width: 250px;
float: left;
}

#container #alexdiv a:link, #container #alexdiv a:active, #container #alexdiv a:visited {
height: 330px;
width: 250px;
display: block;
background-image: url(images/alex1.jpg);
background-repeat: no-repeat;
}

#container #alexdiv a:hover {
height: 330px;
width: 250px;
display: block;
background-image: url(images/alex2.jpg);
background-repeat: no-repeat;
}

/***********/
#container #anniediv {
height: 330px;
width: 250px;
float: left;
}

#container #anniediv a:link, #container #anniediv a:active, #container #anniediv a:visited {
height: 330px;
width: 250px;
display: block;
background-image: url(images/annie1.jpg);
background-repeat: no-repeat;
}

#container #anniediv a:hover {
height: 330px;
width: 250px;
display: block;
background-image: url(images/annie2.jpg);
background-repeat: no-repeat;
}

/***********/
#container #katrinadiv {
height: 330px;
width: 250px;
float: left;
}

#container #katrinadiv a:link, #container #katrinadiv a:active, #container #katrinadiv a:visited {
height: 330px;
width: 250px;
display: block;
background-image: url(images/katrina1.jpg);
background-repeat: no-repeat;
}

#container #katrinadiv a:hover {
height: 330px;
width: 250px;
display: block;
background-image: url(images/katrina2.jpg);
background-repeat: no-repeat;
}

/***********/
#container #lindadiv {
height: 330px;
width: 250px;
float: left;
}

#container #lindadiv a:link, #container #lindadiv a:active, #container #lindadiv a:visited {
height: 330px;
width: 250px;
display: block;
background-image: url(images/linda1.jpg);
background-repeat: no-repeat;
}

#container #lindadiv a:hover {
height: 330px;
width: 250px;
display: block;
background-image: url(images/linda2.jpg);
background-repeat: no-repeat;
}

/***********/
#container #mitchelldiv {
height: 330px;
width: 250px;
float: left;
}

#container #mitchelldiv a:link, #container #mitchelldiv a:active, #container #mitchelldiv a:visited {
height: 330px;
width: 250px;
display: block;
background-image: url(images/mitchell1.jpg);
background-repeat: no-repeat;
}

#container #mitchelldiv a:hover {
height: 330px;
width: 250px;
display: block;
background-image: url(images/mitchell2.jpg);
background-repeat: no-repeat;
}

/***********/
#container #ahmeddiv {
height: 330px;
width: 250px;
float: left;
}

#container #ahmeddiv a:link, #container #ahmeddiv a:active, #container #ahmeddiv a:visited {
height: 330px;
width: 250px;
display: block;
background-image: url(images/ahmed1.jpg);
background-repeat: no-repeat;
}

#container #ahmeddiv a:hover {
height: 330px;
width: 250px;
display: block;
background-image: url(images/ahmed2.jpg);
background-repeat: no-repeat;
}
/********************************** END OF SMILE GALERY ********************************************************/

.gallerycloseup {
position: absolute;
right: 10px;
bottom: 10px;
color: #5bb1e2;
}

.gallerycloseup a {
display:block;
}

.gallerycloseup a:hover {
text-indent:0px;

}
/* The above hover change defeats the
IE/Win display changing bug */

.gallerycloseup a span {
display:none;
}

.gallerycloseup a:hover span {
position:absolute;
height: 330px;
width: 250px;
display:block;
left: -446px;
top: -305px;
text-decoration: none;
}
#container #vip {
height: 319px;
width: 538px;
padding-left: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
padding-top: 10px;
}

#vip span {
font-size: 9px;
}

#vip .image {
border: 1px solid #999999;

}


Thanks,
PoJ

harbingerOTV
08-04-2007, 12:03 AM
"background-attachment: scroll

The background image scrolls along with the document. Since scrolling a div is not scrolling the document, the background image of my div with overflow: auto shouldn't react.

scroll does not mean: let the image scroll with the element. The value local does this. Nonetheless Explorer Windows interprets scroll as such."

http://www.quirksmode.org/css/background.html


and in your footer, "copywrite" is not correct. It's copyright.

prophetofjah
08-06-2007, 04:05 AM
so it is not possible to get the background image to scroll with the text in firefox like it does in ie6 and ie7?

Thanks for pointing out the copyright spelling mistake.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum