Using rollover effects with CSS in ASP.net 2.0

[easyeman]

Hey all, well I got that menu working but now I need to fix the header. Basically, I want to do rollover effects for a button, but it has to be with a server control. I got it working just like I want it to with <a> tags and such, and then using CSS...but I need to make it work with ASP.net server controls but it's not wanting to work right. I guess I just need to know how to convert the existing code I have to make it a server control, but have it work like it is now.

I'll post the code so you can see what I have...the html for the header buttons and the CSS I have for it. I've researched on the web and cannot find how to do this with server controls, but I found some on just rollover in general. The reason I need these as server controls is so that the other parts of the site work correctly since they link off what's in the server control. I'm sure there's a way but I just can't get it to work right and cannot find anything major I can use online (at least from what I've seen). Any help would be greatly appreciated...thanks!

<td colspan="4">
            <div class="cssnav"><a href="/Login.aspx" runat="server" title="Log In"><img src="/images/header/downbtn.jpg" alt="Log In" /><span>Log In</span></a></div>
            <div class="cssnav"><a href="/info/FAQ.aspx" runat="server" title="Help"><img src="/images/header/downbtn.jpg" alt="Help" /><span>Help</span></a></div>
            <div class="cssnav"><a href="/info/ContactUs.aspx" runat="server" title="Contact Us"><img src="/images/header/downbtn.jpg" alt="Contact Us" /><span>Contact</span></a></div>
            <div class="cssnav"><a href="/info/AboutUs.aspx" runat="server" title="About Us"><img src="/images/header/downbtn.jpg" alt="About Us" /><span>About Us</span></a></div>
            <div class="cssnav"><a href="/Account/MyAccount.aspx" runat="server" title="Account"><img src="/images/header/downbtn.jpg" alt="Account" /><span>Account</span></a></div>
            <div class="cssnav"><a href="/default.aspx" runat="server" title="Home"><img src="/images/header/downbtn.jpg" alt="Home" /><span>Home</span></a></div>
        </td>

body
{
}

.cssnav
{
    position: relative;
    float: right;
    font-family: verdana;
    background: url(/images/header/overbtn.jpg) no-repeat;
    white-space: nowrap;
    display: block;
    width: 80px;
    height: 20px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.cssnav a
{
    display: block;
    color: #000000;
    font-size: 10px;
    width: 80px;
    height: 20px;
    float: left;
    color: #FFFFFF;
    font-weight: bold;
    text-decoration: none;
    overflow: hidden;
}

.cssnav a:hover
{
    color: #000000;
    font-weight: bold;
}

.cssnav img
{
    width: 80px;
    height: 20px;
    border: 0;
}

* html a:hover
{
    visibility: visible
}

.cssnav a:hover img
{
    visibility: hidden
}

.cssnav span
{
    position: absolute;
    left: 2px;
    top: 3px;
    text-align: center;
    width: 80px;
    cursor: pointer;
}

 

[easyeman]

Hey, wow I actually got something figured out haha...ignore my first post I guess, since I found something that worked

What I ended up doing what putting the <span> tag outside and then the <asp:hyperlink...> inside it, so it's working.

Here's what I have for it, and then I just have two properties in the CSS to link it (what I think I was doing was setting the link and image in the Hyperlink, instead of the CSS, but once I put it in CSS it worked).

<table>
            <tr>
                <td style="width: 80px; height: 20px" valign="middle">
                    <span class="buttontest">
                        <asp:HyperLink ID="Hyperlink2" runat="server" NavigateUrl="~/default.aspx" CssClass="buttontest">Home</asp:HyperLink>
                    </span>
                </td>
                <td style="width: 80px; height: 20px" valign="middle">
                    <span class="buttontest">
                        <asp:HyperLink ID="Hyperlink4" runat="server" NavigateUrl="/Account/MyAccount.aspx" CssClass="buttontest">Account</asp:HyperLink>
                    </span>
                </td>
                <td style="width: 80px; height: 20px" valign="middle">
                    <span class="buttontest">
                        <asp:HyperLink ID="Hyperlink9" runat="server" NavigateUrl="/info/AboutUs.aspx" CssClass="buttontest">About Us</asp:HyperLink>
                    </span>
                </td>
            </tr>
        </table>

CSS:

.buttontest
{
    position: relative;
    float: right;
    background-image: url(/images/header/downbtn.jpg);
    color: #FFFFFF;
    display: block;
    width: 80px;
    height: 20px;
    margin: 0;
    padding: 0;
    font-size: 10px;
    font-family: Verdana;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
}

.buttontest:hover
{
    background: url(/images/header/overbtn.jpg) no-repeat;
    color: #000000;
    font-weight: bold;
}

That seems to work but the text isn't aligning right (I want it centered in the button). Any quick idea on what I need to set to do that. I believe otherwise it's just like I want it so it's pretty much done =) Thanks for the help.