menu navigation control and CSS interference

[Chuck P]

I created a horizontal <asp:Menu with the following settings

<StaticHoverStyle BackColor="#284E98" ForeColor="White" />
<DynamicHoverStyle BackColor="#284E98" ForeColor="White" />

When I display the menu in Firefox or IE the ForeColor text is BLUE not White.
Also the dynamic menu items are show about 100 pixels beneath the static
horizontal menu in IE.

If I take out the style sheet everything is fine.

I don't know how the control is rendered into HTML but I assume that the
menu item text is being rendered as an A tag and the menuitems as an LI.

I don't understand why the CSS A tag definitions are overriding the colors
set in the menu properties. I would think specifying white in the control
would have precedence over the style sheet.

I also don't know the potentially large list of things I need to specify in
either a style sheet for the menu or in the control directly to have the menu
render as stated in the control's property settings.

 

[Walter Wang [MSFT]]

Hi Chuck,

By default, the Menu control is rendering using <table> and is not very CSS
friendly. You may want to use the ASP.NET 2.0 CSS Friendly Control Adapters
instead:

http://www.asp.net/CSSAdapters/WalkThru/WalkThrough.aspx

Here you could find more information about how to create CSS Friendly
Websites with ASP.NET 2.0:

http://aspnet.4guysfromrolla.com/articles/112906-1.aspx

Hope this helps.

Sincerely,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications. If you are using Outlook Express, please make sure you clear the
check box "Tools/Options/Read: Get 300 headers at a time" to see your reply
promptly.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Chuck P]

I like to keep my sites pretty lean and clean. Is their another way to get
it to work?

 

[Walter Wang [MSFT]]

Hi Chuck,

OK, if you do not want to use the CSS Friendly Control Adapters. Let's get
back to the issue in your first post.

Based on my understanding, the issue is:

* You have several external stylesheet links in your page
* You found the Menu's color setting is not working, unless you removed the
stylesheet links.

Please correct me if I've misunderstood anything.

By default, an item in Menu control is rendered using following tag
sequence:

<tr><table><tr><td><a>

It also generates some inline CSS rules such as:

<style type="text/css">
.menu1_0 {
background-color:white;visibility:hidden;display:none;position:absolute;left
:0px;top:0px; }
.menu1_1 { text-decoration:none; }
.menu1_2 { }
.menu1_3 { color:White; }
.menu1_4 { color:White;background-color:#284E98; }
.menu1_5 { color:White; }
.menu1_6 { color:White;background-color:#284E98; }

</style>

The CSS class selectors will be applied to the <table> or <a> tag at
runtime when you hover the mouse to menu item. If it's not working, it's
probably because the linked external stylesheet has some rules will affect
this. Try to search for if there's any rules related to <table> or <a> in
these files. If in doubt, please send me a copy of the CSS files or post
here for inspection.

Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.