HTML, Firefox 2.0, colspan in tables not working

Hi,

I have a table like the following attached code snippet:

I have a javascript function that shows or hides the TR.  But what happens in FF is that the colspan is not read and shoves the whole table into the first column. In IE 7 it displays correctly and the colspan takes up all 6 columns giving the table room to expand.  I have attached images so you can see, the correct was is IE incorect is FF.
<table cellpadding="0" width="690px" cellspacing="0" border="0" style="width:690px;border-collapse:collapse;">
      <tr bgcolor="#CDCDCD">
            <td width="210px">Menu Name</td>
            <td align="center" width="210px">Page</td>
            <td align="center" width="60px">Active</td>
            <td align="center" width="90px">Sort</td>
            <td align="center" width="60px">Sub Menu's</td>
            <td align="center" width="60px">Delete</td>
      </tr>
      <tr id="tr2" style="display:none;">
		<td colspan="6" align="right" width="100%">
			<input type="hidden" name="status" value="none">
			<table cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;margin-left:-1px;">
      			<tr>
					<td width="210px">&nbsp;</td>
					<td width="210px">&nbsp;</td>
					<td width="60px">&nbsp;</td>
					<td width="90px">&nbsp;</td>
					<td width="60px">&nbsp;</td>
					<td width="60px">&nbsp;</td>
       			</tr>
			</table>
		</td>
	</tr>
</table>

Open in new window

ff.JPG
ie.JPG
iftechAsked:
Who is Participating?
 
iftechConnect With a Mentor Author Commented:
My solution to this issue is different pages depending on what browser is looking at it.  For some reason if there is a size in IE the size is different if FF and so on with every setting.  I know it's the wrong way but until browsers and get there shit in a row this is the only way this particular page will function and display properly.
0
 
David S.Commented:
You didn't give the <tr> display:inline or display:block by any chance, did you?

If so, this explains why that didn't work as you expected: http://www.dynamicsitesolutions.com/javascript/hiding-and-unhiding-table-rows/
0
 
scrathcyboyCommented:
"I have a javascript function that shows or hides the TR"

That is your mistake.  You should not be trying to hide a total TR.  If you do, browsers will fail to show the table elements correctly, as is happening in firefox.

If you have to show/hide some table element, it is ALWAYS the <TD>.  After all, if there is nothing in the TD, there is nothing to display anyway, right?  

In general, yo should put the DATA to hide or display in a span --

<TR>
  <TD><SPAN id="hideable">here is text to hide>/SPAN>
   </TD>
</TR>

Then you manipulate the visibility of the SPAN, not the TD, and certainly not the TR.  Try that, it works.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
pain_is_relativeCommented:
yeek.. tables within tables...... not good .. not good at all..

Try using some div's next time. Avoid using tables to structure your output.

and i agree with trying to hid your tr elements?!?! that was a strange idea. stick to hiding spans or divs.
0
 
iftechAuthor Commented:
How do I line everything up properly using div's to look like the images I have attached.  I have tried div's and span's at one point but it seemed to be a bigger mess than anything.
0
 
scrathcyboyCommented:
"How do I line everything up properly using div's to look like the images I have attached.  I have tried div's and span's at one point but it seemed to be a bigger mess than anything."

How true, how SO true.  There is nothing wrong with tables in tables, 90% of web pages across the internet use them, and for the table you are displaying (pictures), they are ideal for this.

If you do this, you will solve the problem -- at least it looks right as code, but check it out ...
<table cellpadding="0" width="690px" cellspacing="0" border="0" style="width:690px;border-collapse:collapse;">
      <tr bgcolor="#CDCDCD">
            <td width="210px">Menu Name</td>
            <td align="center" width="210px">Page</td>
            <td align="center" width="60px">Active</td>
            <td align="center" width="90px">Sort</td>
            <td align="center" width="60px">Sub Menu's</td>
            <td align="center" width="60px">Delete</td>
      </tr>
      <tr id="tr2" style="display:none;">
                <td align="right" width="100%">
                        <input type="hidden" name="status" value="none">
                        <table cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;margin-left:-1px;">
                </td>
      <tr>
                                        <td width="210px">&nbsp;</td>
                                        <td width="210px">&nbsp;</td>
                                        <td width="60px">&nbsp;</td>
                                        <td width="90px">&nbsp;</td>
                                        <td width="60px">&nbsp;</td>
                                        <td width="60px">&nbsp;</td>
                        </tr>
                        </table>
                </td>
        </tr>
</table>

Open in new window

0
 
iftechAuthor Commented:
you may want to check your syntax on that cause it seems to be completly wrong.  I don't think you can start a table within a td and tr and have it finish in another, also it looks like an extra td is placed in there.

I was able to get Div's to work using display:inline and float:left but it still seems to crap out on me.
0
 
iftechAuthor Commented:
I tried using span but it seems like a width in the style of a span doesn't work.  At least not in FF.  What is the reasoning behind this?  seems logical that it should work.
0
 
David S.Commented:
No reply to my question?

> Try using some div's next time. Avoid using tables to structure your output.

The information there seems to be tabular data and as such should be marked up with a <table>. However, I see no reason to use nested <table>s.
0
 
iftechAuthor Commented:
if you looked at the code i supplied you would see that I was using display:none;.

I'm confused how you say try using divs but then also say it's ok to use tables.

The data is being populated from a database using a recursive function, so in this case something is going to be nested, whether it be tables or divs.  If you would have read my last post I stated that I have replaced the table with Divs.  After styling however, there is no way to get FF and IE to render it the same except by using different css depending on what browser is used.  I don't have a problem using different CSS depending on what browser it is, however, some CSS styles such as width are created on the fly so therefor can't be placed in a style sheet.
0
 
tpknotts65Commented:
hi
0
 
David S.Commented:
@iftech

> if you looked at the code i supplied you would see that I was using display:none;.

Yes, I saw that, but you didn't show us your JavaScript code.

> I'm confused how you say try using divs but then also say it's ok to use tables.

We have different approaches to how we code.

@tpknotts65

You signed up just to say "hi"? Anyway, thanks for reminding me to come back to this.
0
 
David S.Commented:
It's a shame you decided you had to resort to that. Making different pages for different browsers is a maintenance nightmare.
0
 
iftechAuthor Commented:
ya tell me about it, I am not keen on it and maybe later when I have more time I will look into it again but for right now it seems like no matter what I do with spans and divs the sizing just doesn't match up on the two.
0
All Courses

From novice to tech pro — start learning today.