asp.net over riding css menu control

Question

I'm creating a asp.net web page and some auto generated CSS is over riding my style sheet. I'm not sure where the properties would be to set the values properly, or how to disable the auto generated CSS by my web application. Here is the code.

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="FrontEnd.master.cs"     Inherits="pigninja.FrontEnd" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server" >
<title>Title</title>
<link href="../Styles/Styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="pageWrapper">
<div id="header"></div>
<div id="navigation">
    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" 
        Width="100%"   StaticItemFormatString="&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp; {0} &nbsp">
    <Items>
        <asp:MenuItem NavigateUrl="../Default.aspx" Text="Home" Value="Home">
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="../About.aspx" Text="About Me" Value="About Me">
        </asp:MenuItem>
        <asp:MenuItem NavigateUrl="../Programming.aspx" Text="Programming" 
            Value="Programming"></asp:MenuItem>
        <asp:MenuItem NavigateUrl="../Rants.aspx" Text="Rants" Value="Rants">
        </asp:MenuItem>
    </Items>
</asp:Menu></div>
<div id ="content"><asp:ContentPlaceHolder ID="Content" runat="server"> 
</asp:ContentPlaceHolder></div>
<div id="footer"><p>Footer</p></div>
</div>
</form>
</body>
</html>

and here is the css

*
{
font-family: Arial, Sans-Serif;
}

body
{
margin: 0;
background-color:Black;
}

a
{
text-decoration: none;
color: #b30707;
} 

a:hover
{
text-decoration: underline;
}

#header
{
background-image: url(../img/header.jpg);
position:relative;
margin:auto;
height: 250px;
}

#pageWrapper
{
width:844px;
margin: auto;
background-color:#ccc;
}

#navigation
{
width: auto;
text-align:center;
height: 36px;
padding-top: 15px;
padding-left: 17px;
background-color: #9C989A
}

#content
{
border-style:solid;
border-width: 2px;
border-color: #b30707;
padding: 15px;
}

#footer
{
text-align:center;
}

I added this line to circumvent the problem with my menu control not spanning the parent element properly. I plan to remove it once the CSS works as expected.

StaticItemFormatString="&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp; {0} &nbsp"

Here is the rendered code as requested.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"><title>
Title
</title><link href="Styles/Styles.css" rel="Stylesheet" type="text/css" /><style   type="text/css">
/* <![CDATA[ */
#Menu1 { width:100%; }
#Menu1 img.icon { border-style:none;vertical-align:middle; }
#Menu1 img.separator { border-style:none;display:block; }
#Menu1 img.horizontal-separator { border-style:none;vertical-align:middle; }
#Menu1 ul { list-style:none;margin:0;padding:0;width:auto; }
#Menu1 ul.dynamic { z-index:1; }
#Menu1 a { text-decoration:none;white-space:nowrap;display:block; }
#Menu1 a.static { padding-left:0.15em;padding-right:0.15em; }
#Menu1 a.popout { background-image:url("/WebResource.axd?  d=xjCds24on9XfE0DBajC4vRjqPwEZnPWc2oYtv118cqG5ViUhvTqbbGX-  kFRHBgPTk01twuHMnUgYwxiSOFVm4FdDFd1DRzkQC6dPTjhsTD81&t=634773918900000000");background-  repeat:no-repeat;background-position:right center;padding-right:14px; }
/* ]]> */
</style></head>
<body>
<form method="post" action="" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"     value="/wEPDwULLTEwMDUyNjYzMjhkZMqkGL/k2S4bUfDNJETNEEgreeQwj//8qMPH/3Jfp1j8" />
</div>


<script src="/WebResource.axd?d=JhWUzx8WLq0au7xqJj_xdb8v-NEKpWcJ1R4twSIpfaW-Hg2- LRc2Fqrqmb31NCEsThyJFzieaKJwGQI8BjHNp9tN4M8jNjJ1fHS70aQkb681&amp;t=634773918900000000"   type="text/javascript"></script>
 <div id="pageWrapper">
<div id="header"></div>
<div id="navigation"><a href="#Menu1_SkipLink"><img alt="Skip Navigation Links"  src="/WebResource.axd? d=uVlrphLtejMyCQfMUd5MSwr7OFiIQBNYbtiTqDgsAQmI5_6XjhY8AFmAwPz4RAV7D87YEb3m48XzVHtpmam77PhCI6     AVXXVAbALWvpCcB1w1&amp;t=634773918900000000" width="0" height="0" style="border- width:0px;" /></a><div id="Menu1">
<ul class="level1">
    <li><a class="level1"  href="Default.aspx">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  Home &nbsp</a>   </li><li><a class="level1"  href="About.aspx">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  About Me  &nbsp</a></li><li><a class="level1"  href="Programming.aspx">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  Programming  &nbsp</a></li><li><a class="level1"  href="Rants.aspx">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  Rants &nbsp</a>   </li>
</ul>
</div><a id="Menu1_SkipLink"></a></div>
<div id ="content">
<p>Content</p>
</div>
 <div id="footer"><p>Footer.</p></div>
</div>

<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'Menu1', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
</body>
</html>

Can you put the rendered HTML code here? Just see view source and copy and paste the content of — Murali Murugesan, Nov 09 '12 at 06:55

score 3 · Accepted Answer · answered Nov 09 '12 at 09:10

What I ended up doing was turning off the CSS that was being applied inline through the properties window. More specifically I set the "IncludeStyleBlock" property to false. Before I did this, I took the auto generated CSS from my view source and placed it in my styles sheet. I was then able to better control the CSS but it did not solve my problem. In order to solve my issue I had to include a CssClass="menuClass" in my asp:Menu block like this.

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" 
        IncludeStyleBlock="False" StaticEnableDefaultPopOutImage="False"    CssClass="menuClass">

I then in turn set my CSS properties like so.

.menuClass a.static.highlighted
{
color:Red !important;
text-decoration:underline !important;
}

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

The default Menu control is notoriously unfriendly to CSS.
You can work around this by using a css friendly menu control adapter.

Take a look at this Menu control adapter provided by the asp.net team.
It will help you get rid of a lot of CSS hacks that are otherwise needed to style the asp.net menu.

If you are unaware of Control Adapters, you should refer the walk through to get started.

edited May 23 '17 at 11:43

Community

1
1

answered Nov 09 '12 at 07:26

nunespascal

17,584
2
43
46

score 0 · Answer 3 · answered May 30 '13 at 16:05

The anchor tag that ASP.NET puts in automatically adds the extra vertical space above the menu. An anchor tag gets put above the menu automatically and that screws up the rendering in Internet Explorer and Google Chrome. It works properly in Mozilla Firefox even with the anchor with the image.

To fix, add the SkipLinkText="" attribute to your ASP.NET menu control and that will fix the rendering issue.

<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" SkipLinkText="">

asp.net over riding css menu control

3 Answers3