1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

css div background image and, oh yeah, a table! HELP!!

Discussion in 'CSS' started by marinazar, May 23, 2010.

0
  1. #1
    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.

    [​IMG]

    here is the image/slice for the background:

    [​IMG]

    i am using Dreamweaver to code.

    thank you!
     
    marinazar, May 23, 2010 IP
  2. marinazar

    marinazar Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #2
    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>
     
    marinazar, May 23, 2010 IP
  3. marinazar

    marinazar Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    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. :mad:

    link: http://www.marinazakarian.com/kading/kading_eyeexam23.html
     
    marinazar, May 23, 2010 IP
  4. marinazar

    marinazar Greenhorn

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    bump. im desperate.
     
    marinazar, May 24, 2010 IP