Cell Border will not Hide

[Don Dean]

Hi all.
Got a strange one that I can't figure out so need some help from all you
smart people.
I have built a table to use as a main menu in FP2003 and each cell opens
(makes visible) a submenu with a mouseover behavior. The submenus are tables
inside of absolute positioned DIVs and each cell in each submenu table has a
text link to a page. The DIVs are brought up with a mouseover on a cell in
the main menu table. Pretty standard stuff.

Everything works and looks just fine in all of the browsers that I have
tested with, except for IE and FP Preview mode.

In these two, when you initially view the main menu, the cell lines of the
submenus appear on the page, although the contents of the cells, the submenu
tables and the DIVs are all hidden, like they are supposed to be, when the
page first appears.

When I do a mouseover on a main menu cell, to bring up a submenu then it
looks OK and with a mouseout, everything disappears, like it should,
including the cell border lines of the submenus that were initially showing.

I've defined the DIVs which contain the submenus to be hidden initially.
I've run FPcleaner and restarted FP, but nothing seems to fix the problem.
Of course, if I eliminate the cell borders, then the problem doesn't happen,
but then I also don't have lines (borders) separating the text of each cell.
I'd like to keep the cell lines in the submenus, if I can.

Any ideas??? Here's the code I have in my styles page that defines the
attributes of the DIVs for the submenus and the submenu tables.

..divsubmenu
{
position: absolute;
left: 130px;
width: 220px;
visibility: hidden;
padding-top: 30px;
padding-bottom: 30px;
}
..tabsubmenu
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
width: 100%;
background-color: #B7DBFF;
border-collapse: collapse;
border: 1pt #003399 solid;
}
..tabsubmenu td
{
padding-left: 7px;
padding-top: 2px;
padding-bottom: 2px;
border: 1pt #003399 solid;
}

 

[Murray]

In these two, when you initially view the main menu, the cell lines of the

submenus appear on the page, although the contents of the cells, the
submenu
tables and the DIVs are all hidden, like they are supposed to be, when the
page first appears.

Yes - that's what happens when you use border-collapse on the borders on the
tables in those hidden divs. It's an IE bug.

The way around it is to style your table's borders completely differently -

td { border: 1px solid black; border-top:none; border-right:none; }
td.top { border-top:solid; }
td.right { border-right:solid; }

Then make the top row have a class of top, and the right cell have a class
of right, e.g.,

<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td class="top">&nbsp;</td>
<td class="top">&nbsp;</td>
<td class="top right">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="right">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="right">&nbsp;</td>
</tr>
</table>

 

[Murray]

Here's an illustration of this beast -

http://www.murraytestsite.com/border-collapse.html

--
Murray
--------------
MVP FrontPage

In these two, when you initially view the main menu, the cell lines of
the
submenus appear on the page, although the contents of the cells, the
submenu
tables and the DIVs are all hidden, like they are supposed to be, when
the
page first appears.

Yes - that's what happens when you use border-collapse on the borders on
the tables in those hidden divs. It's an IE bug.

The way around it is to style your table's borders completely
differently -

td { border: 1px solid black; border-top:none; border-right:none; }
td.top { border-top:solid; }
td.right { border-right:solid; }

Then make the top row have a class of top, and the right cell have a class
of right, e.g.,

<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td class="top">&nbsp;</td>
<td class="top">&nbsp;</td>
<td class="top right">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="right">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="right">&nbsp;</td>
</tr>
</table>

 

[Don Dean]

Thanks for the help Murray.
Sorry for my slow response to your answer. I spent the day getting hooked
up to DSL (as opposed to the old 28K modem I was using) Had a few problems
to work out, but the speed is so, so nice.)

I'll try your solution. Thanks also for the reference URL.
--
Don
*********

Here's an illustration of this beast -

http://www.murraytestsite.com/border-collapse.html

 

[Murray]

You're welcome. Good luck!