Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts

    scrolling background image in FF

    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:
    Code:
    <!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:
    Code:
    /* 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

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    "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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    New Coder
    Join Date
    Jan 2006
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •