Strange Colspan and/or Rowspan issue when viewing in IE6

I am having an issue where the page displays fine in Firefox but not in IE and I'm frustrated because it appears to be a very simple thing.  I'll try explain by first showing the code I am using:

TABLE 1 - nested about 3 tables deep and sits within another table's <td colspan="7"></td>:

<table>
     <tr>
          <td></td>
          <td></td>
          <td rowspan="10">
                <div><a href="...">link1</a></div>
                <div><a href="...">link2</a></div>
                <div><a href="...">link3</a></div>
                <div><a href="...">link4</a></div>
                <div><a href="...">link5</a></div>
          </td>
     <tr>
          <td></td>
          <td></td>
     <tr>
          <td></td>
          <td></td>
     <tr>
 . . . . . and so on for 10 rows.

MY PROBLEM:  In the <td rowspan="10"></td> cell, I have 5 hyperlinks, each within <div></div> tags as you can see.  Initially it looks like everything is working, but if I try the links, only LINK1 works in IE - the other 4 just appear as regular text.  Everthing works fine in Firefox though.  I experimented a little and found that if I change either the ROWSPAN or the COLSPAN (of the cell that the table is nested within) to 1, all the links work but of course the page layout gets all messed up.  If I change the ROWSPAN to 2, the only top LINK1 and LINK2 work . . . any other ROWSPAN number, only LINK1 works??????????!!!!!!!

Any ideas why only the top link works?  I know I do not have </tr> tags - I rarely use them without problem, but I did try to insert them to see if that would solve my problem . . but it didn't.

Max
LVL 1
MaxwellTurnerAsked:
Who is Participating?
 
siliconbritConnect With a Mentor Commented:

Yeah - sorry about that - it's nearly 3AM here in the UK, and I've been working 26 hours straight.

If you are using CSS, the most likely things I would look at are:

  - overlapping class/div - does one object overlap the area where the non-reponsive links are.
  - the dropdown menu - does the dropdown area overlap the links?  Is the dropdown div pre-allocated?
  - z-index - is one large element 'above' the links in z-index.
  - margins - does a margin on an object overlap the links.

When I'm forming a complex CSS page, I always add border lines to all divs so I can see where they start/finish.  I only remove the borders when the page is rendering succesfully.
0
 
siliconbritCommented:

So - let me get this straight.  You are creating a table with 10 rows, each of which contains 2 empty cells, except for the first which contains a cell that spans all 10 rows.  Note that without the </tr> tags, the browser has to guess where the 10 rows start and end.

I believe the problem stems from your unbalanced table and strange page architecture.  There main difference between Firefox and IE is that Firefox tries to enforce strict rules on well-formed CSS and HTML, while IE tries to best guess what you want to achieve.  In this instance it is probably Firefox that is rendering your page correctly.

Note - put the </tr> tags back in, and start to use them religiously.  Always close HTML tags.

My advice would be to create a page with the following code in it, to prove that the links work in Firefox:

      <html>
         <head>
             <title>Link Test</title>
         </head>
         <body>
                <div><a href="...">link1</a></div>
                <div><a href="...">link2</a></div>
                <div><a href="...">link3</a></div>
                <div><a href="...">link4</a></div>
                <div><a href="...">link5</a></div>
         </body>
      </html>

Note that the divs are redundant here, they dont do have any CSS associated with them, so you might as well use:

         <body>
                <a href="...">link1</a><br>
                <a href="...">link2</a><br>
                <a href="...">link3</a><br>
                <a href="...">link4</a><br>
                <a href="...">link5</a><br>
         </body>

OK - By now you have proven that it's not the link code that is incorrect.  Now you need to look at the table.  My starting guess would be that you have an extra <td></td> in the first row, since all other rows have 2 cells, the third cell can not be shown.  Either add a third cell to the 9 additional rows, or remove the second cell from the first row:

      <html>
         <head>
             <title>Table Test</title>
         </head>
         <body>

         <table>
              <!-- Row 1 -->
              <tr>
                   <td></td>
                   <!-- Additional Cell Removed -->
                   <td rowspan="10">
                         <a href="...">link1</a><br>
                         <a href="...">link2</a><br>
                         <a href="...">link3</a><br>
                         <a href="...">link4</a><br>
                         <a href="...">link5</a><br>
                   </td>
              </tr>
              <!-- Row 2 -->
              <tr>
                   <td></td>
                   <td></td>
              </tr>
              <!-- Row 3 -->
              <tr>
                   <td></td>
                   <td></td>
              </tr>
              <!-- Row 4 -->
              <tr>
                   <td></td>
                   <td></td>
              </tr>
              <!-- Row 5 -->
              <tr>
                   <td></td>
                   <td></td>
              </tr>
              <!-- Row 6 -->
              <tr>
                   <td></td>
                   <td></td>
              </tr>
              <!-- Row 7 -->
              <tr>
                   <td></td>
                   <td></td>
              </tr>
              <!-- Row 8 -->
              <tr>
                   <td></td>
                   <td></td>
              </tr>
              <!-- Row 9 -->
              <tr>
                   <td></td>
                   <td></td>
              </tr>
              <!-- Row 10 -->
              <tr>
                   <td></td>
                   <td></td>
              </tr>
         </table>
         </body>
   </html>


