I have sitewiode styling of buttons using the html element. For buttons that submit forms this works well. However some buttons are just links. Therefore I use this syntax:
<button>Link Text</button>
This works perfectly in all browsers except IE, where the button clicks but nothing happens. The link isn't followed.
How can I get this to work in IE?
Don't put the button inside the link. You can easily style the <a> to look just like the <button> with CSS.
Could you post more code? As it stands, a <button> element inside a link element isn't a proper way to do this. Stick to semantics. You should just style the <a> element using CSS. If you really want to stick to using that combination, IE requires you to use type="button". So <button type="button"></button>
This is my issue also. Using code:
<a href="table_of_contents.html" title="Table of Contents">
<button> <b>Contents</b> </button>
</a>
It works for Firefox and Safari; but fails for Explorer and Opera.
Tried answer from Michel:
Contents
No change: Firefox and Safari OK; Explorer and Opera NG.
I have changed to the following code, which works for all four browsers.
<form action="table_of_contents.html">
<input value="Contents" title="Table of Contents"
style="font-weight: bold" type="submit">
</form>
PS: This does NOT work for type="button". Hope this helps.
Related
I try this html code on Google Chrome and works. But on Mozilla and IE11 don't works link. Why? Thanks all
<button>
<span>
Home
</span>
</button>
But on Mozilla and IE11 don't works link. Why?
Because it is invalid HTML - you can not nest other “interactive” elements such as a link into a button.
HTML5, 4.10.6. The button element:
Content model:
Phrasing content, but there must be no interactive content descendant.
I guess you're trying to do something like this.
Code
<button class="btn btn-primary" type="button" [routerLink]="['/home']">Home/button>
It is not working because it is not allowed w3 specifications
is not allowed inside
Better to make a input with the href
I have written the below angular code for anchor link tag
<div class="Import">
<a ng-disabled="List.length==0" ng-click="Click()"><i class="icon-table"></i>Import</a>
</div>
if the anchor tag is disabled and when try to click it is not clickable in other browsers such as chrome,firefox
but in microsoft edge browser it is clickable. Can anyone suggest how to make it as non clickable
in edge browser?
If you are using bootstrap, may you need to write something like this:
<div class="Import">
<a class="btn" ng-disabled="List.length==0" ng-click="Click()"><i class="icon-table"></i>Import</a>
</div>
add class="btn" into the anchor hyperlink
What do you think saying other browsers?
BTW you've unclosed correctly tag.
I have used <a> tag inside <div> which is not working in IE
my code structure is like :
<div>
<a target="_top" href="address">
<button>
</button>
</a>
</div>
So It is working fine in all browsers except IE.
When I click on button it is not redirected to specified url from tag.
What you are doing is not recommended - don't wrap a button in a link. Style your link like a button or use an onclick:
<button onclick="window.open(href);">
</button>
(Addendum: Just for accessibility, don't use target on your links since it messes with people who use screen readers. Only apply a target after page load when there is javascript available. Also, people like to control where their new page opens - it's not something you should try to dictate too much.)
button tag is only allowed within a <form> tag. Since there is no form, IE is ignoring this. Other browser have a more defensive "do what I mean" parser probably ...
You might do it like this:
<input type="button" onClick="document.location='address'; return false" value="click me" />
I declared an iFrame in my html, and the source is my XQuery file. In my XQuery, I defined a <div>, within which I also declared a button named "convert".
My XQuery file basically looks like this (this is the source for the iFrame）
return
<div id="content">
<table>
....
<tbody>
{
...
<td>
<a id="{$t/#id}"
rel="nofollow"
target="_new"
name="{util:document-name($t)}:{util:node-id($t)}"
href=
"http://localhost:8080/exist/rest/db/motorola/xquery/toDita.xql?xml={
util:document-name($t)
}&xsl=mot2dita.xsl">
<input type="submit" value="convert"/>
</a>
</td>
...
}
</tbody>
</table>
</div>
As you can see, in a td, I declared a button called "convert", and the "href" gives the link. Right now this button works perfectly in Firefox and Chrome(opening a new window to do the task), but in IE, after clicking it, it just doesn't do anything.
I wonder if this is a browser issue or my XQuery script has problems. Thanks in advance for helping out.
<input> tags are not valid inside <a> tags. The XHTML code is therefore not valid, which will account for the inconsistent behaviour - some browsers are better at compensating for odd cases like this than others.
Recommend you remove the <input> entirely and use CSS to style your <a> tag to look like a button, if it's just the look of a button that you're after.
Unless you're inside a form, it's not going to submit anything...definitely not an A tag.
I prefer to do these with Jquery UI's button feature. It gets the desired behavior you're looking for, is progressively enhanced and tested to handle the full gamut of browsers, and can be done use a href links, button elements, or input type=submit elements. Plus, styling looks great and is instantaneous.
Here's a quick tut: http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/
just got a weird problem:
code like
<div style="margin:20px; text-align:center;">
<button id="addDeal">Add New Deal</button>
</div>
no longer works in IE any more, but still working on Firefox, chrome, safari.
any ideas? thanks in advance!
Why not just:
Add New Deal
and style it with CSS to look as you like?
You should add type="button" to your button, as the default type is submit.