I am new in asp.Net, I'm coming over from Ruby on Rails.
Here is the problem, I have a asp:Menu control (no web.sitemap) that
I'm using for a tab menu in the header of my website. I have it
configured as follows:
<asp:Menu ID="menuTabs" runat="server" CssClass="menuTabs"
Orientation="Horizontal" OnMenuItemClick="menuItemClicked"
oninit="menuInit">
<StaticSelectedStyle
CssClass="MenuHorizontalTabsSelectedMenuItem" />
<StaticHoverStyle CssClass="MenuHorizontalTabsHoverMenuItem" /
>
<StaticMenuItemStyle CssClass="MenuHorizontalTabsMenuItem" />
<StaticItemTemplate>
<div>
<span>
<asp:Literal runat="server" ID="Literal1" Text='<
%# Eval("Text") %>' />
</span>
</div>
</StaticItemTemplate>
<Items>
<asp:MenuItem Text="Home" Value="0" />
<asp:MenuItem Text="Project" Value="1" />
<asp:MenuItem Text="Manpower" Value="2" />
</Items>
</asp:Menu>
The Css classes as follows:
.menuTabs
{
z-index: 1;
position: absolute;
top: 1.6em;
right: 1em;
font-family: 'Trebuchet MS' , 'Lucida Grande' , Arial, sans-serif;
font-size: medium;
}
.MenuHorizontalTabsMenuItem * div
{
background: url('../../images/tableft.png') no-repeat scroll left
top;
padding: 4px 3px 2px 12px;
}
.MenuHorizontalTabsMenuItem * span
{
background: url('../../images/tabright.png') no-repeat scroll
right top;
padding: 4px 20px 2px 6px;
color: #a9b0d9;
}
.MenuHorizontalTabsSelectedMenuItem * div
{
background-position: 0px -29px;
color: white;
text-decoration: none;
}
.MenuHorizontalTabsSelectedMenuItem * span
{
background: url('../../images/tabright.png');
background-repeat: no-repeat;
background-position: right -29px;
color: white;
text-decoration: none;
}
.MenuHorizontalTabsHoverMenuItem * div
{
background-position: 0px -29px;
color: white;
text-decoration: none;
}
.MenuHorizontalTabsHoverMenuItem * span
{
background: url('../../images/tabright.png');
background-repeat: no-repeat;
background-position: right -29px;
color: white;
text-decoration: none;
}
The big problem now is that in Firefox when I click and hold down the
mouse button, i get 4 red pixels at the top and bottom left corners of
the tab that i clicked. When I release the mouse button, the red dots
turn blue. Once I am redirected (OnMenuItemClick event handler) the
requested page loads without the dots in the tab menu. Why am I
getting these dots? How can I get rid of them! (Pulling my hair out!!)
Here are some pictures of the culprits!
http://www.flickr.com/photos/34446...@n06/3201657602/
http://www.flickr.com/photos/34446...@n06/3200812601/