Finally, why do you have these 10 empty rows?  You could just as easly delete the 9 rows, and the rowspan="10" attribute and the page would look identical, with the exception of no redundant borders.  Unless there is content in these rows that you have removed for the example, I cant see any reason to architect the page this way.

0
 
MaxwellTurnerAuthor Commented:
Hi,

Thanks for the reply.  The example I gave was only to provide an example of my table structure.  None of the cells are empty.  I always assumed that <tr> knows to end when it encounters the next <tr>.  I do always end my tables:

    . . . . </td>
      </tr>
</table>

. . . but you are right - I should always use end tags - I do for everthing else.

My table looks something like this:
<table>
     <tr>
          <td>CUSTOMER:</td>
          <td>#customer#</td> - the fields between ##'s are values from a dbase using coldfusion
          <td rowspan="10">
                <div><a href="...">link1</a></div>
                <div><a href="...">link2</a></div>
                <div><a href="...">link3</a></div>
                <div><a href="...">link4</a></div>
                <div><a href="...">link5</a></div>
          </td>
     <tr>
          <td>ADDRESS:</td>
          <td>#address#</td>
     <tr>
          <td>CITY:</td>
          <td>#city#</td>
     <tr>
          <td>POSTAL CODE:</td>
          <td>#postalcode#</td>
     <tr>
          <td>CONTACT:</td>
          <td>#contact#</td>
     <tr>
          <td>PHONE:</td>
          <td>#phone#</td>
     <tr>
          <td>FAX:</td>
          <td>#fax#</td> . . . and so on.  It ends up being 10 rows.

It ends up being a 10 row list displaying my customer's basic info, and then I want the 5 links to appear to the right of this info in the cell with a rowspan of 10.  I have tested this very thing out without the table being nested within others and it all works fine - it must have something to do with being nested within another table.  I have spent 2 days checking for missing end tags and can find none.

I'm stumped!!

MAX
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
siliconbritCommented:

Well you are asking for the cell to span 10 rows, but you have not provided a third cell in the other 9 rows for the first cell to expand into - try this:

<table>
     <tr>
          <td>CUSTOMER:</td>
          <td>#customer#</td> - the fields between ##'s are values from a dbase using coldfusion
          <td rowspan="10">
                <div><a href="...">link1</a></div>
                <div><a href="...">link2</a></div>
                <div><a href="...">link3</a></div>
                <div><a href="...">link4</a></div>
                <div><a href="...">link5</a></div>
          </td>
     <tr>
          <td>ADDRESS:</td>
          <td>#address#</td>
          <-- Additional Cell for the third cell in row one to expand into -->
          <td></td>
     <tr>
          <td>CITY:</td>
          <td>#city#</td>
          <-- Additional Cell for the third cell in row one to expand into -->
          <td></td>
     <tr>
          <td>POSTAL CODE:</td>
          <td>#postalcode#</td>
          <-- Additional Cell for the third cell in row one to expand into -->
          <td></td>
     <tr>
          <td>CONTACT:</td>
          <td>#contact#</td>
          <-- Additional Cell for the third cell in row one to expand into -->
          <td></td>
     <tr>
          <td>PHONE:</td>
          <td>#phone#</td>
          <-- Additional Cell for the third cell in row one to expand into -->
          <td></td>
     <tr>
          <td>FAX:</td>
          <td>#fax#</td>
          <-- Additional Cell for the third cell in row one to expand into -->
          <td></td>

. . . and so on.  
0
 
MaxwellTurnerAuthor Commented:
Hmmmmm,  I don't quite understand.  The "rowspan=10" IS essentially the additional third cell for all 10 rows - it starts on row1 and goes all the way down to row 10.  If I only did "rowspan=7" for example, then I could put an additional third cell in the bottom 3 rows.  I'm pretty sure that I do not need to provide the additional cells for the "rowspan" to expand into, in fact the additional cells will conflict with the "rowspan" - it won't be able to span down if there are cells in the way below it.

