By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,148 Members | 779 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,148 IT Pros & Developers. It's quick & easy.

CSS style within table cell works after being hovered over

P: n/a
T
I am attempting to create a menu using <div> and <span> 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">
<span class="sela">
<span class="va"></span>
<span class="vb"></span>
<span class="vc"></span>
<span class="vd"></span>
</span>
<span class="selb">By Visit</span>
<span class="sela">
<span class="vd"></span>
<span class="vc"></span>
<span class="vb"></span>
<span class="va"></span>
</span>
<a href="#">
<span class="aa">
<span class="va"></span>
<span class="vb"></span>
<span class="vc"></span>
<span class="vd"></span>
</span>
<span class="bb">Overview</span>
<span class="aa">
<span class="vd"></span>
<span class="vc"></span>
<span class="vb"></span>
<span class="va"></span>
</span>
</a>
<a href="#">
<span class="aa">
<span class="va"></span>
<span class="vb"></span>
<span class="vc"></span>
<span class="vd"></span>
</span>
<span class="bb">By ID</span>
<span class="aa">
<span class="vd"></span>
<span class="vc"></span>
<span class="vb"></span>
<span class="va"></span>
</span>
</a>
</div>
</td>
</tr>
</body>
</html>
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
T wrote:
I am attempting to create a menu using <div> and <span> 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

P: n/a
T
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 <span> 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

P: n/a
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

This discussion thread is closed

Replies have been disabled for this discussion.