I'm trying to create a horizontal menu, that has an tab image behind each leaf in the top level. The image is 96x70 px, and the width is working out fine, but height is driving me nuts. Here are relevant portions of my CSSMenu.css:

.CssAdapterMenu ul.AspNet-Menu /* Tier 1 */
{
   width: 100%;
   display: block;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   font-weight: bold;
   /* width: 70px; */
}

.CssAdapterMenu ul.AspNet-Menu ul /* Tier 2 */
{
   width: 6em;
   top: 100%;
   left: 0;
}
 
.CssAdapterMenu ul.AspNet-Menu ul ul /* Tier 3+ */
{
   top: -0.5em;
   left: 6em;
}

.CssAdapterMenu ul.AspNet-Menu li /* Tier 1 */
{
   width: 96px;
   height: 70px;
   line-height: 14px;
   color: White;
   letter-spacing: 0.1em;
   background: url(../images/tab0.jpg) no-repeat center 50%;
   text-align: center; 
   top: 1px;
   padding-top: 20px;
}

.CssAdapterMenu ul.AspNet-Menu ul li /* tier 2+ */
{
   width: 14em;
   background: #c939d4 none;
   color:White;
   font-family:Arial;
   font-size:12px;
   text-align: left;
   padding-left: 8px;
   padding-top: 4px;
   line-height: 12px;
   letter-spacing: normal;
}

.CssAdapterMenu li /* all list items */
{
   color:White;
   font-family:Arial;
   font-size:12px;
}

With this, the background image ends just below the menu text. I can't mess with line-height in ul.AspNet-Menu li, because these tabs can have more than one line of text (otherwise, setting line-height to 70px would nearly fix it). One odd thing, is that if I uncomment /* width: 70px; */ in ul.AspNet-Menu, the image is cut just below the first text baseline (no matter what the height is).

Nothing I've tried has helped. Not even banging my head repeatedly against the keyboard. I've searched the forum (and other resources) for the answer to this, but I haven't been able to find it. If you have an answer, or can point me to one, I'd be a very happy camper.

Thank you very much!

- Andy

What browser are you testing in? I copied the code directly into a new project on top of the CSS code that comes with the adapters and it worked (basically). the background image i created to use as placeholders displayed fully (all 70 pixels of height) and the new menu showed up in Tier 2 as I would have expected. So it seemed to work for me.

You may have a problem in another line of code that you didn't display. Or it could be a browser compatability issue. Can you put up the entire CSS code that you are using? And also let me know what browser you are using (I'm using IE7 and it seemed to work for me).

Thanks.

-Jacob

I struggled with height in IE6 (fine in Firefox). The lists are displayed ?block?, so you?d expect them to accept a height, but I couldn?t get it to work. I now use a fixed line-height (doesn?t have to be any larger than necessary) combined with top and bottom padding.

If anyone knows a better way?

Here's the full CSSMenu.css. I should have posted it the first time, but there's a lot of ugly in here, because I've been focusing on getting the height issue worked out. I've been testing on IE7, for the most part, but also checking with Firefox 2.0.0.9 (separate issue, it looks totally different in Firefox, with the menus stacked vertically.)

Thanks for your time,
 Andy

.CssAdapterMenu ul.AspNet-Menu /* Tier 1 */

width: 100%;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-weight: bold;

.CssAdapterMenu ul.AspNet-Menu ul /* Tier 2 */

top: 100%;

.CssAdapterMenu ul.AspNet-Menu ul ul /* Tier 3+ */

.CssAdapterMenu ul.AspNet-Menu li /* Tier 1 */

height: 70px;

color: White;

background: url(../images/tab0.jpg) no-repeat center 50%;

top: 1px;

.CssAdapterMenu ul.AspNet-Menu ul li /* tier 2+ */

background: #c939d4 none;

font-family:Arial;

text-align: left;

padding-top: 4px;

.CssAdapterMenu li /* all list items */

font-family:Arial;

.CssAdapterMenu li:hover, /* list items being hovered over */ .CssAdapterMenu li.AspNet-Menu-Hover

.CssAdapterMenu a, /* all anchors and spans (nodes with no link) */ .CssAdapterMenu span

display: block;

.CssAdapterMenu li.AspNet-Menu-Leaf a, li.AspNet-Menu-WithChildren a, /* leaves */ .CssAdapterMenu li.AspNet-Menu-Leaf span

display: block;

.CssAdapterMenu li:hover a, /* hovered text */ .CssAdapterMenu li:hover span, .CssAdapterMenu li.AspNet-Menu-Hover a, .CssAdapterMenu li.AspNet-Menu-Hover span, .CssAdapterMenu li:hover li:hover a, .CssAdapterMenu li:hover li:hover span, .CssAdapterMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a, .CssAdapterMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span, .CssAdapterMenu li:hover li:hover li:hover a, .CssAdapterMenu li:hover li:hover li:hover span, .CssAdapterMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a, .CssAdapterMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span

.CssAdapterMenu li:hover li a, /* the tier above this one is hovered */ .CssAdapterMenu li:hover li span, .CssAdapterMenu li.AspNet-Menu-Hover li a, .CssAdapterMenu li.AspNet-Menu-Hover li span, .CssAdapterMenu li:hover li:hover li a, .CssAdapterMenu li:hover li:hover li span, .CssAdapterMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a, .CssAdapterMenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span

.CssAdapterMenu .AspNet-Menu-Selected /* this tier is selected */

.CssAdapterMenu .AspNet-Menu-ChildSelected /* a tier below this one is selected */

.CssAdapterMenu .AspNet-Menu-ParentSelected /* a tier above this one is selected */

I was just experimenting with this further and, out of frustration, I set the height of ul.AspNet-menu to 7000px. And it worked! Actually, it the images were a little too tall with that, but after trying some random, large round numbers, I found that 4000px is perfect.

Question: What kind of sense does that make? I don't get it. Does anyone have a guess?

Thanks,
 Andy

 I might be able to help explain if you could post the rendered control's xhtml.