---------------------------------------------------------------|
-------------|-------------|             my links here           |
-------------|-------------|                                           |
-------------|-------------|                                           |
-------------|-------------|                                           |
-------------|-------------|                                           |
-------------|-------------|                                           |
-------------|-------------|    - add row if rowspan=7     |
-------------|-------------|    - add row if rowspan=7     |
-------------|-------------|    - add row if rowspan=7     |
-------------|-------------|-----------------------------------|

If I re-create the same table with my links on a new page, it works perfect.  The code I am asking about here is a very small part of a VERY large and complicated page and I'm fairly certain now that something else on the page is causing the problem - almost 2000 lines of code to go through . . DOh!.

I am considering abandoning this design and starting over with a new idea.  Gonna give it one more try today, but my patience is wearing thin.

Max
0
 
jessegivyDeveloperCommented:
Okay, it's really quite simple.  A table is designed to look like a rectangle, yours doesn't!  The first row has three cells while the following rows have only two, which could cause any number of problems in any number of browsers.  I would like to suggest that you do NOT use the rowspan attribute as it's far too confusing, especially for newcomers to html.  I've been writing HTML for over a decade and I never use rowspan, colspan sometimes, but rowspan never.

The other thing to consider is that you must have at least ten rows in your table.

Why not put each of the links in their own table cell?  Seems very confusing the way you've got it layed out.

YOU MUST CLOSE TD TAGS:

<tr>
   <td></td>
   <td></td>
   <td></td>
</tr>
<tr>
   <td></td>
   <td></td>
   <td></td>
</tr>

...assume nothing!  The browser REQUIRES that you close MOST html tags.  There are only few exceptions to this rule.  Tables are quite finikey, you've gotta have an equal number of rows and columns throught the life of the table, which makes it a rectangle instead of a polygon ;)

Set your cellpadding and cellspacing to zero and you'll be able to get the effect you desire while adding the links in individual cells.

Cheers,

Jesse
0
 
MaxwellTurnerAuthor Commented:
Hi jessegivy,

Well thanks for your advice, although I certainly wouldn't consider myself a newcomer to HTML (and several other languages) either - been at it for about 10 years myself - still learning however.  I ended up doing exactly what you suggested.  I rarely use rowspan myself (colspan when I have to), so thats probably why I'm not very skilled at using it.  However, as far as I know it is valid W3C Markup, and normally works just fine.   For display purposes, my problem above 'looked fine', it's just that the links would not work.  The best alternative really is use CSS, but I find tables handy and easier sometimes . . . plus my CSS knowledge is not terribly advanced.

Not sure what you mean about "not being rectangular" though.  Even with the rowspan cell in my original table, it was very rectangular - it's tough to recreate a table using keys on a keyboard, so don't take my little illustration to seriously, but actually even that looks pretty rectangular to me too.  I'm quite sure that you cannot create any other shape other than a rectangle (or square) with a table:)  Rowspan=10 essentially MERGES the 10 rows in column 3 into 1 row which is the same height as the 10 rows.

And yes I am going to start using </tr> tags - just never have - find it cleaner without and never had an issue, but I'm usually very strict with everything else so I guess I shouldn't take this shortcut.  I never assume anything - I used that word to lightly.  In fact I know for sure that <tr> ends when it encounters another <tr>.  The main reason I am going to start using the end tag is so that my code indentation matches up better.

Max
0
 
siliconbritCommented:

Max,

   So, did you try my code or not?

   Since I spent the time to write it - why not give it a go?

 ;-)
0
 
siliconbritCommented:

When you give a cell the instruction 'rowspan=10' you are telling the browser that when the cell is full, it should continue to write the contents into the corresponding cell in the next row, and so on until the 10th row is reached.

However, you have not allocated a third cell in each row.  So although the browser does a fair job of displaying the contents, even though they have bled out of the first cell, they are not actually spanning rows, because there is no 3rd cell in each row.

This is exascerbated by your unclosed rows, so the browser eventually gives up trying to render the hotspot for each link, because it can't accurately determine where the hotspot should start, and where it should end.  Since there is only room in a single cell to render a single hotspot, this is all you get, ONE responsive link.

If you cut and paste the same code into a page without any of the surrounding content, then there is much more room for the browser to allow the links to bleed out of that single restrictive cell, and that is why your links work in your test page.

Let me give you a practical example.  Go to your local car lot and buy a BMW Z3, then take it to a row of 3 garages.  Try to park it carefully in each of FOUR garages.  Your car will do what it is told by YOU the driver, and try it's best to park in that fourth garage, but it wont look very good afterwards.  It'll still drive, but not quite as you expect it to.

