# Table cell width problem in FF



## inthecloset (Jan 8, 2009)

I have a problem that I see discussed all over the web, but never quite matching mine. I have a simple web page with a table, and I have the first column set for 21%. This works fine in IE, but not in FF. I think the problem is rooted in the fact that I've done some funky things with the table. The pic below shows what I mean.










The grid of the table is broken up, so that the first cell in the top row is wider than the first cell in the 2nd row. There is a graphic in the top left cell that runs longer than the 1st column below it. This works fine in IE, but FF stretches out the 1st column to the width of the graphic in the top left cell. I don't know why it does this or how to avoid it.

Any help is appreciated. Thanks.


----------



## tomdkat (May 6, 2006)

Could you post the HTML for the table defintion AND the DOCTYPE of the HTML page?

Peace...


----------



## inthecloset (Jan 8, 2009)

Sorry about that:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

.......................................

[TR][TD]





























> Home
> 
> Walk
> 
> ...


 




> *
> 
> ...text...
> 
> *


*










*
*
[TD] [/TD]
*
*
**
[/TD][/TR]*


----------



## tomdkat (May 6, 2006)

I see you're nesting tables. Can you post the "parent" table to the above nested table? Please post both the "parent" and the nested tables together so I can see if the parent table has any special cell attributes.

Thanks!

Peace...


----------



## inthecloset (Jan 8, 2009)

You know, I'm actually not nesting tables. I copied everything between & . I do see the td & tr lines that I think you're referring to though, and I don't know why they'd be there because I created the table in Dreamweaver in the wysiwyg window.

(Just to help your troubleshooting, I'm fairly new to this)


----------



## tomdkat (May 6, 2006)

Here is a test case that shows how to nest the tables to have different "perceived" column widths:

```
<!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 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
  <title>Table</title>
</head>
<body>
<table style="text-align: left; width: 100%; height: 200px;"
 border="5" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td align="undefined" valign="undefined">
      <table
 style="text-align: left; background-color: rgb(153, 153, 153); width: 100%; height: 100%;"
 border="2" cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td style="width: 60%;">Table #1</td>
            <td align="undefined" valign="undefined"></td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
    <tr>
      <td align="undefined" valign="undefined">
      <table
 style="text-align: left; background-color: rgb(153, 153, 0); width: 100%; height: 100%;"
 border="2" cellpadding="2" cellspacing="2">
        <tbody>
          <tr>
            <td style="width: 21%;">Table #2</td>
            <td align="undefined" valign="undefined"></td>
          </tr>
        </tbody>
      </table>
      </td>
    </tr>
  </tbody>
</table>
<br />
</body>
</html>
```
 Please do post your parent table HTML so I can see what else is going on.

Peace...


----------



## inthecloset (Jan 8, 2009)

I removed the td & tr tags from top and bottom, to see if it changed anything, but it didn't. I really don't know why they were there, whether it was some quirk of the wysiwyg or something I did.


----------



## tomdkat (May 6, 2006)

inthecloset said:


> I do see the td & tr lines that I think you're referring to though, and I don't know why they'd be there because I created the table in Dreamweaver in the wysiwyg window.


Thanks for the update.

I somehow managed to come up with some HTML that does what you want:

```
<!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 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type" />
  <title>Table #2</title>
</head>
<body>
<table style="text-align: left; width: 100%;" border="5"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="background-color: rgb(219, 219, 183);"
 colspan="2">
      <p>Cell #1</p>
      </td>
      <td style="background-color: rgb(255, 102, 102);"
 colspan="2">
      <p>Cell #2</p>
      </td>
    </tr>
    <tr>
      <td style="width: 21%; background-color: rgb(153, 0, 0);">
      <p>Cell #1</p>
      </td>
      <td style="background-color: rgb(255, 204, 0);"
 colspan="2">
      <p>Celll #2</p>
      </td>
      <td style="width: 28%; background-color: rgb(51, 102, 102);">
      <p>Cell #3</p>
      </td>
    </tr>
  </tbody>
</table>
<br />
</body>
</html>
```
Maybe using the CSS styling for the table cells is the key. The above works in IE7, Firefox 3.0.6, and Opera 10 alpha on Windows XP.

Peace...


----------



## inthecloset (Jan 8, 2009)

Here's my dilemma: When I start with the table...










and then add the graphic...










it looks great in IE...










but in FF the cell beneath it is stretched out...










I'm sure I'm not doing it the standard way, but I'm using that dark red cell as a menu cell for links to other pages, and the cell to the right (the yellow one) will hold text -- the site blurb. I can't see why it'd work in IE and not FF.


----------



## inthecloset (Jan 8, 2009)

One workaround I just found is simply merging the top two cells. However, I'd split that row so that I could make the "title graphic" left aligned and a graphic in the pink cell right aligned, putting them in opposite corners in a way that would accomodate different resolutions. When I merge the cells, I don't see how to split the alignment.


----------



## tomdkat (May 6, 2006)

It also works fine in Opera 10 alpha but Safari and Google Chrome exhibit behavior similar to Firefox.

So, I'm gonna ask about this on MozillaZine and see if I can get an answer. 

Peace...


----------



## tomdkat (May 6, 2006)

Ok, I did get an answer to my inquiry about Firefox but the responder didn't know why his solution was needed.

Using your workaround as a start, I came up with this:

```
<!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 content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
  <title>Table #2</title>
</head>

<body>

<table style="text-align: left; width: 100%;" border="5" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
[b][color=red]      <td colspan="4"><img style="border: 1px solid ; width: 400px; height: 200px; float: left;" alt="Left image" src="table-img.jpg" /><img style="border: 1px solid ; width: 446px; height: 200px; float: right;" alt="Right image" src="Celebrities.jpg" /></td>[/color][/b]
    </tr>

    <tr>
      <td style="background-color: rgb(153, 0, 0); width: 21%;">
      <p>Cell #1</p>
      </td>
      <td style="background-color: rgb(255, 204, 0); width: 51%;" colspan="2">
      <p>Celll #2</p>
      </td>
      <td style="width: 28%; background-color: rgb(51, 102, 102);">
      <p>Cell #3</p>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>
```
The two images in the first row are floated to the left and right, which should accomplish what you want.

Peace...


----------



## inthecloset (Jan 8, 2009)

That did it! Thanks very much. I have much to learn of the mysteries of html.


----------



## tomdkat (May 6, 2006)

Glad that worked for you. Would it be possible or feasible to not use a table-based layout for your site? A CSS layout would be more flexible, in this regard, and a more modern approach to web design.

Just something to think about. 

Peace...


----------



## inthecloset (Jan 8, 2009)

Ya, I agree. I just need to become more familiar with CSS, and this was a "I need it yesterday" (actual quote) thing. So I flung it together with what little I knew, figuring I can improve it afterward.

Thanks for all the help. I'll probably be back as I work through the CSS.


----------

