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?
Related
I wanted to add a behavior for input with placeholder to a contenteditable field.
Not a problem and it is done with the following CSS
<div contentEditable="true" data-placeholder="Title"></div>
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-placeholder);
color:grey;
}
which is for every element with an attribute contenteditable that is true and also does not have children and not focused insert a text that is equal to the text in data-placholder.
JsFiddle is available. On FF, Chrome and IE 11 it works nice, but in Safari (from 5 to 7) I see the following bug. When I click:
click on editable
write something
click away (it works properly)
then go back to contenteditable
remove all the text
click away
Than my contenteditable is empty. (In all other browser it has Title inside). Note that if you just click on editable and clickaway, it behaves correctly.
No idea why it behaves this way and also how to fix it.
This is a known issue where the element does not register as being empty. You can fix it with a simple jquery function call to empty the element:
$input.empty();
See this answer for a detailed explaination.
Here your working jsfiddle.
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>
I am facing bit strange problem with my application. I have an image
<img title="New (Alt+N)" alt="New (Alt+N)" src="images/icon_new.gif" tabindex="-1" id="Ax14490_image">
This code is found inspecting document withfirebug.
which is displaying properly but title is not coming on mouseover of that image. can any one help me out in this context.
I am using firefox 4.0 browser
In case anyone else finds this thread via a search, I was having the same problem as described by the original poster. Here's what turned out to be the cause, in my case.
My layout involved two div objects placed horizontally next to one another. One on the left, and the other on the right. The left div was set to have a width of 100%, although it's contents did not cover all of that space due to internal padding. the right div contained the img which was not triggering any mouse events (including the "title" attribute not working, but onMouseOver and onMouseOut also did not work.)
So this was due to z-ordering. The mouse events were instead being handled by the div object on the left, because it's 100% width encompassed the full browser window. Since the left div had a "position" attribute of "absolute", it could legally have it's z-value set, and so I set its z-value to "-1". This fixed the issue.
Yes, it works for me too.
However, here is a useful guide to the correct usage of both the alt and title tags:
http://www.456bereastreet.com/archive/200412/the_alt_and_title_attributes/
Too Late..But Try This...This is working for me
<img src="images/icon_new.gif" title="New (Alt+N)" tabindex="-1" id="Ax14490_image">
src tag at the first.
Thanks
I know I'm way late to the party but things are radically different today (Dec. 2018) than they were when this post was created (Jun. 2011).
In case someone is having this problem with images not showing the tooltip of the title="" attribute, well, make sure you are not testing in Responsive Mode.
The title="" attribute obviously isn't going to work because Responsive Mode in browsers, at least in Firefox and Chrome, emulate touchscreen devices and the title="" attribute only works with a mouse pointer.
Yep, I know what you're thinking…
Does anyone know how to fix (or what causes) the page up/down bug in FF when contentEditable is present on a div?
See an example
Navigate to contentEditable article with FireFox (3 or 3.5) and use the Page Up/down arrows on your keyboard. You should be unable to scroll to the bottom of the page, and it should appear to flicker and jump back up.
I think it's a bug of Firefox which even exists in the newest version, 3.6.8.
For the sample page there are 2 ways to make the page up/down buttons work:
Change all the three DOM node's contenteditable="true" to false.
Find the id="main-content" node, and delete the style float: left;.
Seems the problem for Firefox is contenteditable="true" conflict with the style float:left;.
The only way i can see is to use an iframe... like TinyMCE and CKEditor WYSIWYG editors, they both use iframes. However content loaded in an iframe does not posses the styling rules of its parent. Therefor has to be adapted ... the reason to herald the contentEditable div in the first place.
Since no one answered i'm going to sulk and play with matches
Now I know this issue is over-talked about but I cannot seem to find a question that addresses this little gem directly so here goes...
In Opera and IE when a form has focus the default submit input gets some sort of highlight. Like outline is when you have tab focused onto an element.
However, unlike the tab one (dotted lines inside or around which to me is nice and user friendly and so WANT it for my users) this one has some bizarre designs...
Firefox has its own problems but at least you can customise it. It reserves the space for the "highlight"/"border" or whatever you want to call it which means that your input will be bulker than any other browser. - why can't it do what it does for the anchors and have the highlight around the blasted thing?
Opera is odd in itself (Opera 10) since it makes the outline "highlight" whatever black. Now this isn't an issue UNLESS YOU HAVE A BLACK BACKGROUND... and it replaces the original border which is just palmface worthy... what were they thinking.
IE is like Firefox but no known way to customise it..
Now for the question: Is there a way to set the bloody colour in Opera for this focus event (which would solve that issue) or to have it in firefox without having to bloat the design in every other browser or a way to make IE conform at all.
Many thanks in advance
I tried and tried but I don't think this is possible.
button:active{background-color:#f00;}
button:hover{background-color:#0f0;}
That should allow you to control the visual interaction of a button. To target a specific button provide an id value in your HTML on the button tag.
try doing
<input type='submit' autocomplete='off' style='outline:none;'/>
this worked for me in text fields - I'm not sure if it carries over to submit or button elements but it's worth a try.
Kinda hackish, but definitely works..
<input type='submit' onfocus="blur()" />