0
 
siliconbritCommented:

This is what your table actually looks like:

  |       |       |  link  |
  -----------------------
  |       |       |  link
  ---------------
  |       |       |  link
  ---------------
  |       |       |  link
  ---------------
  |       |       |  link
  ---------------
  |       |       |  link
  ---------------
  |       |       |  link
  ---------------
  |       |       |  link
  ---------------
  |       |       |  link
  ---------------
  |       |       |  link
  ---------------
  |       |       |  link
  ---------------

You have told your browser that all the links will exist within the boudaries set by <table></table>, in other words, they will exist within the table, but nine of your links DONT exist within the table.  If there was nothing else around to interfere with it, the browser would allow you to do this, and your links would respond, but the 9 little-orphaned links are competing with the rest of the content on this monster 2000 line HTML behemoth.  They stand no chance - and only YOU can save them.
0
 
siliconbritCommented:

Bugger.  I just remembered the bug in early Mozilla that changed this rule.  I'm wrong, I think it's the other way around.

Never mind - please ignore my previous posts - LOL - I must have left a few too many tags open ;-)
0
 
MaxwellTurnerAuthor Commented:
Hi siliconbrit,

Sorry . . . yes I did try adding the third additional cell in the 9 rows below with no success - same as before with only one active link.  I'm not going to disagree with you because honestly I'm not too experienced with rowspan.  I might add though, that I did search google for HTML examples using rowspan and after viewing at least a dozen different sites, they all do it like I did, without the additional cells.  I could not find an example showing your method.

I do disagree with your rendering of what my table looked like though.  This is easily proven by placing borders on the table/cells.  It looked like a perfect rectangle - half of it was 2 columns, each with 10 cells, and the other half, the 3rd column was just one big rectangular cell - even if I had nothing inside that cell - it stretched down to cell 10.  If I changed rowspan to 9, it stretched down to row 9.  To further my belief that it was just ONE BIG cell, when I added a "valign=middle" and "align=center" on my rowspan cell, the links were centered vertically and horizontally.

Forgive the fact that my borders don't line up properly, but below shows exactly what my table (with a 3rd rowspan cell in the first row, and only 2 cells in each row below that.) looked like with a border.

-------------------------------------------------
|           |             |           link                |
----------------------|          link                 |
|           |             |           link                |
----------------------|          link                 |
|           |             |           link                |
----------------------|                                |
|           |             |                                |
----------------------|           I                    |
|           |             |         had                  |
----------------------|          an                  |
|           |             |        image                |
----------------------|         here                |
|           |             |                                |
----------------------|                                |
|           |             |                                |
----------------------|                                |
|           |             |                                |
----------------------|                                |
|           |             |                                |
-------------------------------------------------

I don't want to come across as arguing with you guys because both of you are probably better at most markup languages than me, but having that 3rd cell in the bottom 9 rows makes no sense to me.  How can the top cell span down 10 rows, if there are already cells there below it?

I always thought of it as being similar to Excel where you can merge several cells to act as one bigger cell - vertically or horizontally.

Max

0
 
MaxwellTurnerAuthor Commented:
Doh!  I typed all that for nothing!:)  No worries m8.  I'm quite certain that my problem originates from the surrounding code.  

My web page sort of emulates Windows explorer - when you click on a small "+" image, a menu opens below and you can drill down several menus deep.  The table that we are talking about here is one of those drop-down menu's.  If I remove the javascript and all of the ID's and CLASSES associated with the "drop-down" stuff, all my links work, so I think that is what is causing the problem - just not sure why . . . .

Max
0
 
MaxwellTurnerAuthor Commented:
Yikes!  Thats a long day - your nearly 12 hours ahead of me - good old canadian boy over here!  My brain turns to mush after an 8 hr day, especially when I'm typing endless code.

In hindsight I should have explained my web page a little better - the drop-dowm menus, etc.  I guess it kinda sounded like I was an HTML noob trying to create my first table on some page.

Good suggestions.  My project is time sensitive so I have had to move on to keep on schedule.  For now I have the links in their own cells - 3  columns for all rows and no rowspan.  I saved a copy of my old code so I can go back later and try figure out what the problem was - you have given me some new ideas above.

Max

0
 
MaxwellTurnerAuthor Commented:
siliconbrit,

I had some time yesterday to re-visit this and found that indeed I had an object overlapping another.  I have since gone with a completely different design, but this problem bugged me and I had to determine why it was happening.

Thanks for your suggestions and have a great day!

Max
0
All Courses

From novice to tech pro — start learning today.