link works on firefox but not on explorer

[lisa007]

this link works on firefox but not on explorer help please cant seem to see whats wrong with it

     <li>
        <a href="resume.html">
    <button class="rounded">
      <span>Contact</span>
    </button>
    </a>
</li>

and this is the CSS

button {
border: 0 none;
cursor: pointer;
font-weight: bold;
padding: 0 15px 0 0;
text-align: center;
height: 30px;
line-height: 30px;
width: 100px;
 
 
}
 
button.rounded {
background: transparent url( btn_right.png ) no-repeat scroll right top;
clear: left;
font-size: 0.8em;
}
 
button span {
display: block;
padding: 0 0 0 15px;
position: relative;
white-space: nowrap;
height: 30px;
 
line-height: 30px;
 
}
 
button.rounded span {
background: transparent url( btn_left.png ) no-repeat scroll left top;
color: #FFFFFF;
}
 
button.rounded:hover {
background-position: 100% -30px;
}
 
button.rounded:hover span {
background-position: 0% -30px;
}
 
button::-moz-focus-inner {
border: none;
}
 
 
ul{
list-style:none;
 
}
 
li{
 
display:inline;
 
}
 
 
 
a{
text-decoration:none}

[drhowarddrfine]

<button> is a form element and can't be used as a linked element. This may be working in Firefox because it might be taking it as a custom element as in XHTML while IE does not understand XHTML and fails.

[lisa007]

@drhowarddrfine
how do i change cz now evrytime i delete the button name on the css all the effects goes away like

button.rounded {
background: transparent url( btn_right.png ) no-repeat scroll right top;
clear: left;
font-size: 0.8em;
}

if i delet the button the effects is erased

[drhowarddrfine]

Of course removing the button removes the button and everything that goes with it. You should apply all that styling to the <a> itself and/or the <li> and you can accomplish the same thing.

[lisa007]

i tried i tried and i tried i still couldnt get the same effect as with the button i tried using the <a> like u said bt the effect still wasnt the same i replace button on the css with the <a> and many other ways bt still got nothing

i used this html

<a href="resume.html" class="rounded">
      <span>Save</span>    </a>

and replaced all the button on the css with the <a> but still could get the same effect
and sometimes it will bring the image but it would be text aligned on the wrong place