NARKOZ 25

Have a problem with table compatibility on Internet Explorer 7.

IE7 Screenshoot

See how it looks in other browsers (Seamonkey, IE8 ...)

I use doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Here is my code (with some php addins):

    <form action="users_area.php?page=about_us&section=edit" method="POST">
<table width="100%" border="0" cellpadding="3" cellspacing="2" class="border">
    <tr>
      <td colspan="2" class="c7"><b>
         <?=MSG_MM_ABOUT_ME_PAGE;?>
         </b></td>
   </tr>
    <tr class="c1">
      <td colspan="2"><?=MSG_ABOUT_ME_PAGE_EXPL;?></td>
   </tr>
    <tr>
      <td colspan="2"><b>
         <?=MSG_STORE_STATUS;?>
         </b>:
         <?=$shop_status['display'];?></td>
   </tr>
   <tr class="c5">
      <td><img src="themes/<?=$setts['default_theme'];?>/img/pixel.gif" width="150" height="1"></td>
      <td width="100%"><img src="themes/<?=$setts['default_theme'];?>/img/pixel.gif" width="1" height="1"></td>
   </tr>
    <tr class="c1">
      <td align="right"><?=MSG_ENABLE_ABOUT_ME_PAGE;?></td>
      <td><input name="enable_aboutme_page" type="checkbox" id="enable_aboutme_page" value="1" <? echo ($user_details['enable_aboutme_page']) ? 'checked' : ''; ?>></td>
   </tr>
    <tr class="c1">
      <td align="right"><?=MSG_ABOUT_ME_PAGE_CONTENT;?></td>
      <td><textarea id="aboutme_page_content" name="aboutme_page_content" style="width: 400px; height: 200px; overflow: hidden;"><?=$user_details['aboutme_page_content'];?></textarea>
            <script>
                var oEdit_1 = new InnovaEditor("oEdit_1");
                oEdit_1.width="100%";//You can also use %, for example: oEdit1.width="100%"
                oEdit_1.height=250;
                oEdit_1.REPLACE("aboutme_page_content");//Specify the id of the textarea here
            </script></td>
   </tr>
      <tr class="c5">
         <td><img src="themes/<?=$setts['default_theme'];?>/img/pixel.gif" width="150" height="1"></td>
         <td width="100%"><img src="themes/<?=$setts['default_theme'];?>/img/pixel.gif" width="1" height="1"></td>
   </tr>
    <tr>
      <td colspan="2"><input type="submit" name="form_aboutme_save" value="<?=GMSG_PROCEED;?>" /></td>
   </tr>
</table>
</form>

I know it's ie box-model bug, I also tried to use table-layout:fixed in CSS but it didn't help.

1 answer

1
point
This was chosen as the best answer

I do not think it is an issue with the tables, if you notice, IE seems to show more tools than other browsers. Also, a td with width 100% will try to occupy the entire space of the table, you either should not specify a width, or if you do, specify the width in pixels.

Answered over 7 years ago by Divya Manian
  • I know that it isn't the best solution, but I removed some wisawig editor buttons from javascript source. Thanks. NARKOZ over 7 years ago