Has something was changed in the way IE9 treats the title attribute in an anchor tag?
I try to use a regular anchor, such as -
This is a link
A tooltip should be with the title is expected to appear, and it does appear in previous versions of IE and also in other browsers, but not on IE9.
Is there a know issue with that? I tried to search the web for that, but found nothing about this.
Any ideas?
Thanks
I have encountered this problem in a few applications I've worked on.
I've found it doesn't work if you have nested elements within the element with the title.
The example below doesn't show its title in IE9 for me:
<span>test link</span>
However, this example does work:
test link
That is with an XHTML 1.0 Transitional doctype and Browser Mode: IE9 and Document Mode: IE9 Standards.
Obviously your example doesn't have a nested element but thought it might be relevant to some people who find this post based on the title.
You can overcome this limitation in IE by specifying the nested element to be an inline-block:
a span {
display: inline-block;
}
The code for the href link above works fine in IE9. Which leads me to believe something else on the page is causing the issue. Have you tried validating your html? http://validator.w3.org/
It could be that there's something else broken that the other browsers are just looking past. Perhaps it's nested in such a way that's causing IE9 to overlook the tag.
I have found a good work-around, Place your title in an abbr tag. I've tested this in Safari, Chrome, IE9, and Firefox. It works in all of them.
A workaround is to put at least one character outside the inner tags:
<font color="blue">This does not work</font>
<font color="blue">This</font> <font color="blue">does work</font>
I had a typical scenario wherein we had to show a image with tooltip. The image was inside a Iframe and tooltips were not being displayed, when opened in a Browser with IE 10 Compat Mode.
The alt tag helped me out. The solution was to set the images alt tag.
<A onclick=navigate() title="Did not work" href="javascript:void(0);" height="" width="">
<IMG alt="This worked" src="http://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/icons/imageviewer_back_button.gif">
</A>
Related
I know that I can do the following if I want to turn an image into a click-able link:
<img src="icons/twitter.png" />
But I would prefer to use a CSS background image so that I can have a hover state:
<a class="twitter" href="http://twitter.com/username"></a>
# css
.twitter{display:block; width:16px; height:16px; background:url("twitter.png")}
This works fine except I'm not sure it's entirely valid to have an anchor link that contains nothing. Chrome renders it fine, as does FF, but I'm not sure if others are the same.
I realise I could just put some text inside the link, and hide it with text-indent: -9999px, but I've never liked that approach, for various reasons. Is my code above cross-browser compatible?
It's valid, but it's best if you did put something in there and used something like
font-size: 0;
to hide it away. This way, if someone does not have CSS (screen readers for example), he would still be able to tell approximately what the link is about.
Here's a great article on the subject
It is not OK at all, since it breaks fundamental accessibility principles. There is no way to specify alternative text for a background image, the same way you can and should specify it using an alt attribute in an img tag for a content image. See WCAG 2.0 Guideline 1.1.
If you wish to change an image on mouseover, there are CSS and JavaScript techniques for that.
It is perfectly valid, but if you want, you can put a blank space inside:
Use as the text, and you are good.
Over at Markup.tips we recently did some accessibility testing in iOS 8 and discovered that VoiceOver will not navigation to empty links. There must at least be a non-breaking space. Whether this should be considered an iOS bug or not we are not sure.
I want to dig into html5, I have used html5boilerplate which has modernizr.js I wrote following code but it seems IE7 do not support it. What is the workaround for it using modernizr so it can work in IE7? I am not very familiar with html5, html5bp and modernizr.
<a href="/somlink">
<img src="/img/someimage.jpg" alt="some image">
<span>Some Caption</span>
<h1>Some Heading<span class="subtext">Inside Anchor</span></h1>
</a>
Based on comments above, this will work in IE7 without doing anything.
The problem is that you are using position:absolute on the span and h1. They are still clickable, but the cursor makes it look like they are not. Just add a cursor:pointer to get round this.
See: http://jsbin.com/ilojim/4/
In IE 9 (I'm assuming other IEs as well): using window.showModalDialog causes IE to set focus to the first focusable element in a page. This code demonstrates the issue:
<a href='javascript:window.showModalDialog("http://stackoverflow.com/")'>This sets focus to the search box</a>
<br>
<a href='javascript:window.open("http://stackoverflow.com/")'>This doesn't</a>
Fiddle: http://jsfiddle.net/Vz4Yb/
This is pretty annoying because I have some pages that have an image inside an A tag as the first element, and it puts an ugly focus rectangle around the image when the page loads. No other browser seems to be doing this. Has anyone else noticed this before, and is there a way to tell IE to NOT do this?
Lately I've noticed a very weird thing in http://www.lua.org/docs.html – when I hover over the links beside the cover images, the layout changes!
I see this in Safari but not in Firefox. Some people have reported that it happens in Chrome too.
The page passes the validator at http://validator.w3.org/ .
The relevant CSS is at http://www.lua.org/lua.css.
It seems to be a Webkit bug. Has anyone seen that as well? Any suggested fix?
It looks like this
hspace="12"
within each img tag might be causing it.
<img src="images/pil2.jpg" alt="" title="buy from Amazon" border="1" align="left" hspace="12">
When I remove it, the jumpiness goes away.
hspace is deprecated. Perhaps webkit only partially supports?
You're right #lhf.
However, I think I found it now. It's the blockquote that is surrounding the images and links.
When I remove it from the HTML, all fixed.
The following page is mucked up in IE8 -- the bulk of the content starts appearing half way down the screen and the tables/divs do not look as they should. It works in other browsers and in IE8 compatibility mode. I've inspected the HTML and can't work out what's wrong. Any help would be appreciated. Thanks.
http://www.moviemonitor.com/browse/itunes
After a quick glance in Firefox and IE8, I'd say there is some malformed HTML in there somewhere. Looks to me like a mismatched open/close tag that IE8 isn't forgiving. Run the whole thing through an HTML validator.
I suggest removing the min-height: 800px; CSS value from the first DIV element after <div id="mainContent">. Apparently IE8 renders the first child block level element with that height irrespective of any other contained elements.
Then again, those HTML validation results are pretty grim. Try to fix some of the invalid HTML and make sure that all of your tags are closed properly.