menu in asp.net with css troubleshooting

unoho · **Posted:** Fri Jun 17, 2011 1:44 pm

Hey guys, so i am trying to make a website where it will have few menus at the top but problem i got into is that my css is not working with the menu. i got the original css from a template file and i am trying to use that on my site by copying the css over to my css file. I have attached a copy of what i am trying to achieve. any idea/tips/comments/help is always appreciated. thanks

code:

body
{
}
/* TAB MENU
----------------------------------------------------------*/

div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}

div.menu
{
padding: 4px 0px 4px 8px;
}

div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}

div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}

div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}

div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}

and my asp.net file is

code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!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 runat="server">
<link href="App_Themes/Theme1/Stylesheet1.css" rel="stylesheet" type="text/css" />
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Vertical">
<Items>
<asp:MenuItem NavigateUrl="~/webform1.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/webform1.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>

2goto1 · **Posted:** Sat Jun 18, 2011 9:56 am

What does the rendered html look like for the asp:menu tag? Can you paste your browser's source view?

unoho · **Posted:** Mon Jun 20, 2011 9:18 am

hey sorry for the late reply..i didn't have access to the source code until today. here is the source view. i also attached a copy of how the menu looks like

code:

<!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><link href="App_Themes/Theme1/Stylesheet1.css" rel="stylesheet" type="text/css" /><title>
Untitled Page
</title><style type="text/css">
.NavigationMenu_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.NavigationMenu_1 { text-decoration:none; }
.NavigationMenu_2 { }

</style></head>
<body>
<form name="form1" method="post" action="WebForm1.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTA3NDMyMDZkZMgYQlqq8PQ96QYUcCKVmHpld092" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>

<script src="/WebResource.axd?d=S_HKeQsGaaI_vO6luaPAway3g98vm5NaanXZc7uKUQ0lf2pztywZ2OHiW6vPuW91T-lueWon4JbS0pyaasQuIg8H4QI1&t=634382133928560151" type="text/javascript"></script>

<script src="/WebResource.axd?d=KqLJgaW9yqiTBpoC5vRlo7KGIxs3TXRavQmsZDfiR5BEClPjb1uULpT7aMiPDL6wvnQ20GFcui-n68l37uX3-I9H-8g1&t=634382133928560151" type="text/javascript"></script>
<div class="clear hideSkiplink">
<a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=vZ04OAkXAPyAJOdwDPrtrJql5qzv00QprC37naPv_raBo_NajDqxa8sv3MI86n6rwVkAN_QEeidpujp7LplVKPCmnKM1&t=634382133928560151" width="0" height="0" style="border-width:0px;" /></a><table id="NavigationMenu" class="menu NavigationMenu_2" IncludeStyleBlock="tru" cellpadding="0" cellspacing="0" border="0">
<tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="NavigationMenun0">
<td><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="NavigationMenu_1" href="webform1.aspx">Home</a></td>
</tr>
</table></td>
</tr><tr onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="NavigationMenun1">
<td><table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;width:100%;"><a class="NavigationMenu_1" href="webform1.aspx">About</a></td>
</tr>
</table></td>
</tr>
</table><a id="NavigationMenu_SkipLink"></a>
</div>

<script type="text/javascript">
//<![CDATA[
var NavigationMenu_Data = new Object();
NavigationMenu_Data.disappearAfter = 500;
NavigationMenu_Data.horizontalOffset = 0;
NavigationMenu_Data.verticalOffset = 0;
//]]>
</script>
</form>
</body>
</html>

2goto1 · **Posted:** Mon Jun 20, 2011 10:12 am

It looks like from the rendered HTML, that there is a <table class="menu NavigationMenu_2">. Your CSS rules look like they're defined as div.menu. Were you intended the styles for div.menu to apply to the <table tag that has the class menu? If so, they won't apply. You'd have to change your CSS rule to table.menu for that to happen.

All of the CSS selectors that you have from your first posting (div.menu, div.menu ul, div.menu ul li a, etc.) won't apply to the rendered HTML as is.

Also the CSS rules from your first posting assume ul and li tags, whereas your rendered menu uses HTML table tags.

You'll have to change your CSS rules to apply to your HTML structure

unoho · **Posted:** Mon Jun 20, 2011 11:21 am

ya tht's the problem. how is the table being generated while i am clearly using div tag.. ughh

2goto1 · **Posted:** Mon Jun 20, 2011 12:56 pm

The <asp:Menu server tag renders as an HTML table. Since you're only rendering a Home and an About menu item, if you're planning to just have those 2 menu items, there's really no need/benefit to use asp:menu, unless you want the benefit of the correct menu item getting dynamically selected with a 'class="selected"' or something like that. But that's easy enough to hardwire for small websites. I'd just hand code the menu in HTML in that case. For larger menus or more dynamic requirements there are other menu controls that are more lightweight.

unoho · **Posted:** Mon Jun 20, 2011 1:33 pm

ya i used those 2 for just an exam. it's supposed to be more dynamic.. like update a criteria in the database and menu would get updated automatically.

EDIT: okay..this is very weird.. it renders fine when i do it in vs2010 but it wudn't work on vs2005 ,,, i guess it depends on how they render objects

	Computer Science Canada Programming C, C++, Java, PHP, Ruby, Turing, VB Username: Password: Register
Wiki Blog Search Turing Chat Room Members