Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Table Width Problems - IE

    Okay, so here is my problem.

    I have set the table width of the whole page to 1000px, using the <style> tag (a requirement). This is highlighted in red.

    But I've created a table within this table which only needs to be 800px wide. What happened originally was it would automatically go to 1000px, overriding the 800px width constraint I placed on it.

    However, I have fixed this problem in Firefox, by adding style="width:inherit", but this doesn't seem to solve the problem in IE (still goes to 1000px).

    I'm about 90% sure the code I inserted above is the wrong code, but left it because it seemed to solve my problem in Firefox, and then obviously IE has forced me to change it.

    How do I override the 1000px table width I set in the header, with the 800px needed in the other table??

    (Yes, I do realise it would just be 10x easier to set the width of them individually, but unfortunately setting the 1000px in the header is a requirement).

    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>
    <title>Joe's Fruit Shop - Produce</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    body {background-color: #CCFFCC; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px}
    h1 {text-align: center; font-size: 48px; font-family:Verdana, Arial, Helvetica, sans-serif;}
    table {width: 1000px;}
    .bottomlinks {font-size: 10px}
    </style>
    </head>
    
    <body>
    <table border="0">
    <tr>
    <td height="120" colspan="2"><div align="center"><img src="images/joes_header.jpg" align="middle" title="Joe's Fruit Shop" alt="Joe's Fruit Shop" width="482" height="42" /></div></td>
    </tr>
    <tr valign="top">
    <td width="200" valign=”top”>
    <div align="center">
      <p><a href="home.html"><img src="Images/berry01_red.gif" alt="Home" title="Home Berry" width="22" height="20" border="0" /></a></p>
      <p><a href="home.html">Home</a></p>
      <p>&nbsp;</p>
      <p><img src="Images/berry01_red.gif" alt="Produce" title="Produce Berry" width="22" height="20" border="0" /></p>
      <p>Produce</p>
      <p>&nbsp;</p>
      <p><a href="history.html"><img src="Images/berry01_red.gif" alt="History" title="History Berry" width="22" height="20" border="0" /></a></p>
      <p><a href="history.html">History</a></p>
    </div></td>
    <td width="800" valign=”top”>
      <p align="center">
      <h1>All Produce at Joe's</h1>
      </p>
        <p>Benefits           of shopping at Joe's online:</p>
        <ul>
          <li>It's convenient because the website is available 24 hours per day</li>
          <li>You don't have to leave home to have the best produce available</li>
          <li>Your phone call to order produce is free</li>
          </ul>
        <p>The following table provides a current list of all the fruit and vegetables available at Joe's:</p>
        <hr>
        <div>
    <table style="width:inherit" width="800" border="1" cellpadding="3">
      <tr>
        <td width="400">Alfalfa Sprouts</td>
        <td width="400">$1.50 per punnet</td>
      </tr>
      <tr>
        <td>Apples, Royal Gala</td>
        <td>$4.99 per kg</td>
      </tr>
      <tr>
        <td>Avocado</td>
        <td>$1.65 each</td>
      </tr>
      <tr>
        <td>Bananas</td>
        <td>$10.99 per kg</td>
      </tr>
      <tr>
        <td>Beans</td>
        <td>$3.98 per 250g pack</td>
      </tr>
      <tr>
        <td>Broccoli</td>
        <td>$4.99 per kg</td>
      </tr>
      <tr>
        <td>Cabbage, Half</td>
        <td>$1.95 each</td>
      </tr>
      <tr>
        <td>Capsicum, Red</td>
        <td>$6.49 per kg</td>
      </tr>
      <tr>
        <td>Capsicum, Green</td>
        <td>$4.49 per kg</td>
      </tr>
      <tr>
        <td>Carrots</td>
        <td>$0.95 per 1kg bag</td>
      </tr>
      <tr>
        <td>Cauliflour, Whole</td>
        <td>$3.65 each</td>
      </tr>
      <tr>
        <td>Celery Bunch</td>
        <td>$3.25 each</td>
      </tr>
      <tr>
        <td>Cucumber, Continental</td>
        <td>$2.95 each</td>
      </tr>
      <tr>
        <td>Garlic</td>
        <td>$3.95 per bag</td>
      </tr>
      <tr>
        <td>Kiwi Fruit</td>
        <td>$2.00 per 4</td>
      </tr>
      <tr>
        <td>Lettuce, Iceberg</td>
        <td>$1.95 each</td>
      </tr>
      <tr>
        <td>Mushrooms</td>
        <td>$7.99 per kg</td>
      </tr>
      <tr>
        <td>Onions</td>
        <td>$2.99 per kg</td>
      </tr>
      <tr>
        <td>Oranges, Navel</td>
        <td>$1.49 per kg</td>
      </tr>
      <tr>
        <td>Pears</td>
        <td>$3.99 per kg</td>
      </tr>
      <tr>
        <td>Potatoes</td>
        <td>$2.49 per kg</td>
      </tr>
      <tr>
        <td>Pumpkin, Butternut</td>
        <td>$0.99 per kg</td>
      </tr>
      <tr>
        <td>Spinach, Bunch</td>
        <td>$4.99 each</td>
      </tr>
      <tr>
        <td>Strawberries</td>
        <td>$3.95 per punnet</td>
      </tr>
      <tr>
        <td>Sweet Potatoes</td>
        <td>$2.99 per kg</td>
      </tr>
      <tr>
        <td>Tomatoes</td>
        <td>$3.99 per kg</td>
      </tr>
      <tr>
        <td>Watermelon</td>
        <td>$0.99 per kg</td>
      </tr>
      <tr>
        <td>Zucchini</td>
        <td>$7.99 per kg</td>
      </tr>
    </table>
        </div>
    <hr>
        <div style=”style definition;”>
        <div align="center" class="bottomlinks"><a href="copyright.html" target="_blank">Copyright</a> | <a href="privacy.html" target="_blank">Privacy</a></div>
      </div> </td>
    </tr>
    </table>
    </body>
    </html>
    Thanks.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try this code.
    It's not perfect or validated, but it may help.

    EDIT <style> should be <style type="text/css">
    Frank


    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>
    <title>Joe's Fruit Shop - Produce</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
    body {background-color: #CCFFCC; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px}
    h1 {text-align: center; font-size: 48px; font-family:Verdana, Arial, Helvetica, sans-serif;}
    #table {width: 1000px;}
    .bottomlinks {font-size: 10px}
    </style>
    </head>
    
    <body>
    <table border="0">
    <tr>
    <td height="120" colspan="2"><div align="center"><img src="images/joes_header.jpg" align="middle" title="Joe's Fruit Shop" alt="Joe's Fruit Shop" width="482" height="42" /></div></td>
    </tr>
    <tr valign="top">
    <td width="200" valign="top">
    <div align="center">
      <p><a href="home.html"><img src="Images/berry01_red.gif" alt="Home" title="Home Berry" width="22" height="20" border="0" /></a></p>
      <p><a href="home.html">Home</a></p>
      <p>&nbsp;</p>
      <p><img src="Images/berry01_red.gif" alt="Produce" title="Produce Berry" width="22" height="20" border="0" /></p>
      <p>Produce</p>
      <p>&nbsp;</p>
      <p><a href="history.html"><img src="Images/berry01_red.gif" alt="History" title="History Berry" width="22" height="20" border="0" /></a></p>
      <p><a href="history.html">History</a></p>
    </div></td>
    <td width="800" valign="top">
      <p align="center">
      <h1>All Produce at Joe's</h1>
      </p>
        <p>Benefits           of shopping at Joe's online:</p>
        <ul>
          <li>It's convenient because the website is available 24 hours per day</li>
          <li>You don't have to leave home to have the best produce available</li>
          <li>Your phone call to order produce is free</li>
          </ul>
        <p>The following table provides a current list of all the fruit and vegetables available at Joe's:</p>
        <hr>
        <div id="table">
    <table style="width:inherit" width="800" border="1" cellpadding="3">
      <tr>
        <td width="400">Alfalfa Sprouts</td>
        <td width="400">$1.50 per punnet</td>
      </tr>
      <tr>
        <td>Apples, Royal Gala</td>
        <td>$4.99 per kg</td>
      </tr>
      <tr>
        <td>Avocado</td>
        <td>$1.65 each</td>
      </tr>
      <tr>
        <td>Bananas</td>
        <td>$10.99 per kg</td>
      </tr>
      <tr>
        <td>Beans</td>
        <td>$3.98 per 250g pack</td>
      </tr>
      <tr>
        <td>Broccoli</td>
        <td>$4.99 per kg</td>
      </tr>
      <tr>
        <td>Cabbage, Half</td>
        <td>$1.95 each</td>
      </tr>
      <tr>
        <td>Capsicum, Red</td>
        <td>$6.49 per kg</td>
      </tr>
      <tr>
        <td>Capsicum, Green</td>
        <td>$4.49 per kg</td>
      </tr>
      <tr>
        <td>Carrots</td>
        <td>$0.95 per 1kg bag</td>
      </tr>
      <tr>
        <td>Cauliflour, Whole</td>
        <td>$3.65 each</td>
      </tr>
      <tr>
        <td>Celery Bunch</td>
        <td>$3.25 each</td>
      </tr>
      <tr>
        <td>Cucumber, Continental</td>
        <td>$2.95 each</td>
      </tr>
      <tr>
        <td>Garlic</td>
        <td>$3.95 per bag</td>
      </tr>
      <tr>
        <td>Kiwi Fruit</td>
        <td>$2.00 per 4</td>
      </tr>
      <tr>
        <td>Lettuce, Iceberg</td>
        <td>$1.95 each</td>
      </tr>
      <tr>
        <td>Mushrooms</td>
        <td>$7.99 per kg</td>
      </tr>
      <tr>
        <td>Onions</td>
        <td>$2.99 per kg</td>
      </tr>
      <tr>
        <td>Oranges, Navel</td>
        <td>$1.49 per kg</td>
      </tr>
      <tr>
        <td>Pears</td>
        <td>$3.99 per kg</td>
      </tr>
      <tr>
        <td>Potatoes</td>
        <td>$2.49 per kg</td>
      </tr>
      <tr>
        <td>Pumpkin, Butternut</td>
        <td>$0.99 per kg</td>
      </tr>
      <tr>
        <td>Spinach, Bunch</td>
        <td>$4.99 each</td>
      </tr>
      <tr>
        <td>Strawberries</td>
        <td>$3.95 per punnet</td>
      </tr>
      <tr>
        <td>Sweet Potatoes</td>
        <td>$2.99 per kg</td>
      </tr>
      <tr>
        <td>Tomatoes</td>
        <td>$3.99 per kg</td>
      </tr>
      <tr>
        <td>Watermelon</td>
        <td>$0.99 per kg</td>
      </tr>
      <tr>
        <td>Zucchini</td>
        <td>$7.99 per kg</td>
      </tr>
    </table>
        </div>
    <hr>
        <div style="style definition;">
        <div align="center" class="bottomlinks"><a href="copyright.html" target="_blank">Copyright</a> | <a href="privacy.html" target="_blank">Privacy</a></div>
      </div> </td>
    </tr>
    </table>
    </body>
    </html>
    Last edited by effpeetee; 02-21-2008 at 03:39 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    Try removing the inline style from the inner table and adding the following style in the head:
    Code:
    table table { width: 800px; }
    This looks OK to me in FF, and IE6, but I'm not sure what it is supposed to look like.

    J

  • Users who have thanked Actinia for this post:

    Brooxy28 (02-21-2008)

  • #4
    Banned
    Join Date
    Feb 2008
    Location
    Winnipeg, Canada
    Posts
    396
    Thanks
    0
    Thanked 29 Times in 29 Posts
    Try redoing it with div's instead of tables if you want your site to load faster...

  • #5
    New Coder
    Join Date
    Feb 2008
    Posts
    23
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Actinia View Post
    Try removing the inline style from the inner table and adding the following style in the head:
    Code:
    table table { width: 800px; }
    This looks OK to me in FF, and IE6, but I'm not sure what it is supposed to look like.

    J
    Brilliant.


  •  

    Posting Permissions

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