SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2000
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    images overlapping text

    I'm having problems with graphics overlapping text on a page in IE. I've set the page up 2 different ways....first a 2 column table with the graphics in the 2nd column, then as 2 separate tables with the one with the graphics right justifed. Problem still exists.

    How do I fix this??

    To see the page "in question" visit http://www.pls.uni.edu/read/handouts.html and click on the Adopt a Teaching Mouse html version.

    Thanks for your help!

    Jenni

  2. #2
    pg for mild peril cow's Avatar
    Join Date
    Mar 2000
    Location
    nevada, usa
    Posts
    636
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the html is forcing an overlap of the two tables. they just need to be seperated into two cells of the same row. this is done be encapsulating the entire content section (below the mission statement) into a seperate table. here, i did this one real quick...
    "There's no justice like angry mob justice!" --Seymour Skinner

  3. #3
    SitePoint Evangelist azizur_rahman's Avatar
    Join Date
    Nov 2001
    Location
    London, UK
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what you are trying to do is cliping the table on the left.. but you cant do that when you have another table next to it.

    its not possible for the browser to rander two table at once.. from top to bottom.. so'll need to make nested tables.

    here's your page: I am asuming you wanted the table with pic on right of the page.
    Code:
    <html>
    <head>
    <meta http-equiv=Content-Type content="text/html; charset=windows-1252">
    <title>BRC Handout - Adopt a Teaching Mouse</title>
    <style><!--
    .MsoTitle
    	{text-align:center;
    		font-size:14.0pt;
    		font-family:"Times New Roman";
    	
    	font-weight:bold;}
    .MsoBodyText
    	{font-size:12.0pt;
    		font-family:"Times New Roman";}
    .MsoBodyTextIndent
    	{text-indent:.5in;
    		font-size:12.0pt;
    		font-family:Times;
    		
    	color:black;}
    .MsoSubtitle
    	{text-align:center;
    		font-size:14.0pt;
    		font-family:"Times New Roman";
    	
    	font-weight:bold;}
    Section1
    	{size:8.5in 11.0in;}
    .Section1
    	{page:Section1;}
    -->
    </style>
    </head>
    <body lang=EN-US link=blue vlink=purple bgcolor="#FFFFFF" class="Normal">
    <div class=Section1> 
      <div align="center"> 
        <table width="100%" border="0" cellspacing="2" cellpadding="5" bgcolor="#FFCC99">
          <tr>
            <td valign="middle"> 
              <p align="center"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="6"><b>Adopt 
                a Teaching Mouse</b></font></p>
              <p align="center"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="3">By 
                JayCee Bear (Betty) Kobes, West Hancock Kanawha Elementary</font></p>
              <p align="center"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2"> 
                For more about Jaycee Bear, visit her web site at <a href="http://www.jayceebear.com/" target="_blank">www.jayceebear.com</a> 
                or <a href="http://www.bettykobes.com" target="_blank">www.bettykobes.com</a></font> 
              </p>
      </td>
          </tr>
        </table>
        <br>
      </div>
      <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="3">Inspired 
        by Denise Fleming’s book <i>Lunch</i>, discover cross-curricular reading and 
        writing activities. Learn how to use Denise Fleming’s books in the context 
        of agriculture, conservation, and technology. Investigate professional teaching 
        models and early literacy including phonics and phonemic awareness strategies. 
        Find motivations for increasing reading scores, ideas for stimulating parents 
        to work with their child, and how to involve the community in your classroom.** 
        </font></p>
      <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="3"><b>A 
        Susan Kovolic Whole Year Agriculture Integrated Thematic Instruction Model 
        using Denise Fleming books is designed at <a
    href="http://www.jayceebear.com/">www.jayceebear.com</a>.</b></font></p>
      <table width="100%" border="0" cellspacing="2" cellpadding="2" align="center">
        <tr> 
          <td valign="top"> 
            <p align="center"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="4"><b>MISSION 
              STATEMENT</b></font></p>
            <p align="center"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="3"><b>WELCOME 
              TO FIRST GRADE’S J.C. BEAR PUBLISHING COMPANY AGRICULTURE ACADEMY</b></font></p>
          </td>
        </tr>
        <tr> 
          <td valign="top"> 
            <p align="center"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">It 
              is the goal of the J.C. Bear Publishing Company and 130 official community 
              members <br>
              to educate each J.C. Bear so they discover and excel in his or her personal 
              learning style,<br>
              character building qualities, technology,and social interactions.</font></p>
            <p align="center"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">An 
              agriculture and conservation emphasis, <br>
              combined with instruction for reaching the basic skills of</font></p>
            <div align="center">
              <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">READING<br>
                WRITING<br>
                LISTENING<br>
                SPEAKING<br>
                and<br>
                VIEWING</font></p>
              <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">with 
                the help from some teaching mice will challenge <br>
                each new J.C. Bear’s academic growth and citizenship responsibilities.</font> 
              </p>
              </div>
          </td>
        </tr>
      </table>
      <p>
      <table width="100%" border="1" cellspacing="5" cellpadding="2">
        <tr> 
          <td rowspan="8" valign="top"> 
            <table width="100%" border="0" cellspacing="2" cellpadding="2">
              <tr> 
                <td bgcolor="#FFCC66"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066"><b><i>In 
                  the Small, Small Pond</i> inspired the following activity:</b></font></td>
              </tr>
            </table>
            <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066"><b>QUACKER 
              EATS POND WATER ORGANISMS<font size="2"><br>
              </font></b></font><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">Bruce 
              Voigts, Wright County Conservation Educational Naturalist, brought Quacker, 
              a magnificent duck, to help teach the J.C. Bears about living things.* 
              Bruce also brought pond water samples containing; water boatman, dragon 
              fly larva, snails, duckweed, and cattail blades. Quacker ate them all, 
              but not before the water was placed in a glass dish and displayed on 
              the overhead to be projected by the light so the “living things” were 
              very large and easy to observe by the viewers.* </font></p>
            <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">Bruce 
              pointed out the interesting facts about the duckweed growing without 
              soil, the stages of life of the organisms moving around in the water, 
              and the very small microorganisms we observed under the microscope.** 
              </font></p>
            <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">When 
              all the objectives were presented and reviewed, Bruce brought out Quacker, 
              who entertained us by feasting on our lesson props!** “Living things 
              in the wild survive by preying on and eats smaller living things”, said 
              Bruce.</font></p>
            <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">The 
              J.C. Bears learned about the life cycle of wetlands creatures. </font></p>
            <table width="100%" border="0" cellspacing="2" cellpadding="2">
              <tr> 
                <td bgcolor="#FFCC66"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066"><b><i>Where 
                  Once There Was a Wood</i> inspired the following activity:</b></font></td>
              </tr>
            </table>
            <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066"><b><font size="3">SUNGLASS 
              LEAVES - J.C. Bears Discover a Wild Place<font size="2"><br>
              </font></font></b><font size="2">We glanced up at the sun, through the 
              translucent deep yellow leaves telescoping layer upon layer, to the 
              top of the tree. Their soft warmth reflected the penetrating rays as 
              we bathed in its gemlike beauty. A stark blue sky painted a background 
              for the majestic yellow-gold silhouette. The wind driven flurry of crispy 
              leaves across the grass whispered the secrets of fall. This was the 
              day to visit the Iowa State University Research Farm. We were primed 
              to study trees and living things.</font></font></p>
            <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">The 
              Pine waited two decades for J.C. Bears to come. The magic of their touch 
              was an introduction for the J.C. Bears research. A project to compare 
              a seed and what can happen to the tiny sprout inside the seed if the 
              conditions for germination; sun, soil, and rain, were perfect. As our 
              visit continued, it developed into an experience that helped the Bears 
              to imagine, create, and discover a place to love. Finding a WILD PLACE, 
              that unlocks nature’s mysteries, is essential to help young minds grow 
              in a manner that encourages scientific thinking. </font> </p>
            <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066"><b>The 
              Iowa State University Northern Iowa Research Farm outdoor classroom 
              educational programs meet the following:</b></font></p>
            <blockquote> 
              <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="4"><b>SCIENCE 
                STANDARDS AND BENCHMARKS</b></font> </p>
              <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2"> 
                1. Knows about the diversity and unity that characterizes life - Knows 
                that plants and animals have external features that help them thrive 
                in different environments.</font></p>
              <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">2. 
                Understands how species depend on one another and on the environment 
                for survival - Knows that different types of plants and animals live 
                in different places.* </font></p>
              <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2"> 
                3. Understands that cycling of matter and flow of energy through the 
                living environment - Knows that plants and animals both need water, 
                animals need food to eat and plants need light.</font></p>
              <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2"> 
                4. Understands the nature of scientific inquiry - Knows that learning 
                can come from careful observations and simple experiments-Understands 
                that tools like thermometers and magnifiers add to information from 
                our senses.** </font></p>
              <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2"> 
                5. Understands the scientific enterprise - Understands that in science 
                it is helpful to work with a team and share findings with others.</font></p>
            </blockquote>
            <table width="100%" border="0" cellspacing="2" cellpadding="2">
              <tr> 
                <td bgcolor="#FFCC66"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066"><b><i>Barnyard 
                  Banter </i> inspired the following activity:</b></font></td>
              </tr>
            </table>
            <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066"><b><font size="3">IF 
              THE ROOSTER CROWS<br>
              </font></b><font size="2">The morning is perfect if the rooster crows. 
              Cecil Eliason has a feisty black rooster that greets us with his morning 
              song. The Eliason farm is one block from the school and the miniature 
              replica of farm buildings. The chickens and birds, housed in miniature 
              cages constructed and painted red just like the big buildings with white 
              trimmed windows, were the ones we hear as we come to school. </font></font></p>
            <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">They 
              are also so very appealing to young children because the young learners 
              can peer into the fantasyland of imagination. These miniature buildings 
              are just the right size to inspect and discover agriculture’s treasures 
              of learning. </font></p>
            <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">The 
              J.C. Bears visit the newly hatched chicks. The mother hen was white 
              with black tipped feathers and her babies were little black balls of 
              fluff. J.C. Bear Timothy was especially intrigued with how the little 
              door lifted up in front of the coop. Agriculture is understood well 
              with community support for education.</font></p>
            <font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">In 
            previous years, the J.C. Bear Publishing Company Ag Academy received numerous 
            State of Iowa awards. These recognitions set a foundation for the<b> Year 
            2000 National Teacher Excellence Award presented by the USDA . </b></font> 
            <blockquote> 
              <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066"><i><b>Previous 
                and most recent awards:</b></i></font></p>
              <table width="100%" border="0" cellspacing="5" cellpadding="2">
                <tr valign="top"> 
                  <td width="12" height="12"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">2001</font></td>
                  <td width="90%" height="12"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">Farm 
                    Journal Agriculture Ambassador</font></td>
                </tr>
                <tr valign="top"> 
                  <td width="12"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">2001</font></td>
                  <td width="90%"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">University 
                    of Northern Iowa Showcase Technology Award<b>* </b></font></td>
                </tr>
                <tr valign="top"> 
                  <td width="12"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">1999</font></td>
                  <td width="90%"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">Iowa 
                    Agriculture Awareness Coalition (IAAC) Award</font></td>
                </tr>
                <tr valign="top"> 
                  <td width="12"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">1998</font></td>
                  <td width="90%"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">Scholastic 
                    Writing Award and trip to the International Reading Convention 
                    in Atlanta,GA</font></td>
                </tr>
                <tr valign="top"> 
                  <td width="12"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">1997</font></td>
                  <td width="90%"> 
                    <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">Des 
                      Moines Register Conservation Teacher of the Year Award, </font></p>
                    <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">Iowa 
                      Conservation Education Council Outstanding Teacher In Iowa Award, 
                      </font></p>
                    <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">Hancock 
                      County District Conservation Teaching Award, </font></p>
                  </td>
                </tr>
                <tr valign="top"> 
                  <td width="12"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">1996</font></td>
                  <td width="90%"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">Coalition 
                    of Agriculture Image Promotion (CAIP) Award</font></td>
                </tr>
                <tr valign="top"> 
                  <td width="12"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">1994</font></td>
                  <td width="90%"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">Midland 
                    Dairy Association Outstanding Nutrition Education Teaching Award.* 
                    </font></td>
                </tr>
              </table>
              <p> 
            </blockquote>
          </td>
          <td rowspan="8" valign="top">
            <table width="0%" border="1" cellspacing="2" cellpadding="2">
              <tr> 
                <td width="17%" valign="top"> 
                  <p><img src="Quacker1.jpg" width="200" height="142"></p>
                  <p>&nbsp;</p>
                  <p>&nbsp;</p>
                </td>
              </tr>
              <tr> 
                <td width="17%" valign="top"> 
                  <p><img src="Quacker2.jpg" width="200" height="203"></p>
                  <p>&nbsp;</p>
                  <p>&nbsp;</p>
                </td>
              </tr>
              <tr> 
                <td width="17%" valign="top"> 
                  <p><img src="Quacker3.jpg" width="200" height="150"></p>
                  <p>&nbsp;</p>
                  <p>&nbsp;</p>
                </td>
              </tr>
              <tr> 
                <td width="17%" valign="top"> 
                  <p><img src="prairie.jpg" width="200" height="123"></p>
                  <p>&nbsp;</p>
                  <p>&nbsp;</p>
                </td>
              </tr>
              <tr> 
                <td width="17%" valign="top"> 
                  <p><img src="garden.jpg" width="200" height="150"></p>
                  <p>&nbsp;</p>
                  <p>&nbsp;</p>
                </td>
              </tr>
              <tr> 
                <td valign="top"> 
                  <p><img src="water.jpg" width="200" height="166"></p>
                  <p>&nbsp;</p>
                  <p>&nbsp;</p>
                  <p>&nbsp;</p>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr> </tr>
        <tr> </tr>
        <tr> </tr>
        <tr> </tr>
        <tr> </tr>
      </table>
    </div>
    </body>
    </html>
    check the code for your big table for change... instead of one column I made two; the first column is your conent as was but the other one I've put the table with picture.

    this should rander properly on any browser now.
    Azizur Rahman
    Web Application Developer

  4. #4
    SitePoint Member
    Join Date
    Aug 2000
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help. It's working now.

    Jenni

  5. #5
    Captain Internet neil's Avatar
    Join Date
    Jun 2001
    Location
    n.ireland
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Better to include the text inside the table, something like <tr><td>text</td><td>image</td></tr> or you can <p><img align="right">text<br clear="all"></p> would do it too i guess.. width="0%" also is strange, did ya mean 100%?
    Working with two columns within a table...
    Code:
    <table>
      <tr>
        <td>
          <table width="100%" border="0" cellspacing="2" cellpadding="2">
            <tr> 
               <td bgcolor="#FFCC66"><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066">
    	   <b><i>In the Small, Small Pond</i> inspired the following activity:</b></font></td>
            </tr>
          </table>
          <font face="Arial, Verdana, Helvetica, sans-serif" color="#330066"><b>QUACKER EATS POND WATER ORGANISMS
    	<font size="2"><br></font></b></font><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">Bruce 
          Voigts, Wright County Conservation Educational Naturalist, brought Quacker, 
          a magnificent duck, to help teach the J.C. Bears about living things.* 
          Bruce also brought pond water samples containing; water boatman, dragon 
          fly larva, snails, duckweed, and cattail blades. Quacker ate them all, 
          but not before the water was placed in a glass dish and displayed on 
          the overhead to be projected by the light so the “living things” were 
          very large and easy to observe by the viewers.* </font></p>
          <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">Bruce 
          pointed out the interesting facts about the duckweed growing without 
          soil, the stages of life of the organisms moving around in the water, 
          and the very small microorganisms we observed under the microscope.</font></p>
          <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">When 
          all the objectives were presented and reviewed, Bruce brought out Quacker, 
          who entertained us by feasting on our lesson props!** “Living things 
          in the wild survive by preying on and eats smaller living things”, said Bruce.</font></p>
          <p><font face="Arial, Verdana, Helvetica, sans-serif" color="#330066" size="2">The 
          J.C. Bears learned about the life cycle of wetlands creatures. </font></p>
        </td>
        <td valign="top">
           <img src="Quacker1.jpg" width="200" height="142">
        </td>
      </tr>
    </table>


    <edit>maybe i should try refreshing before i post</edit>
    Last edited by neil; Mar 22, 2002 at 11:11.
    neil - Geocities, the trailer park of the web
    .<.<.<.<.<.<.<.<
    WEB[retype.net] + [guff.org]
    ICQ[273981] AIM[neiim]


Bookmarks

Posting Permissions

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