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
Related
If you navigate to https://basis.now.sh and hit Tab 3 times, you'll notice that the div that contains the sidebar navigation becomes focused (or the document.activeElement).
Looking at the HTML, there is no special attributes like tabindex on the div.
What causes this div to become focusable, and how would you make it non-focusable?
Tested on:
Chrome Version 83.0.4103.106
macOS 10.15.4
I found the offender in chrome://flags. I had this enabled:
After disabling it, the div isn't get focused anymore.
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.
I am doing a lot of work with accessibility and WCAG at the moment but one thing I am trying to get to work well for all users and especially those using keyboard navigation, is a skip to content link.
This sounds simple to do, throw a link to an anchor in the top of the page and people can 'click' it to skip navigation or other largely unimportant content.
The issue is, though, when you 'click' an anchor link using your keyboard and then hit the 'tab' key again, you get taken to the element directly after the 'skip to content' link and not the next element in the main content area. Ie, the anchor you linked to has not received focus.
It seems that this is a common problem, because I am yet to find a site with a 'skip to content' link that has this working correctly. Even the Vision Australia site has this problem.
I was hoping that somebody knew of a technique/hack/library to make this work as it should.
EDIT: I can confirm that this issue occurs in Chrome and Safari, but not Firefox on my mac.
Most browsers scroll down visually to the target of the same-page link, but don't actually place keyboard focus on that link. You can use JavaScript (or JQuery, as in the example below) to give focus to the target:
$("a[href^='#']").not("a[href]='#'").click(function() {
$("#"+$(this).attr("href").slice(1)+"").focus();
});
However, there's a bug in WebKit that prevents even this solution from working in WebKit browsers such as Chrome and Safari. I wrote a blog post on this about a year ago, and several others have built on it:
Terrill Thompson blog post
More from Damon Muma
A JavaScript-only solution by Zegnat
WebKit Bug Report
Chromium Bub Report
You may place an another element just above the content you want to receive the next focus. Then skip to that element and hide that from view using diff ways like, font-size 0 or a p tag with no content etc.
<div class="skip-nav-container">
<a class="skip-to-main-content" href="#mainContent">Skip to main content</a>
</div>
<nav>
<!--skip this content-->
</nav>
<div class="skip-nav-target">
<p class="skip-nav-target-content" id="mainContent"></p>
</div>
<main>
<!--next element in the main content area-->
<!--main content-->
</main>
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…
Check out http://campbellcustomcoatings.com/ in something other than IE7, then in IE7. You can see that in IE7, the facebook like button is more to the right and up. I'd like to push it down in IE7 as it is in any other browser. I've tried for over an hour and I can't get it to budge.
I changed the following for IE7 and it seemed to place the button in a similar position to how it looks in Chrome.
#fblike {
margin-left:57px;
margin-top:10px;
}
I think the problem is coming from the floated <li> items. If you highlight the elements using Chrome DOM browser (F12 then select the Elements tab) you can see that because floats exist, the "nav", "container" and "fblike" <div>s do not strictly contain all the child elements. You could create a horizontal navigation without using floats. A list apart has a nice article on lists which may help cross-browser rendering issues (which I am always getting with floats!)
Just add some left and top margin to the iframe. to do this for just IE7, do:
*margin-top:20px; /*20 looked good for me */
*margin-left:20px;
Keep in mind that this won't validate as legit CSS (at least, i don't think it does) but other browsers will ignore it and it works fine.
I know exactly what you're talking about as I have the same issue. The button looks different (size and position) in various versions of IE than in other browsers.
However, you cannot modify or apply CSS to a Facebook Like Box plugin because its content is contained within an <iframe> element coming from the Facebook server.
The only styling options you have are the ones given to you by Facebook.
https://developers.facebook.com/docs/reference/plugins/like-box/
More info:
Embedded Facebook Like-Box won't let me style it. Why?
Adding CSS to Facebook Like Box