Hello,
I've created a simple horizontal menu using Web.sitemap using the ASP.NET 2.0 menu control after reading the chapter. It works, but it seems to insert a small visible pixel-spacer immediately above the menu whenever I apply a 'border-style:' property to the CSS.
Looking at the rendered source code, I can see that the menu is rendered as tables. But immediately before the rendered table I get this:
<a href="#MenuHorizontal_SkipLink"><img alt="Skip Navigation Links"
src="/HorizontalMenu01/WebResource.axd?d=sjxtv-pUFoK22eEHMrLdIA2&t=632741634327656250" width="0" height="0" style="border-width:0px;" /></a>
The name of my menu control is "MenuHorizontal" which coincides with the above "href = ..." value. How can I get rid of this pixel-spacer thing? I've managed to narrow it down to the CSS property 'border-style' by inserting and removing, comments.
I'm using IE 6 and Firefox.
I have supplied the basic code below. Just remove the comments from the line
/*border-style: solid;*/
in the CSS to see this strange spacer. It also appears in Firefox.
Can you suggest how to get rid of this as I would like to have borders in my menu? Also, I noticed that the wrox united website has this spacer thing as well. You can see it as a yellow line when the mouse rolls over it just above the word 'Home' in the navigation.
Cheers,
Jack.
/* ASP.NET 2.0 Code */
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="FormMain" runat="server">
<div>
<div id="Navigation">
<asp:SiteMapDataSource ID="NavigationHorizontal" runat="server" ShowStartingNode="false" />
<asp:Menu ID="MenuHorizontal" runat="server" DataSourceID="NavigationHorizontal"
Orientation="Horizontal"
StaticDisplayLevels="1"
StaticEnableDefaultPopOutImage="false" >
</asp:Menu>
</div>
</div>
</form>
</body>
</html>
/* Stylesheet */
#Navigation a:link, #Navigation a:visited
{
background-color: #c2cfdc;
color: #2b366e;
font-weight: bold;
border-color: Red;
/*border-style: solid;*/
border-width: 1px;
}
/* web.sitemap */
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="Default.aspx" title="Home" description="Home page">
<siteMapNode title="Option 1" description="Option1">
<siteMapNode url="Option1-1.aspx" title="Option1-1" description="Option1-1" />
<siteMapNode url="Option1-2.aspx" title="Option1-2" description="Option1-2" />
<siteMapNode url="Option1-3.aspx" title="Option1-3" description="Option1-3" />
<siteMapNode url="Option1-4.aspx" title="Option1-4" description="Option1-4" />
</siteMapNode>
<siteMapNode title="Option 2" description="Option2">
<siteMapNode url="Option2-1.aspx" title="Option2-1" description="Option2-1" />
<siteMapNode url="Option2-2.aspx" title="Option2-2" description="Option2-2" />
<siteMapNode url="Option2-3.aspx" title="Option2-3" description="Option2-3" />
<siteMapNode url="Option2-4.aspx" title="Option2-4" description="Option2-4" />
</siteMapNode>
<siteMapNode title="Option 3" description="Option3">
<siteMapNode url="Option3-1.aspx" title="Option3-1" description="Option3-1" />
<siteMapNode url="Option3-2.aspx" title="Option3-2" description="Option3-2" />
<siteMapNode url="Option3-3.aspx" title="Option3-3" description="Option3-3" />
<siteMapNode url="Option3-4.aspx" title="Option3-4" description="Option3-4" />
</siteMapNode>
<siteMapNode title="Option 4" description="Option4">
<siteMapNode url="Option4-1.aspx" title="Option4-1" description="Option4-1" />
<siteMapNode url="Option4-2.aspx" title="Option4-2" description="Option4-2" />
</siteMapNode>
</siteMapNode>
</siteMap>
Strange pixel-spacer when menu control has borders
