1 Reply Latest reply on Jul 23, 2008 5:34 PM by Newsgroup_User

    Browserproblem or what?

    astor6135
      I am working in tables and have made HTML-page wich is OK in the working area.. but not in the browser.
      In the bottom of the table there are three cells contaning images. Above, there is a text area and in the left top there is a image wherer with textflow.
      In the browser, one of the columns are incorrect because of the image in the text block. Can anybody help me to find the reason and correct the problem?


      See attached code and this link: http://www.mediafactory.se/temp/index.htm

      /arne
        • 1. Re: Browserproblem or what?
          Level 7
          Hello,

          It isn't a browser problem, it's the use of rowspans and colspans.
          Did you make this in layout mode? If so, it creates a fragile layout causing
          one of the problems you are experiencing.
          It's so bad DW is dropping it from future versions.
          Either way, you should use tables and nested tables and not merge rows.
          More info, with some graphic examples of the trouble spans cause:
          http://apptools.com/rants/spans.php

          For the image of the house, you could simply float that left using CSS
          instead of putting it in a table cell with part of the text in that cell and
          the rest in the merged cell below it. The text will then "wrap" around it.
          http://css.maxdesign.com.au/floatutorial/

          Table height is invalid HTML, so you should get rid of that.Let the content
          determine the height.

          Use CSS to apply the images to the background of the table cells at the
          bottom, instead of using background="image.jpg" in the TD tag.
          With CSS you can set the image to not repeat, as it does now when text is
          enlarged, and you can also center it.
          More info:
          http://www.w3schools.com/css/css_background.asp


          Hope this helps.

          Take care,
          Tim


          "astor6135" <webforumsuser@macromedia.com> wrote in message
          news:g67r1k$ltl$1@forums.macromedia.com...
          >I am working in tables and have made HTML-page wich is OK in the working
          >area..
          > but not in the browser.
          > In the bottom of the table there are three cells contaning images. Above,
          > there is a text area and in the left top there is a image wherer with
          > textflow.
          > In the browser, one of the columns are incorrect because of the image in
          > the
          > text block. Can anybody help me to find the reason and correct the
          > problem?
          >
          >
          > See attached code and this link:
          > http://www.mediafactory.se/temp/index.htm
          >
          > /arne
          >
          > <!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=iso-8859-1" />
          > <title>Untitled Document</title>
          > <style type="text/css">
          > <!--
          > .style1 {font-family: Arial, Helvetica, sans-serif}
          > #Layer1 {
          > position:absolute;
          > left:344px;
          > top:124px;
          > width:189px;
          > height:162px;
          > z-index:1;
          > }
          > #Layer2 {
          > position:absolute;
          > left:561px;
          > top:122px;
          > width:246px;
          > height:163px;
          > z-index:2;
          > }
          > #Layer3 {
          > position:absolute;
          > left:349px;
          > top:564px;
          > width:153px;
          > height:150px;
          > z-index:3;
          > }
          > #Layer4 {
          > position:absolute;
          > left:504px;
          > top:376px;
          > width:146px;
          > height:139px;
          > z-index:4;
          > }
          > #Layer5 {
          > position:absolute;
          > left:662px;
          > top:562px;
          > width:142px;
          > height:152px;
          > z-index:5;
          > }
          > .style3 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
          > #Layer6 {
          > position:absolute;
          > left:568px;
          > top:119px;
          > width:235px;
          > height:105px;
          > z-index:1;
          > }
          > #Layer7 {
          > position:absolute;
          > left:347px;
          > top:234px;
          > width:456px;
          > height:163px;
          > z-index:2;
          > }
          > -->
          > </style>
          > </head>
          >
          > <body>
          > <table width="656" height="732" border="1" align="center">
          > <tr>
          > <td height="71" colspan="4" bgcolor="#666666"> </td>
          > </tr>
          > <tr>
          > <td width="168" height="23"><div align="center">MENY</div></td>
          > <td colspan="3"><div align="center" class="style1">V&auml;lkommen till
          > V&auml;rmek&auml;llan i G&ouml;teborg </div></td>
          > </tr>
          > <tr>
          > <td height="174" background="menu.jpg"> </td>
          > <td colspan="3" rowspan="3" align="left" valign="top"><p><img
          > src="house.jpg" width="211" height="136" hspace="5" vspace="5"
          > align="left" />
          > <span class="style3">kjlkj
          > dfgdf dfg sdfgsdfgsdfg sdfgsdfgsdf gdfgsd fgsdf gsdf gsdfg
          > dfdfvdfdfvdfdsfdfvsdfgdfgdfgsdfgsd
          > fgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsd
          > dfg sdf gsd fgs dfgs dfg sdf gsd fg sdfg sdf gs dfgs df gs df gsd fg sd fg
          > sd
          > fg sd fg sdf gs dfg sdf gsd fg sdf gsd fgs dfg sdf gs dfg sdf gsd fg sdfg
          > sdf
          > gsd fg sdfg sdf gs dfg sdf gs dfg sd s dfg sdf g sdfg sdf gsd fg sdf gsd
          > fg sdf
          > gs dfg sdf gsd fg sdf gsd gfs dfg sdf gsd fg sdf gsd fgs dfg sdf gsd fg
          > sdfg sd
          > gf dfgsdfgsdsdfgsdf sdfsdfgsdf gsdfg sdfg sdfg sdfg sdf gsdf gsdfg sdfg
          > sdfg
          > sdf sdfg sdf gsdfg sdfg sdfgsdf sdfg sdfgsdfgsdf sdfgs dfg sdfg sdfg sdfg
          > sdfg
          > sdfgsd fgsdf gsd fgsdfg sdf gsdfgsdfg sdfgsdfgsdf sdfg sdfg sdfg sdfgsd
          > sdf g
          > fd gsdfgsdfgsdfgsdfg sdfgsdf gsdfg sdfgsdf gsdfgsd fsdfg sd fsdf gsdf gsdf
          > gsdf
          > gsdfgsd fgsdf gsd fsdfgsd fgsdfg sdfg sdfg sdf sdfg sdfg sdfg
          > sdf -</span></p>
          > <p class="style3">sd fgsdfgsdsfdg sdfgsdfgs dfgsd fgsdf gsdfg sdfg
          > sdf
          > gsdfg sdf gsdfsd fsdfg sdf sdfg sdfg sdf sdfg sdfgs dfg sdf gsdfg sdfg
          > sdfg
          > sdfg sd </p>
          > <p> </p></td>
          > </tr>
          > <tr>
          > <td height="175" background="left_image.jpg"> </td>
          > </tr>
          > <tr>
          > <td height="61"> </td>
          > </tr>
          > <tr>
          > <td height="168" rowspan="2"> </td>
          > <td width="157" height="25" nowrap="nowrap" bgcolor="#FFFF80"><div
          > align="center" class="style3">V&aring;ra produkter </div></td>
          > <td width="154" bgcolor="#FFFF80"><div align="center"
          > class="style3">Service</div></td>
          > <td width="149" bgcolor="#FFFF80"><div align="center"
          > class="style3">Certifiering</div></td>
          > </tr>
          > <tr>
          > <td height="154" align="center" nowrap="nowrap"
          > background="image_152.jpg"> </td>
          > <td width="154" align="center" valign="middle"
          > background="vk_logga_152.jpg"> </td>
          > <td background="certified.jpg"> </td>
          > </tr>
          > <tr>
          > <td height="29" colspan="4" bgcolor="#999999"> </td>
          > </tr>
          > </table>
          > </body>
          > </html>
          >