why isn't a href around an input type submit not working in IE? (and what can I do to fix it)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
</head>
<body>
<a href="1.html"><input type="submit" class="button_active" value="1"></a>
<a href="2.html"><input type="submit" class="button" value="2"></a>
<a href="3.html"><input type="submit" class="button" value="3"></a>
</body>
</html>
style.css:
* {
margin: 0;
padding: 0;
}
/* CSS Buttons: http://www.web4site.de/css/css-buttons.php */
.button {
padding:0;
margin:0;
border:none;
font-size:14px;
background: url(../img/button.gif) no-repeat center;
color: #000000;
height:27px;
width:134px;
font-variant:small-caps;
}
.button:hover {
padding:0;
margin:0;
border:none;
font-size:14px;
background: url(../img/button.gif) no-repeat center;
color: #FF0000;
height:27px;
width:134px;
text-decoration:none;
font-variant:small-caps;
}
.button_active {
padding:0;
margin:0;
border:none;
font-size:14px;
background: url(../img/button.gif) no-repeat center;
color: #FF0000;
height:27px;
width:134px;
font-variant:small-caps;
}
This works fine in firefox ...
You can do do it. The input type submit should be inside of a form. Then all you have to do is write the link you want to redirect to inside the action attribute that is inside the form tag.
<a href="1.html"><input type="text" class="button_active" value="1"></a>
<a href="2.html"><input type="text" class="button" value="2"></a>
<a href="3.html"><input type="text" class="button" value="3"></a>
Try that. Unless you truly need to stick with the type as submit, then what I provided should work. If you are going to stick with submit, then everything mentioned above is correct, it makes no sense.
Place the link location in the action="" of a wrapping form tag.
Your first link would be:
<form action="1.html">
<input type="submit" class="button_active" value="1">
</form>
I agree with Quentin. It doesn't make sense as to why you want to do it like that. It's part of the Semantic Web concept. You have to plan out the objects of your web site for future integration/expansion. Another web app or web site cannot interact with your content if it doesn't follow the proper use-case.
IE and Firefox are two different beasts. There are a lot of things that IE allows that Firefox and other standards-aware browsers reject.
If you're trying to create buttons without actually submitting data then use a combination of DIV/CSS.
Why would you want to put a submit button inside an anchor? You are either trying to submit a form or go to a different page. Which one is it?
Either submit the form:
<input type="submit" class="button_active" value="1" />
Or go to another page:
<input type="button" class="button_active" onclick="location.href='1.html';" />
It doesn't work because it doesn't make sense (so little sense that HTML 5 explicitly forbids it).
To fix it, decide if you want a link or a submit button and use whichever one you actually want (Hint: You don't have a form, so a submit button is nonsense).
Source: Stackoverflow.com