4 Replies Latest reply on May 21, 2010 12:52 PM by Jim Brasil

    Height:100%; float:left or right - Display problem in Dreamweaver

    Jim Brasil
      
      
      
      



       

      I If I place any  image (ie 300 x 300) in a DW page with a height:100%; float:left or  right  inside a div with a set height:4em, the image will display at  300x300 falling outside  of the div in DW.

      Opening the  same page  in a browser the image displays as it should, shrinking and  floating inside the div.

       

       

      If I set the same  image with a height:4em; float:left or right,  it displays correctly   inside the div in both DW  or a browser.

       

       

      This is the  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>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
      <title> dw Error</title>
       
      <style type="text/css">

      #box{ height:4em;
      background-color:#553c35;
      color:#f4dec8;
      text-align:center}

      </style>

      </head>

      <body>

      <!-- Beginning  of box div -->

      <div id="box"> 

      <img src="../../../../../images/clip_image001_0000.gif"  alt="baseball"      

      style="height:4em;float:left" />
         <!--This image will display  correctly  in DW and a Browser -->


      <img src="../../../../../images/clip_image001_0000.gif"  alt="baseball"
         style="height:100%; float:right " />
      <!-— This image displays incorrectly in DW and correctly in a browser  -->



      <h1> This does not display correctly in DW It does display ok in a  browser</h1>


      </div> <!-- End of box div -->

      </body>

      </html>