The links in the "on sale" section of each of the top tab drop-downs on this website do not work at all in IE. Any ideas?
First, I'd suggest running this through the W3C markup validator as you have a number of invalid XHTML elements. I think the culprit may be an 's' element in your On Sale div. That element is deprecated - you should use the 'del' instead for strikethrough. There are also a couple of places where you're setting the display attribute to 'hidden' when you should be setting it to 'none'.
Related
I'm trying to find a list of elements that are tabbable.
Adding tab-index to elements make them tabbable.
Some elements are tabbable by default like <input>.
Is there a list of these elements that are tabbable by default?
And optionally, why are they tabbable by deault?
The easiest way to find answers to such questions is by looking at the spec
I believe the list you are looking for is:
a elements that have an href attribute
link elements that have an href attribute
button elements
input elements whose type attribute are not in the Hidden state
select elements
textarea elements
Editing hosts
Browsing context containers
To answer your optional question: they are "tabbable" by default for usability issues. If you follow the principals of making a good, user friendly app, it should allow for a consistent navigation and discoverability among other things.
So, by making them "tabbable", in the order they appear in code, the default behavior is to allow the user to complete a form from top to bottom, with minimal clicks and moving around, this making the "thinking process" about what should be filled next unnecessary
https://allyjs.io/data-tables/focusable.html is probably the most comprehensive list I've ever found. Not only does it go over what is "expected" by the spec but also how all major browsers actually behave.
At https://www.w3schools.com/tags/att_global_tabindex.asp, it talks about the tabindex attribute in HTML 4.01, and how only certain elements could enter the tab order through the tabindex attribute.
Those elements were: <a>, <area>, <button>, <input>, <object>, <select>, and <textarea>.
I've been working with tab stuff for a few months now, and that list seems to fit with I've noticed as naturally tabbable.
HTML5 email input element shows a list of email address during typing. Is there a way to style it. I mean are there any CSS selectores.
Short answer: No.
The list of email addresses you are seeing has to be a part of your browsers auto-complete functionalities. I just tried an HTML 5 email input element with recent Chrome and IE 10 versions, but no list was displayed. There is no way to edit these with CSS selectors.
However, if you create your own auto-complete / dropdown list controls using JavaScript, you are free to use any CSS style attributes such as colors, paddings and margins.
Looking at MDN and w3c it seems like they are the same except the menuitem is intended to be a child of menu and the parent menu must have a type of 'popup'.
But when I look here:
https://developer.mozilla.org/en-US/docs/XUL/menu
It says menu is:
An element, much like a button, that is placed on a menubar. When the user clicks the menu element, the child menupopup of the menu will be displayed.
So with this definition two other elements are now part and parcel to the menu elements use.
So I am confused even further by the relationship of these elements.
In summary
I know there is an HTML-5 element called menu and another called menuitem. I simply want to know the intended way to use them in plain English.
But when I look here: https://developer.mozilla.org/en-US/docs/XUL/menu
That is the menu element for XUL not for HTML. It is a completely different element from a different language.
The MDN documentation for the HTML menu element is at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu
I know there is an HTML-5 element called menu and another called menuitem.
There isn't. Those elements exist in HTML 5.1 (not 5) drafts and the WHATWG Living HTML spec.
Browser support is currently very weak
Does the <label/> tag need to be closed in html5 doctype?
<label> tags are inline elements, so it should be OK to leave off, as it'll get closed automatically at the end of the block-level element it's contained inside of.
Not according to W3C validator service. None of these are valid HTML5:
<p><label>e-mail</p>
<label/>
The LABEL element need a closing tag. The content inside of the element can be blank, but it needs a closinng tag.
Thinking about it, there should not be any case where a label is voided (<label/>) since the semantic value of the element is to assist when filling forms.
As odd as it may sound, it's often worth testing something like this in Internet Explorer. IE is less forgiving than other browsers when it comes to valid HTML and if there's an issue, it will be very noticeable.
HTML tags that are 'empty', i.e. don't contain any content, e.g. the source element, tend to be self closing. Other HTML elements that must exist within others, e.g. the li element as it needs to be within a ul or ol element, can also remain so. Following this (admittedly made-up) rule, the label element should be closed by the author.
No. I don't believe so. For questions like this I would suggest Googling it, and bringing problems you can't find an answer to here.
*EDIT:* Yes. It would be valid.
Is it possible to control tabindex with CSS and if yes, which browsers support it and on which elements?
EDIT
I should say, my goal is to catch keydown events on a div. I saw this page http://www.quirksmode.org/js/events/keys.html# that tests keyboard events and it shows that the only way keydown fires on anything other than document and body or some kind of form element or link is to have tabindex declared on it. But I read on W3C site:
The following elements support the
tabindex attribute: A, AREA, BUTTON,
INPUT, OBJECT, SELECT, and TEXTAREA.
So I am a little confused, what to do in order to be standarts compliant and make my use case work?
EDIT2
My whole use case is a div with a lot of content with an artificial scroll bar. I am able to scroll it with mouse events but no luck with the keyboard so far.
Update 2017
As pointed out by #Wallop in the comments, the nav-index property was dropped from the spec in 2015 due to "lack of implementation interest".
Take a look at the nav-index property introduced by W3C in CSS3-UI.
This property has exactly the same behavior as a tabindex and is applicable to any element.
The ‘nav-index’ property is an input-method-neutral way of specifying the sequential navigation order (also known as "tabbing order").
This property is a replacement for the HTML4/XHTML1 attribute ‘tabindex’
Being probably the best standards-compliant solution for the use case, nav-index is interpreted only by Opera so far (as of June 2012) and is also marked as "Feature at risk" by W3C, therefore may be dropped any time.
Alternative cross-browser solutions are:
non-standards-compliant: set the tabindex attribute on a DIV. This will work in all common browsers.
standards-compliant: replace DIV by an anchor element (A) without a href attribute set, style it with display: block and add the tabindex attribute.
With respect to BoltClock´s point, I agree that the tabbing order is very logical (both the text selection order and tabbing order are closely related to the sequence in which elements are aranged in the document). On the other hand, CSS has a wider purpose today. It can manipulate not just the content of a document (content property) but also the behavior when and if events are to be fired: i.e. using pointer-events, display or z-index the pointer event's order will change. If these are very basic CSS properties, why you should not be able to influence KeyBoardEvents, too?
This is a bit old but now there are css options like -moz-user-focus. I'm sure there is a webkit equivalent.
https://developer.mozilla.org/en-US/docs/CSS/-moz-user-focus
user-focus is the standard cross browser attribute.