I'm trying to add a border around a root menu item using this CSS:

.RootMenuItems{
    border-right: black 1px solid;
    border-left: black 1px solid;
    border-bottom: black 1px solid;
    border-top: black 1px solid;
    height: 21px;
}

The border modifiers do absolutly nothing, but I'm pretty sure that my style.xml is correct because the height modifier works fine. I could do this using images but I really don't want to since the CSS is sooo much easier to screw around with. Anyone know what I'm doing wrong??

Dear jjfine

You must know that the style of the RootMenuItems for instance is set both
<tr></tr>
<td></td>
Setting the borders at <tr> level then you can't see a border around them. This is not working in IE and FF. Perhaps in version CSS3.
Setting the borders at <td> level this works. for instance: .RootmenuItems td {}
But you must know also that there are a few <td>'s in a MenuItem... and then you've borders to all the items of the menu... That means double lines... (or you've to set border collapse). For a nice look you must set the {display:none} style for the arrows.

That you can't see anything is perhaps that you've set the border styles of the icon or the arrow...

---

Vriendelijke groeten
Gilbert Vanden Borre