CSS style within table cell works after being hovered over

I am attempting to create a menu using <div> and tags within a
table cell. When the page loads, some of the classes don't seem to be
applied. If I hover over the menu everything is fine from that point
on. If I remove the table everything renders correctly, and I have no
problems. Unfortunately, I need to nest this menu within a table. I
am currently having this problem in IE 6. Thanks in advance for the
help!

<html>
<style type="text/css">
.menu .aa { width: 5px; float: left; border-bottom: 1px solid
#000; background: #bcd; }
.menu .bb { float:left; padding:2px 0 2px 0; border-bottom:1px
solid #000; border-top:1px solid #000; background:#bcd;
text-align:center; }
.menu .sela { width:5px; float:left; background:#fff;
font-size:1em;}
.menu .selb {float:left; padding:2px 0 2px 0; border-top:1px solid
#000; background:#fff; color:#f00; font-size:1em;}
.menu .va {width:1px; float:left; border-top:5px solid #fff;
background:#000; overflow:hidden;}
.menu .vb {width:1px; float:left; height:1px; background:#ccc;
border-top:2px solid #fff; border-bottom:2px solid #000;
overflow:hidden;}
.menu .vc {width:1px; float:left; height:1px; background:#ccc;
border-top:1px solid #fff; border-bottom:1px solid #000;
overflow:hidden;}
.menu .vd {width:2px; float:left; height:1px; background:#000;
border-top:1px solid #ccc; overflow:hidden;}
.menu a, .menu a:visited {color:#444; text-decoration:none;
font-size:1em; cursor:pointer; cursor:hand; background:#c88;}
.menu a:hover {color:#c00; background:#def;}
.menu a:hover .aa, .menu a:hover .bb {background:#def;}
.pad {float:left; color:#fff;}
.padtop {float:left; display:block; padding:0 5px;}
* html .menu .vb {height:5px; he/ight:1px;}
* html .menu .vc {height:3px; he/ight:1px;}
* html .menu .vd {height:2px; he/ight:1px;}
</style>
<body>
<table>
<tr>
<td>
<div class="menu">






By Visit






<a href="#">






Overview






</a>
<a href="#">






By ID






</a>
</div>
</td>
</tr>
</body>
</html>

Jul 20 '05 #1

Subscribe Post Reply

5258

Brian

T wrote:

I am attempting to create a menu using <div> and tags within
a table cell. When the page loads, some of the classes don't seem
to be applied.
url? (The code you pasted in just doesn't cut it; we need a live example.)
If I remove the table everything renders correctly, and I have no
problems.
It seems the solution is rather obvious then, no?
Unfortunately, I need to nest this menu within a table.

Why is that?

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Jul 20 '05 #2

Brian <us*****@julietremblay.com.invalid> wrote in message news:<10*************@corp.supernews.com>...

T wrote:
I am attempting to create a menu using <div> and tags within
a table cell. When the page loads, some of the classes don't seem
to be applied.
url? (The code you pasted in just doesn't cut it; we need a live example.)

Here is the look I am trying to get:
http://66.188.102.22:75/menu/withouttable.htm

Here is a portion of the problem page:
http://66.188.102.22:75/menu/withtable.htm

If I remove the table everything renders correctly, and I have no
problems.

It seems the solution is rather obvious then, no?
Unfortunately, I need to nest this menu within a table.

Why is that?

I have a template which holds a logo within a table so I need to keep
the page layout uniform.

For some background:
At runtime I transform my xml doc using the xml component in .net.
When I run the transform outside of my application the apperance is
fine, it is only when it is within the table that I have problems.

Any light shed on this issue would be much appreciated.

Jul 20 '05 #3

Brian

T wrote:

Brian wrote...
T wrote:

Here is the look I am trying to get:
http://66.188.102.22:75/menu/withouttable.htm

Here is a portion of the problem page:
http://66.188.102.22:75/menu/withtable.htm

These look identical to me, except the font size in withouttable is
larger than in withtable. Firefox 0.8/Win XP. What problem are you
seeing? Which browser/os?

Unfortunately, I need to nest this menu within a table.

Why is that?

I have a template which holds a logo within a table so I need to
keep the page layout uniform.

That's a non-sequitur. There's not reason why you can't have a
site-wide look without tables-for-layout.
--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

Jul 20 '05 #4

CSS style within table cell works after being hovered over

Similar topics