CSS Problem

I'm having a problem with some CSS formatting. For some reason the first
panel in my menu works fine when the mouse rolls over(the panel changes
colour & text shifts to the left slightly). The rest of the panels don't
however- they only activate when you roll over the text itself & because the
text shifts to the left on mouse-over it then de-activates...etc. The code
looks the same for the one that works & the ones that don't so i'm missing
something.

Perhaps you can help. Here's the code for the table followed by the css i'm
using.


<table width="170" border="0" cellpadding="0" cellspacing="0"
bgcolor="#4862c8">
<tr>
<td height="25">
<div class="menudiv"><a href="javascript:;">home</a></div>
</td>
</tr>
<tr>
<td height="25"><div class="menudivyellow">
<a href="javascript:;">rooms</a></div></td>
</tr>
<tr>
<td height="25"><div align="left" class="menudiv"><a
href="javascript:;">clubs</a></div></td>
</tr>
<tr>
<td height="25"><div align="left" class="menudivyellow"><a
href="javascript:;">meals</a></div></td>
</tr>
<tr>
<td height="40"><div align="left" class="menudiv"><a
href="sessions/index.html">sessions / <br>
time / fees</a></div>
</td>
</tr>
<tr>
<td height="40"><div align="left" class="menudivyellow"><a
href="javascript:;">inspection <br>
report
</a></div>
</td>
</tr>
<tr>
<td height="25"><div align="left" class="menudiv"><a
href="javascript:;">newsletter</a></div></td>
</tr>
<tr>
<td height="25"><div align="left" class="menudivyellow"><a
href="javascript:;">find us</a></div></td>
</tr>
<tr>
<td height="25"><div align="left" class="menudiv"><a
href="javascript:;">contact us</a></div></td>
</tr>
</table>



CSS---------------------------------------------------------


..menudiv {
display: block;
background-color: #DF273E;
text-decoration: none;
font-family: "Trebuchet MS";
font-size: 14px;
color: #FFFFFF;
margin-left: 70px
}

..menudiv a {
display: block;
background-color: #4862C8;
text-decoration: none;
color: #FFFFFF}

..menudiv a:hover {
display: block;
background-color: #DF273E;
text-decoration: none;
; color: #FFFFFF;
margin-left: -20px}

..menudivyellow {
display: block;
background-color: #FFD800;
text-decoration: none;
font-family: "Trebuchet MS";
font-size: 14px;
color: #FFFFFF;
margin-left: 70px
}

..menudivyellow a {
display: block;
background-color: #4862C8;
text-decoration: none;
color: #FFFFFF}

..menudivyellow a:hover {
background-color: #FFD800;
text-decoration: none;
; color: #4862C8;
margin-left: -20px}

Does the page have a valid and complete doctype?

Why are you assigning a -20px margin to the hover pseudo-class only?


--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================


"SilverBullit" <silverbullit (AT) hotmail (DOT) com> wrote

I'm having a problem with some CSS formatting. For some reason the first
panel in my menu works fine when the mouse rolls over(the panel changes
colour & text shifts to the left slightly). The rest of the panels don't
however- they only activate when you roll over the text itself & because
the
text shifts to the left on mouse-over it then de-activates...etc. The code
looks the same for the one that works & the ones that don't so i'm missing
something.

Perhaps you can help. Here's the code for the table followed by the css
i'm
using.


table width="170" border="0" cellpadding="0" cellspacing="0"
bgcolor="#4862c8"
tr
td height="25"
div class="menudiv"><a href="javascript:;">home</a></div
/td
/tr
tr
td height="25"><div class="menudivyellow"
a href="javascript:;">rooms</a></div></td
/tr
tr
td height="25"><div align="left" class="menudiv"><a
href="javascript:;">clubs</a></div></td
/tr
tr
td height="25"><div align="left" class="menudivyellow"><a
href="javascript:;">meals</a></div></td
/tr
tr
td height="40"><div align="left" class="menudiv"><a
href="sessions/index.html">sessions / <br
time / fees</a></div
/td
/tr
tr
td height="40"><div align="left" class="menudivyellow"><a
href="javascript:;">inspection <br
report
/a></div
/td
/tr
tr
td height="25"><div align="left" class="menudiv"><a
href="javascript:;">newsletter</a></div></td
/tr
tr
td height="25"><div align="left" class="menudivyellow"><a
href="javascript:;">find us</a></div></td
/tr
tr
td height="25"><div align="left" class="menudiv"><a
href="javascript:;">contact us</a></div></td
/tr
/table



CSS---------------------------------------------------------


.menudiv {
display: block;
background-color: #DF273E;
text-decoration: none;
font-family: "Trebuchet MS";
font-size: 14px;
color: #FFFFFF;
margin-left: 70px
}

.menudiv a {
display: block;
background-color: #4862C8;
text-decoration: none;
color: #FFFFFF}

.menudiv a:hover {
display: block;
background-color: #DF273E;
text-decoration: none;
; color: #FFFFFF;
margin-left: -20px}

.menudivyellow {
display: block;
background-color: #FFD800;
text-decoration: none;
font-family: "Trebuchet MS";
font-size: 14px;
color: #FFFFFF;
margin-left: 70px
}

.menudivyellow a {
display: block;
background-color: #4862C8;
text-decoration: none;
color: #FFFFFF}

.menudivyellow a:hover {
background-color: #FFD800;
text-decoration: none;
; color: #4862C8;
margin-left: -20px}

Can you post a link to the page so I can see this happening?

http://www.beta-design.co.uk/bella/

You can see the first menu item (home) works as i intended (mouse over div
and/or text), but for some reason the other links only activate as you roll
over the text.

It may be worth mentioning that it works fine in Firefox