CSS Forum

**silverglade** · 01-28-2009, 06:59 PM

hi, i have a div with a background of attachment: fixed;, and a div with "overflow: scroll" to get a scrolling window for my text and images. but in Firefox, the background image gets cut off. i was wondering what i could do to fix it. any help greatly appreciated because i looked over my code and dont see any errors. thank you again. derek

here is the page im talking about.

http://derekvanderven.com/doctors_co...the_staff.html

here is the css for the page

Code:

@charset "utf-8";
/* CSS Document */

body {
    margin: 0;  /* clear for browsers */
    padding: 0;
    background-color: #517E86;
}
#container {
    position: relative;
    margin: 0 auto 0 auto;
    width: 800px;
    height: autox;
    border: solid 3px black;
    

    }
    
#header {
    background-image: url(header.gif);
     background-repeat: no-repeat;
     width: 800px;
     height: 96px;
     }
#navigation {
     
      width: 800px;
     height: 20px;
    
}     

#imgnavigation {
    width: 800px;
     height: 122px; /* images height*/
     background-color: #ffffff;
     
 }
 
 /* IMAGE GALLERY CODE CHANGED AROUND */
 
 #imgnavigation img {
 
     display: inline: 
     
    float: left;
    margin-left: 7px;
    }



#textbox {
    background-image: url(images/textbox.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    width: auto;
    height: 250px;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 1em;
    padding-bottom: 5em; 
     overflow: scroll;
}    
 
 #textbox img {
 margin: 5px;
 }
 
#footer {
overflow: auto;
width: 100%;
text-align: center;
}

here is the css/html for the page, the text scroll is at the bottom of it.

Code:

<!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>
<link href="doctor_style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]--> 
<style type="text/css">
.style2 {
    font-size: 13px
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 

<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;

 
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
 background-color: #517e86;    /*makes background color of dropdown blue*/
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #000000;  /* makes hover color black*/
}
 
