Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

HTML, Firefox 2.0, colspan in tables not working

Posted on 2008-06-13
14
Medium Priority
?
2,949 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 2
  • +2
14 Comments
 
LVL 43

Expert Comment

by:David S.
ID: 21783294
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
ID: 21783829
"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
ID: 21791294
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:iftech
ID: 21793818
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
ID: 21795653
"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
ID: 21796316
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
ID: 21796339
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
 
LVL 43

Expert Comment

by:David S.
ID: 21797714
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
ID: 21803875
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
ID: 22149623
hi
0
 
LVL 43

Expert Comment

by:David S.
ID: 22149756
@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
ID: 22161402
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 43

Expert Comment

by:David S.
ID: 22166890
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
ID: 22172434
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

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

722 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