• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 860
  • Last Modified:

ASP.NET menu gradient issue

I am using the ASP.NET menu control and want to put a gradient on the first menu level using CSS.  So I created a gradient image and am using it for the background.  That works well as long as I do not change the height of the first menu level away from the default.  When I do change the height, the text has this off-colored square area around it that is very distracting.  I am not sure how to work around this.  I have tried images of all sizes and nothing seems to help if I end up changing the height of the menu item.  I would appreciate your help in figuring out a way I can remove this off-color square/frame around the text that is messing up the gradient look.

Steps to reproduce:
1.  Add a new .aspx page to a web project.
2.  Paste the "ASP.NET CODE" code snippet in the design of the page.
3.  Add a stylesheet to the project and paste the "CSS CODE" code snippet in there.  Link the sylesheet to the page
4.  Create and images folder and paste the gradient.png file in there.
5.  View the page in a browser.  Note the odd square around the text.
6.  In the .css file, comment out the Height property and re-view the page.  Note that it looks nice now.

Notes:
1. I know there is a filter/transform style available, but I can't use it because it's only for IE and I need cross-browser.
2.  If I make the filter very large (like 100 pixels high, and 10 pixels wide), the text border anomaly does go away, but I lose the gradient effect of the background.
3.  I have tried 10 X 25, 10 X 30, 1 X 1, etc.
4.  I am using IE 7
ASP.NET CODE
=============
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
            <LevelMenuItemStyles>
                <asp:MenuItemStyle CssClass="level1" Font-Underline="False" />
            </LevelMenuItemStyles>
            <Items>
                <asp:MenuItem Text="New Item" Value="New Item">
                    <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                    <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                </asp:MenuItem>
                <asp:MenuItem Text="New Item" Value="New Item">
                    <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                    <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                </asp:MenuItem>
                <asp:MenuItem Text="New Item" Value="New Item">
                    <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                </asp:MenuItem>
                <asp:MenuItem Text="New Item" Value="New Item">
                    <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                </asp:MenuItem>
                <asp:MenuItem Text="New Item" Value="New Item">
                    <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                </asp:MenuItem>
            </Items>
        </asp:Menu>

CSS CODE
=========
.level1 
{
	height: 25px;
	color: #ffffff;	
	background-image: url("images/gradient.png");
	background-repeat: repeat;
	border-right: solid 1px #ffffff;
	padding: 0px 11px 0px 11px;
	margin:0px 0px 0px 0px;
}

Open in new window

gradient.png
0
dentyne
Asked:
dentyne
  • 3
  • 2
1 Solution
 
sajayj2009Commented:
background-repeat: repeat-x;
0
 
dentyneAuthor Commented:
Thanks for the comment, but that doesn't seem to work either.  I experience the same behavior.
0
 
sajayj2009Commented:
CSS CODE
=========
.level1
{
        height: 25px;
        color: #ffffff;
        background-image: url("images/gradient.png");
        background-repeat: repeat-x;
        border-right: solid 1px #ffffff;
        padding: 0px 11px 0px 11px;
        margin:0px 0px 0px 0px;
}
0
 
dentyneAuthor Commented:
Thanks for the comments regarding repeat-x.  That does not work when the height of the menu item is changed from the default.  I examined the rendered HTML closely and did some more research and it appears that the background image is being applied to the TD and the A tags separately.  So I tried this and it seemed to solve the problem:

.level1 a
{
    background: transparent !important;
}

and that seemed to solve the problem.  Unless there are any other comments around the pitfalls of this approach or comments with better solutions, I will request that this will be closed.

Thanks for your time.
0
 
sajayj2009Commented:
congrats dentyne.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now