Creating a CSS Menu...

Making a CSS Menu - Need Some Suggestions...

[hedgehogcn]

Hello all. I am trying to make a menu using CSS. I am running into some challenges and need some suggestions. :)

Here's a link to my menu. (You can use view source to see my css, etc.)

## Deleted ##

First problem: Vertical Alignment

My menu text is not appearing in the middle of my <td> as I want it to - it's appearing at the top. I've tried to use a "vertical-align: middle;" in my style tag but to no avail.

I've also tried manually putting an "valign=middle" onto the individual <td> tags, but this also does not work. (Odd? The CSS must be overwriting any manual tags I put in?)

Note:

• This is only a problem with IE (5.0 or 6.0). It appears in the middle of the <td> as it should in Netscape 6.
  

Second problem: Horizontal Padding

I want to add some horizontal padding (5px) to the cells, so that the text is not "flush up" against the table edges. Obviously, this would look bad.

I am currently using "margin-left" and "margin-right" in my style to accomplish this. However, if you mouse-over the cells in IE - you will visually "see" this padding (the color doesn't change where the padding is).

Third problem: Mouse-over Color for Cells

If you view my menu in Netscape 6, the entire cell does not change colors when you mouse over, only the area directly behind the text.

Not sure why this is? Is there anyway to get the entire "cell" to change color in Netscape?

Also, any other suggestions you have on how to create this menu would be welcome! :)

Thanks,
-Hedge

[edited by: hedgehogcn at 8:51 pm (utc) on June 27, 2003]

[drbrain]

Welcome to Webmaster World. Could you please post a short and concise example of your problem, instead of a link, which is against the CSS Forum Charter [webmasterworld.com] and the TOS? We can help you better from there.

[hedgehogcn]

My apologies.

Here's my style code:

<style type='text/css'><!--
.menuClass
{
vertical-align: middle;
text-decoration:none;
font-family: arial,verdana;
font-size: 12px;
font-weight: bold;
color:#FFFFFF;
background-image: url('img1.gif');
width: 214px;
height: 25px;
margin-right: 5px;
margin-left: 5px;
}
.menuClass:hover
{
text-decoration: underline;
color:#000000;
background-image: url('img2.gif');
}
--></style>

Here's the menu table:

<table cellpadding="0" cellspacing="0" border="0" width="214">
<tr>
<td width="214" class="menuClass"><a href="#" class="menuClass">Cell 1</a></td>
</tr>
</table>

Background image is used to swap the colors (used an image because it has a slight gradient, it is not just a flat color).

Any suggestions on the above problems?

-Hedge

PS-Hope this is concise enough? Not sure how I can trim it down much more... sorry if it's still too lengthy!

[Reflection]

Try using display:block;. That should help some.

[hedgehogcn]

I tried putting display:block; into the style... didn't seem to have any effect?