I love doing this kind of work...The red and blue color gives the clue that
it must be something to do with the anchor tag. (hover, visited state etc..)
For such issues I would suggest anyone to take a look at the source of the
page generated, to get more ideas on how to proceed.
Try declaring the following classes along with your styles, hope it helps:
.MenuHorizontalTabsMenuItem * a
{
color:Transparent;
}
.MenuHorizontalTabsMenuItem * a:hover
{
color:Transparent;
}
.MenuHorizontalTabsMenuItem * a:visited
{
color:Transparent;
}
The actual color of the menuitem should be set in the appropriate div and
span versions of the css class(which you have already done).
P.S.: using "Transparent" as a value to the color property is technically
incorrect(says my VS 2008), but then, you are using an image as a
background, and not any color.
Cannot think of an alternative to that right now...so leaving it at that.
On Fri, Jan 16, 2009 at 8:00 PM, chrismaduro <[email protected]> wrote:
>
> 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/
>
>
--
Kaarthik,
http://coding-passion.blogspot.com
