CODEWITHSUNDEEP
cssinternet-explorer-9
Forty-Two
Forty-Two

Reputation: 7605

buttons and links in ie9

I've seen tons of ie css questions, but none that seem to address what I'm asking here. Forgive me if I've missed one and asked a dupe:)

I have a website (asp.net mvc2, c#) littered with links similar to this:

<a href="<%= Url.Action("Action", "Controller")%>">
    <div class="buttons">
        <button type="button"> Click Me</button> 
    </div>
</a>

These work fine in Chrome, FF and Safari, but not in IE9. The button itself seems to cancel out the link. In other words, the link is only active on the very outer edge of the button (if at all).

I'm not very fluent with Css, but here's the relevant bit (I think, though I suppose the problem could lie elsewhere...):

    .buttons a, .buttons button{
       display:inline-block;
       text-align: left;
       float:left;
       margin:0 7px 0 0;
       background-color:#f5f5f5;
       border:1px solid #0b0101;
       border-top:1px solid #eee;
       border-left:1px solid #eee;    
       font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
       border-top-left-radius: 3px;
       border-top-right-radius: 3px;
       border-bottom-left-radius: 3px;
       border-bottom-right-radius: 3px;
       line-height:130%;
       text-decoration:none;
       font-weight:bold;
       color:#565656;
       cursor:pointer;
       padding:5px 10px 6px 7px; /* Links */
   }
   .buttons button{
       width:auto;
       overflow:visible;
       padding:4px 10px 3px 7px; /* IE6 */
   }
   .buttons button[type]{
       padding:5px 10px 5px 7px; /* Firefox */
       line-height:17px; /* Safari */
   }

Does anyone know a workaround or hack for this? Thanks!

Upvotes: 1

Views: 329

Answers (2)

Forty-Two
Forty-Two

Reputation: 7605

Thanks for the feedback. I didn't realize wrapping a button in an <a> tag was invalid, but sure enough, it is. Anyway the simplest fix for this, imo, was dropping the <a> tag, and adding 

onclick="window.location.href='<%=Url.Action("Action", "Controller")%>'"

to the <button> element, essentially turning the button into a link.

Upvotes: 0

Spudley
Spudley

Reputation: 168685

I'm not sure what you're trying to achieve with a <button> tag inside an <a> tag, but it isn't valid HTML, so it's no surprise it's not working properly -- perhaps more of a surprise that it is working in some browsers.

In any case, there's no need for this kind of thing, as an <a> tag can be styled to look and work like a button without needing any additional elements inside it.

For example, see http://www.cssbuttongenerator.com/ which produces CSS for a plain <a> tag with nothing inside it except the button text.

There are dozens of other sites with similar tutorials and techniques, but the basic advice I'd give you hear is to drop the <div> and the <button> and just go with a plain <a> tag.

Hope that helps.

Upvotes: 1

Related Questions