Jump to content

colspan & firefox


redbullmarky

Recommended Posts

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
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

[!--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
Link to comment
Share on other sites

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]
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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]
Link to comment
Share on other sites

[!--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
Link to comment
Share on other sites

[!--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.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.