colspan & firefox

[redbullmarky]

hi all
i'm currently using FF 1.5 and recently noticed a problem whilst testing a page across browsers. basically i used the colspan attribute of a table as i had a header with two columns and the rows with two columns, only the columns were supposed to be independant.

[code]
<table width="500">
   <tr>
      <th colspan="2">Title</th>
      <th width="100">View All</th>
   </tr>
   <tr>
       <td width="75">Item 1</td>
       <td colspan="2">Details for item 1</td>
   </tr>
</table>
[/code]

and the idea was to draw, which worked fine in Opera, IE6, Safari, etc:

+===========+=====+
+--------------------+------------+
+--------------------+------------+
+=================+
+-------+-------------------------+
+-------+-------------------------+
+=================+

but on firefox, the result was:

+========+========+
+--------------+------------------+
+--------------+------------------+
+=================+
+--------------+------------------+
+--------------+------------------+
+=================+


has anyone else had this problem? any solutions? i've tried using fixed widths for all TD's, tried using CSS width instead of table properties' width, etc, but all to no avail.

Cheers
Mark

[Ninjakreborn]

I am having a severe problem with opera, I recently started visually testing my websites in the newest versions of internet explorer, firefox, netscape, and opera. With the help of 1 css hack, I found no other way around, I was able to fix all the problems in the first 3 but opera has a huge alignment problem, I was using floating divs, and it has a huge chunk of the content inside the logo. I am yet to find a solution if I find one I will try and help.

[redbullmarky]

[!--quoteo(post=373336:date=May 12 2006, 11:13 PM:name=businessman332211)--][div class=\'quotetop\']QUOTE(businessman332211 @ May 12 2006, 11:13 PM) [snapback]373336[/snapback][/div][div class=\'quotemain\'][!--quotec--]
I am having a severe problem with opera, I recently started visually testing my websites in the newest versions of internet explorer, firefox, netscape, and opera. With the help of 1 css hack, I found no other way around, I was able to fix all the problems in the first 3 but opera has a huge alignment problem, I was using floating divs, and it has a huge chunk of the content inside the logo. I am yet to find a solution if I find one I will try and help.
[/quote]

lovely, cheers. floating divs though i can understand as they work independantly of eachother. but tables - surely tables shouldn't be spitting out these issues without css hacks? it's not like i'm really doing anything overly complex here either. just a simple use of 'colspan'.

also very surprised that opera is giving you problems. i've actually found that (like safari on the mac) it sticks to the 'proper' rules, so if your code is clean and validates, opera shouldnt be messing you around like that.

cheers
Mark

[Ninjakreborn]

I am confused as to why this is happening, I am starting to hate browser incompatibilities.

[AndyB]

Couple of suggestions/observations.

#1 - if you change the th tags to td, does it work the same with all browsers. I know you probably want the th tags for their specific purpose so really I'm just interested in the result.

#2 - if I were a browser I'd be confused as well. Basically I'm told that I'm a table 500 pixels wide with three colums the widths of which should be 100 pixels and 75 pixels. There's an obvious problem there which apparently 3 browsers resolve one way and the fourth browser resolves a different way.

I wonder is a sleazy workaround using width="100%" for the columns without width specified would do anything useful:
[code]<table width="500">
   <tr>
      <th colspan="2" width="100%">Title</th>
      <th width="100">View All</th>
   </tr>
   <tr>
       <td width="75">Item 1</td>
       <td colspan="2" width="100%">Details for item 1</td>
   </tr>
</table>[/code]

[redbullmarky]

hi andy
i'll give your 100% suggestion a go and report back. in terms of your first question though - yes, the same happens when using TD instead of TH.

anyway i'll let you know
cheers
Mark

[redbullmarky]

ok i tried your suggestion - didnt work. seemed the 100% had priority over my fixed widths. so i changed it and set the width of the table to 500, and the column widths on the two rows to 450 and 50 and 50 and 450 respectively - that didnt work either.

i have now tried this on FF on my mac (1.5) as well as Camino also on my Mac - both variations of the same browser - and yep, same problem on both. However, Safari, Opera and even the lowly-why-did-they-even-bother IE5.2, all on the mac, display it exactly how i want it.

here's the simple code:

[a href=\"http://www.thedinnertimes.com/_tests/tabletest.php\" target=\"_blank\"]http://www.thedinnertimes.com/_tests/tabletest.php[/a]

cheers

[AndyB]

When all else fails ... if this works I'll claim someone else posted it because I never use spacer gifs [img src=\"style_emoticons/[#EMO_DIR#]/unsure.gif\" style=\"vertical-align:middle\" emoid=\":unsure:\" border=\"0\" alt=\"unsure.gif\" /]

[code]<table width="500" border="1">
   <tr>
      <th colspan="2">Title</th>
      <th width="100">View All</th>
   </tr>
   <tr>
       <td width="75">Item 1</td>
       <td colspan="2">Details for item 1</td>
   </tr>
<!--spacer.gif - AAARRRGGH->
<tr>
<td><img src="spacer.gif" height="1" width="75" alt=""></td>
<td><img src="spacer.gif" height="1" width="325" alt=""></td>
<td><img src="spacer.gif" height="1" width="100" alt=""></td>
</tr>
<!--end horrid work-around-->
</table>[/code]

[redbullmarky]

[!--quoteo(post=373721:date=May 14 2006, 01:57 PM:name=AndyB)--][div class=\'quotetop\']QUOTE(AndyB @ May 14 2006, 01:57 PM) [snapback]373721[/snapback][/div][div class=\'quotemain\'][!--quotec--]
When all else fails ... if this works I'll claim someone else posted it because I never use spacer gifs [img src=\"style_emoticons/[#EMO_DIR#]/unsure.gif\" style=\"vertical-align:middle\" emoid=\":unsure:\" border=\"0\" alt=\"unsure.gif\" /]

[code]<table width="500" border="1">
   <tr>
      <th colspan="2">Title</th>
      <th width="100">View All</th>
   </tr>
   <tr>
       <td width="75">Item 1</td>
       <td colspan="2">Details for item 1</td>
   </tr>
<!--spacer.gif - AAARRRGGH->
<tr>
<td><img src="spacer.gif" height="1" width="75" alt=""></td>
<td><img src="spacer.gif" height="1" width="325" alt=""></td>
<td><img src="spacer.gif" height="1" width="100" alt=""></td>
</tr>
<!--end horrid work-around-->
</table>[/code]
[/quote]

funnily enough my workaround was similar, but this looks abit better to be honest until i find another way... i actually had a table footer with <tfoot id="colspanfix"> containing 3 <td>'s and javascript set it's height to 0 and its overflow to hidden if on FF, and that set it's 'display' property to 'hidden' if on other browsers. it worked, but this way you've shown seems alot more practical.
i'll give it a go and see how it goes - cheers Andy!

if anyone knows if this is a know FF bug tho, please let me know

cheers

Mark

[Ninjakreborn]

I only have problems in ie, but not as many as that opera.

[redbullmarky]

[!--quoteo(post=373746:date=May 14 2006, 04:00 PM:name=businessman332211)--][div class=\'quotetop\']QUOTE(businessman332211 @ May 14 2006, 04:00 PM) [snapback]373746[/snapback][/div][div class=\'quotemain\'][!--quotec--]
I only have problems in ie, but not as many as that opera.
[/quote]

if anything - getting your site working properly in opera (pc+mac) and Safari (mac) is a testament to your ability to code correct, valid (w3c) code. it's not like they requre botched up workarounds like some other browsers do to get things working as they should be.