Solved

HTML, Firefox 2.0, colspan in tables not working

Posted on 2008-06-13
14
2,942 Views
Last Modified: 2013-12-08
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
0
Comment
Question by:iftech
  • 6
  • 4
  • 2
  • +2
14 Comments
 
LVL 42

Expert Comment

by:David S.
Comment Utility
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
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
"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
 
LVL 2

Expert Comment

by:pain_is_relative
Comment Utility
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
 

Author Comment

by:iftech
Comment Utility
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
 
LVL 44

Expert Comment

by:scrathcyboy
Comment Utility
"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
 

Author Comment

by:iftech
Comment Utility
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
 

Author Comment

by:iftech
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 42

Expert Comment

by:David S.
Comment Utility
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
 

Author Comment

by:iftech
Comment Utility
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
 

Expert Comment

by:tpknotts65
Comment Utility
hi
0
 
LVL 42

Expert Comment

by:David S.
Comment Utility
@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
 

Accepted Solution

by:
iftech earned 0 total points
Comment Utility
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
 
LVL 42

Expert Comment

by:David S.
Comment Utility
It's a shame you decided you had to resort to that. Making different pages for different browsers is a maintenance nightmare.
0
 

Author Comment

by:iftech
Comment Utility
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

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now