Links on using lables, hraf AND css wont work in IE

StackOverflow https://stackoverflow.com/questions/19552458

Question

So I have this <label> within a <a href...> that wont work. For styling, when I get the mouse over the label it changes color and if you click any part of the label will link. Ive tryied this on Chrome, Firefox and Safari and it works perfectly but in IE (10) nothing works: either the link and the CSS. (if I remove the <label> it works...) The code is as follows:

HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body bgcolor="#ED454C" link="black" vlink="black" alink="white" >
<table bgcolor="#FAFAFA" style="border-style:solid;border-color:black;" cellspacing="0" cellpadding="0" > 
 <tr>
  <td><a href="archive.php"><label class="uno">This wont work :(</label></a></td> 
 </tr>
</table>
</body>
<footer>
</footer>
</html>

CSS:

label {
 border:0px solid #FF7E7E;
 padding:20px;
 margin:0px 0px 0px;
 display:block;

}

.uno:hover {
 background:#33B3CE;
 cursor:pointer;
}
Was it helpful?

Solution

Labels are used to make forms more accessible. You could change the labels to spans, and change the CSS to reflect that. If you're just trying to change the color of the link on hover, you could do that with the link alone, as seen in this fiddle. All I did was remove the label, and adjust the css to use a, and a:hover

a {
    border:0px solid #FF7E7E;
    padding:20px;
    margin:0px 0px 0px;
    display:block;
}

a:hover {
    background:#33B3CE;
    cursor:pointer;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top