CODEWITHSUNDEEP
htmlcssformsbutton
Marc
Marc

Reputation: 151

href around input type submit

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 ...

Upvotes: 14

Views: 213143

Answers (6)

Mayk
Mayk

Reputation: 1

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.

Upvotes: 0

ImagineCustoms
ImagineCustoms

Reputation: 29

<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.

Upvotes: 2

fergatron
fergatron

Reputation: 13

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.

Upvotes: 0

Kon
Kon

Reputation: 27451

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';" />

Upvotes: 23

Phil
Phil

Reputation: 11175

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>

Upvotes: 1

Quentin
Quentin

Reputation: 944556

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).

Upvotes: 12

Related Questions