hello. i am new to css and div. i am a front-end designer and use a coder, who i recently lost and am doing the full job myself. the problem is the secondary pages on my design. i want content to scroll inside the orange box you see in the image below. there is a lot of content on some of the secondary pages. i sliced the image and have tried to use the h/w of the slice as a background and have some success, but when its all said and done, the other tables are completely broken. here is the image/slice for the background: i am using Dreamweaver to code. thank you!
here is the awful code: the slice is /kading_eyeexam2_Layer-2.gif <html> <head> <title>kading_eye_exam</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <!-- ImageReady Preload Script (kading_eye_exam.psd) --> <script type="text/javascript"> <!-- function newImage(arg) { if (document.images) { rslt = new Image(); rslt.src = arg; return rslt; } } function changeImages() { if (document.images && (preloadFlag == true)) { for (var i=0; i<changeImages.arguments.length; i+=2) { document[changeImages.arguments].src = changeImages.arguments[i+1]; } } } var preloadFlag = false; function preloadImages() { if (document.images) { kading_eyeexam_Vision_Therapy_over = newImage("images/kading_eyeexam_Vision-Th-17.gif"); kading_eyeexam_Contact_Lens_over = newImage("images/kading_eyeexam_Contact-L-21.gif"); kading_eyeexam_Pediatrics_over = newImage("images/kading_eyeexam_Pediatrics-o.gif"); kading_eyeexam_Education_over = newImage("images/kading_eyeexam_Education-ov.gif"); kading_eyeexam_About_Us_over = newImage("images/kading_eyeexam_About-Us-ove.gif"); kading_eyeexam_Eye_Wear_over = newImage("images/kading_eyeexam_Eye-Wear-ove.gif"); kading_eyeexam_Forms_over = newImage("images/kading_eyeexam_Forms-over.gif"); kading_eyeexam_Contact_over = newImage("images/kading_eyeexam_Contact-over.gif"); preloadFlag = true; } } // --> </script> <!-- End Preload Script --> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="preloadImages();"> <!-- ImageReady Slices (kading_eye_exam.psd) --> <table id="Table_01" width="1025" height="769" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" rowspan="3"> <img src="images/kading_eyeexam_01.gif" width="256" height="192" alt=""></td> <td rowspan="3"> <img src="images/kading_eyeexam_02.gif" width="256" height="192" alt=""></td> <td colspan="22"> <img src="images/kading_eyeexam_03.gif" width="496" height="21" alt=""></td> <td rowspan="3"> <img src="images/kading_eyeexam_04.gif" width="16" height="192" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="21" alt=""></td> </tr> <tr> <td colspan="3" rowspan="2"> <img src="images/kading_eyeexam_05.gif" width="53" height="171" alt=""></td> <td colspan="16"> <img src="images/kading_eyeexam_logo.gif" width="417" height="168" border="0" alt="" usemap="#kading_eyeexam_logo_Map"></td> <td colspan="3" rowspan="2"> <img src="images/kading_eyeexam_07.gif" width="26" height="171" border="0" alt="" usemap="#kading_eyeexam_07_Map"></td> <td> <img src="images/spacer.gif" width="1" height="168" alt=""></td> </tr> <tr> <td colspan="15"> <img src="images/kading_eyeexam_08.gif" width="416" height="3" border="0" alt="" usemap="#kading_eyeexam_08_Map"></td> <td> <img src="images/kading_eyeexam_09.gif" width="1" height="3" border="0" alt="" usemap="#kading_eyeexam_09_Map"></td> <td> <img src="images/spacer.gif" width="1" height="3" alt=""></td> </tr> <tr> <td colspan="2" rowspan="11"> <img src="images/kading_eyeexam_10.gif" width="256" height="144" alt=""></td> <td rowspan="11"> <img src="images/kading_eyeexam_11.gif" width="256" height="144" alt=""></td> <td colspan="22"> <img src="images/kading_eyeexam_12.gif" width="496" height="52" alt=""></td> <td rowspan="11"> <img src="images/kading_eyeexam_13.gif" width="16" height="144" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="52" alt=""></td> </tr> <tr> <td colspan="14"> <img src="images/kading_eyeexam_14.gif" width="339" height="1" alt=""></td> <td colspan="6" rowspan="3"> <a href="#" onmouseover="changeImages('kading_eyeexam_Vision_Therapy', 'images/kading_eyeexam_Vision-Th-17.gif'); return true;" onmouseout="changeImages('kading_eyeexam_Vision_Therapy', 'images/kading_eyeexam_Vision-Thera.gif'); return true;" onmousedown="changeImages('kading_eyeexam_Vision_Therapy', 'images/kading_eyeexam_Vision-Th-17.gif'); return true;" onmouseup="changeImages('kading_eyeexam_Vision_Therapy', 'images/kading_eyeexam_Vision-Th-17.gif'); return true;"> <img name="kading_eyeexam_Vision_Therapy" src="images/kading_eyeexam_Vision-Thera.gif" width="133" height="36" border="0" alt=""></a></td> <td colspan="2" rowspan="10"> <img src="images/kading_eyeexam_16.gif" width="24" height="92" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="8"> <img src="images/kading_eyeexam_17.gif" width="200" height="1" alt=""></td> <td colspan="5" rowspan="3"> <a href="#" onmouseover="changeImages('kading_eyeexam_Contact_Lens', 'images/kading_eyeexam_Contact-L-21.gif'); return true;" onmouseout="changeImages('kading_eyeexam_Contact_Lens', 'images/kading_eyeexam_Contact-Lens.gif'); return true;" onmousedown="changeImages('kading_eyeexam_Contact_Lens', 'images/kading_eyeexam_Contact-L-21.gif'); return true;" onmouseup="changeImages('kading_eyeexam_Contact_Lens', 'images/kading_eyeexam_Contact-L-21.gif'); return true;"> <img name="kading_eyeexam_Contact_Lens" src="images/kading_eyeexam_Contact-Lens.gif" width="134" height="38" border="0" alt=""></a></td> <td rowspan="9"> <img src="images/kading_eyeexam_19.gif" width="5" height="91" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="2" rowspan="5"> <img src="images/kading_eyeexam_20.gif" width="52" height="64" alt=""></td> <td colspan="6" rowspan="3"> <a href="#" onmouseover="changeImages('kading_eyeexam_Pediatrics', 'images/kading_eyeexam_Pediatrics-o.gif'); return true;" onmouseout="changeImages('kading_eyeexam_Pediatrics', 'images/kading_eyeexam_Pediatrics.gif'); return true;" onmousedown="changeImages('kading_eyeexam_Pediatrics', 'images/kading_eyeexam_Pediatrics-o.gif'); return true;" onmouseup="changeImages('kading_eyeexam_Pediatrics', 'images/kading_eyeexam_Pediatrics-o.gif'); return true;"> <img name="kading_eyeexam_Pediatrics" src="images/kading_eyeexam_Pediatrics.gif" width="148" height="38" border="0" alt=""></a></td> <td> <img src="images/spacer.gif" width="1" height="34" alt=""></td> </tr> <tr> <td colspan="6" rowspan="3"> <img src="images/kading_eyeexam_22.gif" width="133" height="29" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="3" alt=""></td> </tr> <tr> <td colspan="3"> <a href="#" onmouseover="changeImages('kading_eyeexam_Pediatrics', 'images/kading_eyeexam_Pediatrics-o.gif'); return true;" onmouseout="changeImages('kading_eyeexam_Pediatrics', 'images/kading_eyeexam_Pediatrics.gif'); return true;" onmousedown="changeImages('kading_eyeexam_Pediatrics', 'images/kading_eyeexam_Pediatrics-o.gif'); return true;" onmouseup="changeImages('kading_eyeexam_Pediatrics', 'images/kading_eyeexam_Pediatrics-o.gif'); return true;"> <img src="images/kading_eyeexam_Pediatric-27.gif" width="101" height="1" border="0" alt=""></a></td> <td colspan="2" rowspan="3"> <img src="images/kading_eyeexam_24.gif" width="33" height="27" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="9"> <img src="images/kading_eyeexam_25.gif" width="249" height="25" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="25" alt=""></td> </tr> <tr> <td colspan="3"> <img src="images/kading_eyeexam_26.gif" width="71" height="1" alt=""></td> <td rowspan="2"> <a href="#" onmouseover="changeImages('kading_eyeexam_Education', 'images/kading_eyeexam_Education-ov.gif'); return true;" onmouseout="changeImages('kading_eyeexam_Education', 'images/kading_eyeexam_Education.gif'); return true;" onmousedown="changeImages('kading_eyeexam_Education', 'images/kading_eyeexam_Education-ov.gif'); return true;" onmouseup="changeImages('kading_eyeexam_Education', 'images/kading_eyeexam_Education-ov.gif'); return true;"> <img name="kading_eyeexam_Education" src="images/kading_eyeexam_Education.gif" width="53" height="11" border="0" alt=""></a></td> <td colspan="5"> <img src="images/kading_eyeexam_28.gif" width="125" height="1" alt=""></td> <td rowspan="4"> <img src="images/kading_eyeexam_29.gif" width="12" height="27" alt=""></td> <td rowspan="2"> <a href="#" onmouseover="changeImages('kading_eyeexam_About_Us', 'images/kading_eyeexam_About-Us-ove.gif'); return true;" onmouseout="changeImages('kading_eyeexam_About_Us', 'images/kading_eyeexam_About-Us.gif'); return true;" onmousedown="changeImages('kading_eyeexam_About_Us', 'images/kading_eyeexam_About-Us-ove.gif'); return true;" onmouseup="changeImages('kading_eyeexam_About_Us', 'images/kading_eyeexam_About-Us-ove.gif'); return true;"> <img name="kading_eyeexam_About_Us" src="images/kading_eyeexam_About-Us.gif" width="50" height="11" border="0" alt=""></a></td> <td colspan="4"> <img src="images/kading_eyeexam_31.gif" width="71" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> </tr> <tr> <td rowspan="3"> <img src="images/kading_eyeexam_32.gif" width="49" height="26" alt=""></td> <td colspan="3" rowspan="2"> <a href="#" onmouseover="changeImages('kading_eyeexam_Eye_Wear', 'images/kading_eyeexam_Eye-Wear-ove.gif'); return true;" onmouseout="changeImages('kading_eyeexam_Eye_Wear', 'images/kading_eyeexam_Eye-Wear.gif'); return true;" onmousedown="changeImages('kading_eyeexam_Eye_Wear', 'images/kading_eyeexam_Eye-Wear-ove.gif'); return true;" onmouseup="changeImages('kading_eyeexam_Eye_Wear', 'images/kading_eyeexam_Eye-Wear-ove.gif'); return true;"> <img name="kading_eyeexam_Eye_Wear" src="images/kading_eyeexam_Eye-Wear.gif" width="52" height="12" border="0" alt=""></a></td> <td rowspan="3"> <img src="images/kading_eyeexam_34.gif" width="22" height="26" alt=""></td> <td rowspan="3"> <img src="images/kading_eyeexam_35.gif" width="23" height="26" alt=""></td> <td colspan="2" rowspan="2"> <img src="images/kading_eyeexam_Eye-Exam.gif" width="53" height="12" alt=""></td> <td rowspan="3"> <img src="images/kading_eyeexam_37.gif" width="28" height="26" alt=""></td> <td colspan="2"> <a href="#" onmouseover="changeImages('kading_eyeexam_Forms', 'images/kading_eyeexam_Forms-over.gif'); return true;" onmouseout="changeImages('kading_eyeexam_Forms', 'images/kading_eyeexam_Forms.gif'); return true;" onmousedown="changeImages('kading_eyeexam_Forms', 'images/kading_eyeexam_Forms-over.gif'); return true;" onmouseup="changeImages('kading_eyeexam_Forms', 'images/kading_eyeexam_Forms-over.gif'); return true;"> <img name="kading_eyeexam_Forms" src="images/kading_eyeexam_Forms.gif" width="33" height="10" border="0" alt=""></a></td> <td rowspan="3"> <img src="images/kading_eyeexam_39.gif" width="21" height="26" alt=""></td> <td rowspan="3"> <img src="images/kading_eyeexam_40.gif" width="29" height="26" alt=""></td> <td colspan="3"> <a href="#" onmouseover="changeImages('kading_eyeexam_Contact', 'images/kading_eyeexam_Contact-over.gif'); return true;" onmouseout="changeImages('kading_eyeexam_Contact', 'images/kading_eyeexam_Contact.gif'); return true;" onmousedown="changeImages('kading_eyeexam_Contact', 'images/kading_eyeexam_Contact-over.gif'); return true;" onmouseup="changeImages('kading_eyeexam_Contact', 'images/kading_eyeexam_Contact-over.gif'); return true;"> <img name="kading_eyeexam_Contact" src="images/kading_eyeexam_Contact.gif" width="42" height="10" border="0" alt=""></a></td> <td> <img src="images/spacer.gif" width="1" height="10" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/kading_eyeexam_42.gif" width="53" height="16" alt=""></td> <td colspan="2" rowspan="2"> <img src="images/kading_eyeexam_43.gif" width="33" height="16" alt=""></td> <td rowspan="2"> <img src="images/kading_eyeexam_44.gif" width="50" height="16" alt=""></td> <td colspan="3" rowspan="2"> <img src="images/kading_eyeexam_45.gif" width="42" height="16" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="2" alt=""></td> </tr> <tr> <td colspan="3"> <img src="images/kading_eyeexam_46.gif" width="52" height="14" alt=""></td> <td colspan="2"> <img src="images/kading_eyeexam_47.gif" width="53" height="14" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="14" alt=""></td> </tr> <tr> <td colspan="2"> <img src="images/kading_eyeexam_48.gif" width="256" height="8" alt=""></td> <td> <img src="images/kading_eyeexam_49.gif" width="256" height="8" alt=""></td> <td colspan="22"> <img src="images/kading_eyeexam_50.gif" width="496" height="8" alt=""></td> <td rowspan="3"> <img src="images/kading_eyeexam_51.gif" width="16" height="399" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="8" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/kading_eyeexam_52.gif" width="39" height="391" alt=""></td> <td colspan="23" align="left" valign="top"> <img src="images/kading_eyeexam_53.gif" width="953" height="389" alt=""></td> <td rowspan="2"> <img src="images/kading_eyeexam_54.gif" width="16" height="391" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="389" alt=""></td> </tr> <tr> <td> <img src="images/kading_eyeexam_55.gif" width="217" height="2" alt=""></td> <td> <img src="images/kading_eyeexam_56.gif" width="256" height="2" alt=""></td> <td colspan="21"> <img src="images/kading_eyeexam_57.gif" width="480" height="2" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="2" alt=""></td> </tr> <tr> <td colspan="2"> <img src="images/kading_eyeexam_58.gif" width="256" height="33" alt=""></td> <td> <img src="images/kading_eyeexam_59.gif" width="256" height="33" alt=""></td> <td colspan="22"> <img src="images/kading_eyeexam_60.gif" width="496" height="33" alt=""></td> <td> <img src="images/kading_eyeexam_61.gif" width="16" height="33" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="33" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="39" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="217" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="256" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="49" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="3" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="48" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="22" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="53" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="23" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="52" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="28" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="21" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="12" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="21" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="5" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="12" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="50" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="29" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="39" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="1" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="2" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="8" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="16" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="16" height="1" alt=""></td> <td></td> </tr> </table> <map name="kading_eyeexam_logo_Map"> <area shape="rect" alt="" coords="3,0,417,168" href="kading_index.html" target="_self"> </map> <map name="kading_eyeexam_07_Map"> <area shape="rect" alt="" coords="0,0,25,170" href="kading_index.html" target="_self"> </map> <map name="kading_eyeexam_08_Map"> <area shape="rect" alt="" coords="3,0,416,2" href="kading_index.html" target="_self"> </map> <map name="kading_eyeexam_09_Map"> <area shape="rect" alt="" coords="0,0,1,2" href="kading_index.html" target="_self"> </map> <!-- End ImageReady Slices --> </body> </html>
css: <style type="text/css"> <!-- #23 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal; line-height: normal; font-weight: normal; color: #000000; text-decoration: none; background-image: url(images/kading_eyeexam23_53.gif); height: 389px; width: 953px; position: fixed; background-repeat: no-repeat; overflow: auto; padding: 5px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-position: 10px bottom; background-attachment: fixed; background-color: #EAB67A; } --> </style> DIV <tr> <td rowspan="2"> <img src="images/kading_eyeexam23_52.gif" width="39" height="391" alt=""></td> <td colspan="23" align="left" valign="top"><div id="23"> <p>Eye Exam Overview</p> ......... blah blah </div> now the problem is the whole page is moving when scolling outside the DIV and doesnt work at ALL in FF and barely in IE. link: http://www.marinazakarian.com/kading/kading_eyeexam23.html