...

View Full Version : Table Width Problems - IE



Brooxy28
02-20-2008, 12:04 PM
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).


<!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.

effpeetee
02-20-2008, 02:40 PM
Try this code.:D
It's not perfect or validated, but it may help.

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



<!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>

Actinia
02-20-2008, 03:07 PM
Try removing the inline style from the inner table and adding the following style in the head:

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

Andrew Johnson
02-20-2008, 03:33 PM
Try redoing it with div's instead of tables if you want your site to load faster...

Brooxy28
02-21-2008, 03:01 AM
Try removing the inline style from the inner table and adding the following style in the head:

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. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum