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.
Related
While testing VoiceOver for iOS within an #ionic/angular cordova app, I encountered the following issue:
I have two elements on a page. One is an h1 with a tabindex of 0. The other is a plain <input>.
I enter into 'edit mode' on the input field (double tap with VoiceOver on)
I reposition the screen reader focus to the h1
I double tap the h1
I would expect at this point that the screen reader focus would remain on the h1. Instead, the focus shifts back to the <input>.
This can be reproduced by opening this StackBlitz in Safari on iOS and following the above steps.
Notes:
the tabindex of 0 on the h1 is to facilitate focusing at the top of the page after a transition.
this happens on non h1 elements as well, this is just an example; it seems more related to the tabindex than anything
I can delete a single <div> element by selecting it in Firebug's HTML panel or within the Inspector panel of the Firefox DevTools and pressing Del, but is there a way to delete all elements except one?
I don't really see a use case for deleting all HTML elements except one, but there are several ways you could do that in Firefox DevTools:
Select each element one by one in the tree and press Del each time.
Or select the root node, right-click, and select the "Edit as HTML" contextual menu, then in the editor box that appears, remove the HTML you don't want to see anymore, and submit (`Cmd/Ctrl+Enter)
Doing this however may end up removing a lot of the styling applied to the remaining element, and it may not appear as it originally was after you do this.
Maybe what you want to do instead is "isolate" an element visually in the page so that it's the only one that's visible anymore. If so, there's no feature in devtools to do this, but it's easily achievable by adding some CSS in the Style-Editor panel. Assuming the element you want to isolate has the id "my-id", you could do this:
* { visibility: hidden; } #my-id { visibility: visible; }
I'm working on a web project. In the last two weeks I was having my semester examinations so I'd to take a break from it. Now, since they are over, I've resumed my work; but I find that some of my web elements (like button,span) have shifted by some pixels on Chrome (not on IE and Mozilla). What could be the reason behind this? How do I overcome this problem?
ORIGINAL CODE: http://jsfiddle.net/p22L15vs/15/embedded/result/
The left margin (for button) for chrome was originally:
-webkit-margin-start:620px;
Now the same code causes the button to enter a new line.
Another example of span:
ORIGINAL CODE: http://jsfiddle.net/vbpasx1j/
The text shown in the fiddle was placed in a span tag. Two weeks ago it required only two lines. Now it requires three lines.
Hello and welcome to the community!
First off, in your provided link the -webkit-margin-start: of the button is set to 620px, not 166.
That, combined with the width of your menu div <div id="div_element"> as well as the padding around your elements exceeds your original #wrapper width of 1006px, making the button element jump to the next row.
Here's a demo to a top-of-my-mind solution: http://jsfiddle.net/kqxmbcdt/
Reduce the -webkit-margin-start: to 619px and you're good to go.
Always be on the lookout for unaccounted margins and paddings when positioning elements, as you can see, sometimes 1px is all it takes to break a layout.
This is to due the headline change in Chrome 37 ,the introduction of DirectWrite support for Windows.
Check this link for further details:
http://www.omgchrome.com/google-chrome-37-arrives-improved-font-rendering-windows/
This feature has caused a similar issue for various developers.
In order to restore to your previous font, the solution is to disable this new feature in your browser. You need to follow the following steps:
1> Enter chrome://flags/ in your address bar.
2> In the Disable DirectWrite Windows section click on Enable (actually disables it).
3> Click on Relaunch Now at the bottom.
4> Restart your browser.
Your original page design remains unchanged. :)
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
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