CSS: table layer blocking div layer!

Dev Shed Forums Sponsor:

June 8th, 2002, 01:20 PM

CyberN8

UberGeek

Join Date: Apr 2001

Posts: 67

Time spent in forums: 4 h 50 m 48 sec
Reputation Power: 13

CSS: table layer blocking div layer!

I'm using the following styles to create a split title bar:

PHP Code:


		
			
 DIV.title

{

    float:left;

    text-align:left;

    background:none transparent;

    white-space:nowrap;

    z-index:1;

}

DIV.menu

{

    float:right;

    text-align:right;

    background:none transparent;

    white-space:nowrap;

    z-index:3;

}

The HTML to produce this split title bar is as follows:

PHP Code:


		
			
<div class='title'>Title</div>

<div class='menu'><a href='somewhere.com'>Somewhere</a></div>

The code works fine outside of a table, but inside a table (specifically a caption), the hyperlink is blocked such that it cannot be clicked:

PHP Code:


		
			
<table>

    <caption>                              

        <div class='title'>Title</div>

        <div class='menu'><a

href='somewhere.com'>Somewhere</a></div>

    </caption>

<tr>

    <td>Doo da</td>

    <td>Day</td>

</tr>

</table>

I've tried forcing the stacking order with z-index and also messed with background properties of the table and caption. Can anyone solve this dilemma? My desire is to maintain using captions...

Thanks,
N8.

June 9th, 2002, 12:44 AM

CyberN8

UberGeek

Join Date: Apr 2001

Posts: 67

Time spent in forums: 4 h 50 m 48 sec
Reputation Power: 13

Just a note that this problem occurs in the CAPTION only. I can get it to work okay in a spanned TD. However, I'd rather use CAPTIONs than spanned TDs.

Also note that the problem is occurring in NN6.2.1 and when I set the -moz-opacity to something less than opaque (100%), I gain access to the hyperlink. Thus, I'm fairly certain that the issue is one of transparency and layers. I don't want to use -moz-opacity since NN6 bogs down miserably with it....

Thanks,
N8.

Last edited by CyberN8 : June 9th, 2002 at 12:47 AM.

June 9th, 2002, 12:05 PM

degsy

Contributing User

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Nov 2001

Posts: 1,882

Time spent in forums: 5 Days 21 h 19 m 30 sec
Reputation Power: 19

I'm not sure why it isn't working, but the Caption attribute is depreciated.

Why do you want/need to use it?

June 9th, 2002, 01:23 PM

CyberN8

UberGeek

Join Date: Apr 2001

Posts: 67

Time spent in forums: 4 h 50 m 48 sec
Reputation Power: 13

I wanted to use CAPTIONs because it made CSS a bit more cross-functional than trying to use selectors (first-childs, etc.) for TRs.

Furthermore, the CAPTION automatically spans any number of columns, while with using TRs and TDs to create a caption, you must call COLSPAN (is there a CSS wildcard to span all columns? I know there is a CSS attribute to span a specific number...).

I've worked around the issue by making a special class of TR and then by using COLSPAN in the first TD (my PHP script plugs in the correct number of columns to span).

Take care,
N8

CSS: table layer blocking div layer!

Developer Shed Advertisers and Affiliates