Jump to content


Photo

colspan & firefox


  • Please log in to reply
10 replies to this topic

#1 redbullmarky

redbullmarky
  • Staff Alumni
  • Advanced Member
  • 2,863 posts
  • LocationBedfordshire, England

Posted 12 May 2006 - 09:52 PM

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.

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

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
"you have to keep pissing in the wind to learn how to keep your shoes dry..."

I say old chap, that is rather amusing!

#2 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 12 May 2006 - 10:13 PM

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.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#3 redbullmarky

redbullmarky
  • Staff Alumni
  • Advanced Member
  • 2,863 posts
  • LocationBedfordshire, England

Posted 12 May 2006 - 10:18 PM

[!--quoteo(post=373336:date=May 12 2006, 11:13 PM:name=businessman332211)--][div class=\'quotetop\']QUOTE(businessman332211 @ May 12 2006, 11:13 PM) View Post[/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
"you have to keep pissing in the wind to learn how to keep your shoes dry..."

I say old chap, that is rather amusing!

#4 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 12 May 2006 - 10:22 PM

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

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#5 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 13 May 2006 - 01:16 AM

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

Legend has it that reading the manual never killed anyone.
My site

#6 redbullmarky

redbullmarky
  • Staff Alumni
  • Advanced Member
  • 2,863 posts
  • LocationBedfordshire, England

Posted 14 May 2006 - 08:33 AM

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
"you have to keep pissing in the wind to learn how to keep your shoes dry..."

I say old chap, that is rather amusing!

#7 redbullmarky

redbullmarky
  • Staff Alumni
  • Advanced Member
  • 2,863 posts
  • LocationBedfordshire, England

Posted 14 May 2006 - 08:44 AM

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

"you have to keep pissing in the wind to learn how to keep your shoes dry..."

I say old chap, that is rather amusing!

#8 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 14 May 2006 - 12:57 PM

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\" /]

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

Legend has it that reading the manual never killed anyone.
My site

#9 redbullmarky

redbullmarky
  • Staff Alumni
  • Advanced Member
  • 2,863 posts
  • LocationBedfordshire, England

Posted 14 May 2006 - 01:37 PM

[!--quoteo(post=373721:date=May 14 2006, 01:57 PM:name=AndyB)--][div class=\'quotetop\']QUOTE(AndyB @ May 14 2006, 01:57 PM) View Post[/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\" /]

<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>
[/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
"you have to keep pissing in the wind to learn how to keep your shoes dry..."

I say old chap, that is rather amusing!

#10 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 14 May 2006 - 03:00 PM

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

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#11 redbullmarky

redbullmarky
  • Staff Alumni
  • Advanced Member
  • 2,863 posts
  • LocationBedfordshire, England

Posted 14 May 2006 - 03:17 PM

[!--quoteo(post=373746:date=May 14 2006, 04:00 PM:name=businessman332211)--][div class=\'quotetop\']QUOTE(businessman332211 @ May 14 2006, 04:00 PM) View Post[/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.
"you have to keep pissing in the wind to learn how to keep your shoes dry..."

I say old chap, that is rather amusing!




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users