a:link {color: #ffffff;}
a:visited {color: #ffffff;}
a:hover {color: #ffffff;}
a:active {color: #ffffff;} /* make all links white */
 
  
 
   
 
.style3 {
    font-size: x-large
}
</style>

<script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="meet_the_staff.html#specialists">Specialists</a>'
menu1[1]='<a href="meet_the_staff.html#endodontist">Endodontist</a>'
menu1[2]='<a href="meet_the_staff.html#periodontist">Periodontist</a>'
menu1[3]='<a href="meet_the_staff.html#ceramist">Ceramist/Dental Technician</a>'
menu1[4]='<a href="meet_the_staff.html#hygiene">Dental Hygiene/ Preventative Dentistry Staff</a>'
menu1[5]='<a href="meet_the_staff.html#assistants">Dental Assistants</a>'
menu1[6]='<a href="meet_the_staff.html#reception">Reception/Front Desk Staff</a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="forms_instructions.html#forms">Medical Hx/Registration Form</a>'
menu2[1]='<a href="meet_the_staff.html#">Post-Periodontal Surgery Instructions</a>'
menu2[2]='<a href="meet_the_staff.html#">Post-Extraction Instructions</a>'
menu2[3]='<a href="meet_the_staff.html#">Post Root Canal Instructions</a>'
 
var menu3=new Array()
menu3[0]='<a href="advanced_technologies.html">Cosmetic Dental Imaging</a>'
menu3[1]='<a href="advanced_technologies.html#laser_cavity">Laser Cavity Detection</a>'
menu3[2]='<a href="advanced_technologies.html#magnification">Advanced Magnification</a>'
menu3[3]='<a href="advanced_technologies.html#radiography">Digital Radiography</a>'
 
 var menu6=new Array()
menu6[0]='<a href="convenience_services.html">Consierge Services</a>'
menu6[1]='<a href="meet_the_staff.html#ceramist">Onsite Dental Ceramist</a>'
menu6[2]='<a href="meet_the_staff.html#specialists">Onsite Specialists</a>'
 
var menu7=new Array()
menu7[0]='<a href="meet_the_dentists.html#john">John J. Smith DDS</a>'
menu7[1]='<a href="meet_the_dentists.html#andrew">Andrew S. Gross DMD</a>'
menu7[2]='<a href="meet_the_staff.html#periodontist">Periodontist</a>'
menu7[3]='<a href="meet_the_staff.html#endodontist">Endodontist</a>'

 var menu8=new Array()
menu8[0]='<a href="services_procedures.html#dental_implants>Dental Implants</a>'
menu8[1]='<a href="services_procedures.html#porcelain_veneers">Porcelain Veneers</a>'
menu8[2]='<a href="services_procedures.html#onlay_inlay">Porcelain Onlay/Inlay</a>'
menu8[3]='<a href="services_procedures.html#reconstructive_dentistry">Reconstructive Dentistry</a>'
menu8[4]='<a href="services_procedures.html#periodontics">Periodontics</a>'
menu8[5]='<a href="services_procedures.html#endodontics">Endodontics</a>'
menu8[6]='<a href="services_procdures.html#preventive_dentistry">Preventive Dentistry</a>'
menu8[7]='<a href="services_procdures.html#reconstructive_dentistry">Dentures Full &amp; Partial</a>'

 var menu9=new Array()
menu9[0]='<a href="cosmetic_dentistry.html#cosmetic_dentistry>Cosmetic Dentistry</a>'
menu9[1]='<a href="cosmetic_dentistry.html#smile_design">Smile Design</a>'
menu9[2]='<a href="cosmetic_dentistry.html#gum_recontouring">Gingival (gum) Recontouring</a>'
menu9[3]='<a href="cosmetic_dentistry.html#cosmetic_bonding">Cosmetic Bonding</a>'
menu9[4]='<a href="cosmetic_dentistry.html#tooth_recontouring">Cosmetic Tooth Recontouring</a>'
menu9[5]='<a href="cosmetic_dentistry.html#veneers">Veneers</a>'
menu9[6]='<a href="cosmetic_dentistry.html#crowns">Porcelain Crowns</a>'
menu9[7]='<a href="cosmetic_dentistry.html#bleaching">Bleaching</a>'

 var menu10=new Array()
menu10[0]='<a href="tmj.html#tmj">TMJ</a>'
menu10[1]='<a href="cosmetic_dentistry.html#orofacial_pain">Orofacial Pain</a>'
menu10[2]='<a href="cosmetic_dentistry.html#snoring">Snoring</a>'

var menuwidth='165px' //default menu width
var menubgcolor='lightyellow'  //menu bgcolor
var disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)

dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu

</script>
<title>Dental Partners of Columbia Home</title>
</head>

<body>
<div id="container">
   <div id="header"> </div> 
   <div id="navigation"> 
            <div align="center" class="style2">
         <a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" 
         onMouseout="delayhidemenu()">Meet the Staff</a> |
             <a href="default2.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu2, '150px')" 
           onMouseout="delayhidemenu()">Forms and Instructions</a> |
             <a href="default3.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu3, '150px')" 
           onMouseout="delayhidemenu()">Advanced Technologies</a> |  
             <a href="smile_gallery.html">Smile Gallery</a> |  
             <a href="contact.html">Contact Us</a> |  
             <a href="default6.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu6, '150px')" 
           onMouseout="delayhidemenu()">Convenience Services</a> |  
             <a href="links.html">Links</a> |  
             <a href="press_mentions.html">Press Mentions</a></div>
   </div>
   <!-- end NAVIGATION-->
               <div id="imgnavigation">
                 
           

        <!-- IMAGE LINK CODE-->      
              
              
         <a href="meet_the_staff.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu7, '150px')" 
         onMouseout="delayhidemenu()"> <img src="images/meet_dentists.jpg" border="0" ></a><a href="our_office.html" ><img src="images/our_office.jpg" width="151" height="122" border="0" /></a><a href="service_procedures.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu8, '150px')" 
         onMouseout="delayhidemenu()"><img src="images/service_pro.jpg" width="151" height="122" border="0" /></a><a href="cosmetic_dentistry.html" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu9, '150px')" 
         onMouseout="delayhidemenu()"><img src="images/cosmetic.jpg" width="155" height="122" border="0" /></a><a href="tmj.html" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu10, '150px')" 
         onmouseout="delayhidemenu()"><img src="images/tmj.jpg" alt="" width="150" height="122" border="0" /></a>         </div> 
<!-- END IMGNAVIGATION-->    
  
<div id="textbox">
                    
                    <br><h3>Meet the Dentists</h3></br>
                  <img src="images/dr_gross.jpg" align ="right" width="91" height="136" border="0" />
 <b>Andrew S. Gross DMD</b>  has been practicing dentistry on the Upper East Side since graduating from Columbia University School of Dental and Oral Surgery in 1980. In 1981 he completed a residency in general dentistry at Mount Sinai Medical Center. He was then appointed to the medical center’s attending staff and in 1983, became coordinator (with Dr. Smith) of the Department of Dentistry. Several years later, Dr. Gross left Mount Sinai in order to spend more time in his practice. He was appointed director of Gramercy Park Health Associates, a medical/dental group practice. A resident of the West Side, Dr. Gross is married with three children. He loves to travel and enjoys tennis and skiing.

<p>Dr. Gross has developed an international patient base, coordinating his schedule to accommodate patients with tight traveling schedules. Working together with the dental specialists and with Danny, the in-house ceramist, Dr. Gross can usually complete the entire treatment based on the patient's timetable. When booking an appointment from out of town, please make sure to speak to Dr. Gross directly.</p>

 
<img src="images/dr_smith.jpg" align ="right"  border="0"  />
<p><b>John J. Smith DDS </b>received his dental degree from the Tufts University School of Dental Medicine in 1980. After completing his residency in general dentistry at Mount Sinai Hospital Medical Center, he became coordinator of the Department of Dentistry, a position he held for 13 years. He also was a co-founder of the medical center’s Dental Phobia Clinic and was Director of the Temporomandibular Disorders/Facial Pain Clinic. Dr. Kaplan is an associate clinical professor of the Mount Sinai School of Medicine and an associate attending of the Mount Sinai Medical Center. He has also held faculty positions at New York University College of Dentistry, The Columbia University School of Dental and Oral Surgery, and Tufts University School of Dental Medicine. </p>

<p>Dr. Smith is a past president of the American Academy of Orofacial Pain. He is widely published and has authored several books on Orofacial Pain and Temporomandibular Disorders. Many physicians and other dentists refer their “TMJ”, headache and facial pain patients to Dr. Smith. Dr.Smith is married, has three children and lives in Scarsdale, New York. He enjoys travel, tennis and golf. </p>
</div>
<!-- END TEXTBOX-->

<div id="footer"> Site Design by derekvanderven.com &copy; 2009 </div>
</div>
<!-- END CONTAINTER-->
</body>
</html>

**Insensus** · 01-28-2009, 07:21 PM

Remove the background-attachment.
Fixed it for me.

**silverglade** · 08:06 PM

if i remove the attachment fixed, the background scrolls nicely with firefox, but in internet explorer the background image stays stuck, not scrolling with the text. or not scrolling? im trying to keep the background image consistent filling the box. any more help appreciated. thanks for the help insensus. derek here is something that fixed it. but now in firefox, the background image doesnt start until halfway horizontally in the div. i dont know why. derek

here is the new page, in firefox you can see the image starts in the middle not the left.

http://derekvanderven.com/doctors_co...the_staff.html

Code:

#textbox {
background: url(images/textbox.gif) fixed;
height:250px;
overflow:scroll;
overflow-x:hidden;
padding:1em 1em 5em;
width:auto;
}

**stevej** · 01-28-2009, 11:03 PM

Try this: Replace the whole #textbox id and replace it with:

Code:

#textbox {
height:250px;
overflow:scroll;
width:auto;
}
#bg {
padding:1em 1em 5em;
background: url('images/textbox.gif');
}

Then put in a <div id="bg"> inside <div id="textbox">. Worked in Opera, not too sure if it'll work in Firefox and IE.

- Steve

**silverglade** · 01-29-2009, 09:45 AM

stevej!! i have no idea how you figured that out or how you knew how to do it, but it WORKED! you are a genius. you were the only one on 3 message boards who knew how to do it or was willing to try to help me with that. i added to your talkupation, i wish i could add 100points. i hate being a newbie. but i guess if i ask questions for another year or so, i wont be a newbie anymore. so much is guesswork for me, but maybe ill go back to w3chools.com and review. again thank you because it now looks great in IE and FF> derek