I have the below HTML and CSS. The CSS works fine in firefox but the color does not get applied in IE 9. I have specified the doctype as in xhtml file. How do i make it work with IE9?
HTML:
<div id="j_idt19:j_idt20" class="ui-tabmenu ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabmenu-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li class="ui-tabmenuitem ui-state-default ui-state-active ui-corner-top" aria-expanded="true" role="tab">
<a id="j_idt19:homeTab" class="ui-menuitem-link ui-corner-all tabMenuDefaultCls" href="/XXX.xhtml?i=0" tabindex="-1">
<span class="ui-menuitem-text"> … </span>
</a>
</li>
<li class="ui-tabmenuitem ui-state-default ui-corner-top" aria-expanded="false" role="tab"> … </li>
<li class="ui-tabmenuitem ui-state-default ui-corner-top" aria-expanded="false" role="tab"> … </li>
</ul>
</div>
CSS:
.ui-state-active li {
background-color: #F85A5A !important;
}
li[aria-expanded="false"] {
background-color: #9975FC !important;
}
li[aria-expanded="true"] {
background-color: #F85A5A !important;
}
.tabMenuDefaultCls {
/* background-color: #9975FC; */
}
Answer:
Solved the issue by giving more precedence to a css class as,
li[aria-expanded="false"] a {
background-color: #9975FC !important;
}
li[aria-expanded="true"] a {
background-color: #F85A5A !important;
}
Add a tag to the css class to take precedence.
Did you add this MetaTag after <head> tag :
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Hope it solves your problem.
Maybe the answer suraj gave here will be relevant for you:
Why IE doesn't support my CSS positioning
If it cheers you up, on IE11 it works fine..
http://jsfiddle.net/cg6jLnax/
e
Related
I using a library for datalist/autocomplate. But I want to change the width and shape of the data container. How do I remove arrow in red box and make the width is dynamic according to content? No css used.
Link for the library(awesomplete)
<div class="awesomplete">
<input id="sellerId" name="sellerId" autocomplete="off" aria- expanded="false" aria-owns="awesomplete_list_1">
<ul role="listbox" id="awesomplete_list_1" hidden="">
<li role="option" aria-selected="false" id="awesomplete_list_1_item_0"><mark>anush</mark>a - harsha</li>
<li role="option" aria-selected="false" id="awesomplete_list_1_item_1">SRIKAN874 - <mark>anush</mark>
</li>
</ul>
</div>
to remove the arrow just add this css
.awesomplete > ul:before {
display: none !important;
}
Working Sample
.awesomplete > ul:before {
display: none !important;
}
<link rel="stylesheet" type="text/css" href="https://leaverou.github.io/awesomplete/awesomplete.css" />
<script src="https://cdn.jsdelivr.net/npm/awesomplete#1.1.5/awesomplete.min.js"></script>
<input class="awesomplete" data-list="#mylist" />
<ul id="mylist" style="display:none;">
<li>Ada</li>
<li>Java</li>
<li>JavaScript</li>
<li>Brainfuck</li>
<li>LOLCODE</li>
<li>Node.js</li>
<li>Ruby on Rails</li>
</ul>
Screenshot
I'm trying to create a dropdown menu that can be navigated by using the keyboard. I can get the first level to work by using the tab key, but have been unable to access the second level. Example can be found here https://codepen.io/jjfash/pen/oNgqEjx
The html:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="featuredTopics">
<a class="btn btn-semiTransparent dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="0">News Archive</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu pull-right dropdown-item"><a tabindex="0" href="#">2017</a>
<div class="dropdown-menu">
<ul>
<li class="dropdown-item"><a tabindex="0" href="#">Q1</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q2</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q3</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q4</a></li>
</ul>
</div>
</li>
<li class="dropdown-submenu pull-right dropdown-item"><a tabindex="0" href="#">2018</a>
<div class="dropdown-menu">
<ul>
<li class="dropdown-item"><a tabindex="0" href="#">Q1</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q2</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q3</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q4</a></li>
</ul>
</div>
</li>
<li class="dropdown-submenu pull-right dropdown-item"><a tabindex="0" href="#">2019</a>
<div class="dropdown-menu">
<ul>
<li class="dropdown-item"><a tabindex="0" href="#">Q1</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q2</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q3</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q4</a></li>
</ul>
</div>
</li>
<li class="dropdown-submenu pull-right dropdown-item"><a tabindex="0" href="#">2020</a>
<div class="dropdown-menu">
<ul>
<li class="dropdown-item"><a tabindex="0" href="#">Q1</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q2</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q3</a></li>
<li class="dropdown-item"><a tabindex="0" href="#">Q4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
The CSS:
/* Buttons */
.btn {
border:none;
padding:12px;
color:#fff;
border-radius:0;
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}
.btn:hover,
.btn:focus,
.btn:active {
text-decoration:underline;
color:#fff;
}
.btn:focus {
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
}
.btn-semiTransparent:hover,
.btn-semiTransparent:focus,
.btn-semiTransparent:active {
background:rgba(0,0,0,.1);
color:#1f2a44;
}
.btn-semiTransparent:not(:disabled):not(.disabled):active {
box-shadow: inset 0px 0px 5px #666 !important; /* makes it look like you've pressed the button */
}
/* Dropdown Menu */
.dropdown-item {
margin:0;
padding:0;
text-align:left;
}
.dropdown-submenu .dropdown-menu {
left:100%;
top:-3px;
border-radius:0;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
right:100%;
}
.dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item:active {
background:#e6e6e6;
}
.dropdown-toggle {
line-height:120%; /* makes the height of the button similar to the regular buttons. having the caret as an ::after is making it taller */
}
.dropdown-toggle::after {
font-family: 'FontAwesome';/* essential to enable caret symbol*/
content:"\f054" !important;
color:#a84300;
border:none !important;
min-width:16px;
position:relative;
top:4px;
}
.dropdown-toggle[aria-expanded="true"]::after{
content:"\f078" !important;
color:initial;
}
li.dropdown-submenu>a:after {
font-family: 'FontAwesome';/* essential to enable caret symbol*/
content:"\f054";
color:#a84300;
position:relative;
left:8px;
display:inline-block;
width:15px;
}
li.dropdown-submenu:hover > a {
text-decoration:none;
}
li.dropdown-submenu:hover > a:after {
content:"\f078" !important;
color:initial;
}
.dropdownPadding {
padding:0px 150px 50px;
background:transparent;
border:none;
right:calc(100% - 150px) !important;
}
.dropdownPadding ul {
border:1px solid #ccc;
margin:0;
padding:10px 0;
background:#fff;
}
At minimum, I'd like it so the menu is fully navigable using the keyboard for ADA compliance. My best case scenario would be working using arrow keys (not just the tab key) to navigate. I tried adding tabindex="0" to each element hoping that would work, but no luck so far.
There are a few ways to handle this but a great place to start is this W3C article about Menus as this covers a lot of the basics of menu design, sub menus, expected controls etc.
It also has some examples of how to set up the JavaScript for the expected functionality so that will help you.
One of the key parts is intercepting the enter key to open sub-levels, either directly on the menu item or as a separate drop down arrow next to the main menu item.
I personally prefer having any top level items not being a link and instead being used as toggles to open sub menus but it depends on your site architecture.
The last thing you want is to make each sub-menu accessible via just tabbing. At that point if someone wants to reach "2020 Q4" they would have to tab past 15 items.
What you want instead is for each 'quarter picker' to open after pressing either enter or the right arrow key.
That way to get to "2020 Q4" is just 4 tabs, enter (or right arrow), 4 tabs so only 9 key presses (instead of 15).
One last thing to consider is that your menu needs to work without JavaScript or offer an alternative.
What I tend to do is have a <noscript> element with a link to the complete HTML sitemap show if they don't have JavaScript enabled and I have a more complex menu such as this.
I have this tested page http://fiddle.jshell.net/wt3dqm8b/1/show/light/ (which might be edited here https://jsfiddle.net/wt3dqm8b/1/).
Unfortunately, when you visit it from iPhone with turned on VoiceOver (Settings -> General -> Accessibility -> VoiceOver ON), you hear "Link One link" for the "Link One" link (which is good), but do NOT hear the same "Link One link" when you tap on the ">" arrow. Only "link" pronounced when you click on the ">" arrow.
Many ways were tried, but no one worked fine.
How to change the html code so that the same text "Link One link" pronounced when you click on the ">" arrow?
Here is the code from the page above:
HTML:
<ul class="master secondary">
<li aria-expanded="false" class="main" tabindex="0" aria-label="Link One">
<a tabindex="-1" href="https://google.com">
<span ><span > Link One </span></span>
<i class="fa fa-angle-right"></i>
</a>
</li>
<li aria-expanded="false" class="main" tabindex="0" aria-label="Link Two">
<a tabindex="-1" href="https://google.com">
<span ><span > Link Two </span></span>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
and CSS:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin-top: 60px;
}
.master {
margin: 0;
padding: 0;
list-style: none;
}
.master .main {
border-bottom: 1px solid #ccc;
}
.master .main>a {
position: relative;
display: block;
padding: 20px;
color: green;
text-decoration: none;
background-position: 15px;
}
.master .main > a .fa-angle-right {
position: absolute;
top: 50%;
right: 30px;
margin-top: -8px;
}
P.S. Of course I don't want to change the html code significantly, so that:
no significant changes are expected for JAWS screen reader,
the same behavior kept for the keyboard used - the whole navigation items get focused only once when the Tab key used, no changes in this behavior please.
UPDATE:
Even in the code below
<ul class="master secondary">
<li aria-expanded="false" class="main">
<a target="_self" href="https://google.com">
<span ><span > Link One </span></span>
<i class="fa fa-angle-right" title="Time to destination by car"><span class="sr-only">This text is not pronounced with VoiceOver - why?</span></i>
</a>
</li>
<li aria-expanded="false" class="main">
<a target="_self" href="https://google.com">
<span ><span > Link Two </span></span>
<span class="fa fa-angle-right" title="Time to destination by car"><span class="sr-only">This text is not pronounced with VoiceOver - why?</span></span>
</a>
</li>
</ul>
Thank you.
I ran your updated code with your CSS and the "sr-only" class from What is sr-only in Bootstrap 3? and it worked fine with VoiceOver. I'm running iOS 12.1.2 on my iPhone.
I heard "this text is not pronounced..." when navigating to the link.
Everything contained within the <a> was treated as one "tab stop" in VoiceOver so I couldn't swipe specifically to the ">" arrow. That's the behavior I'd expect. You should not make the ">" arrow a separate link or tab stop if "link one" has the same destination (href) as the ">" arrow.
This question already has answers here:
Changing the style of html tag by clicking on another
(2 answers)
Closed 8 years ago.
I have the following code, the parentAppliance is part of main left nav table and on hovering over "Appliance" I see a subtable containing "health". Now I want the subtable to disappear when I click on "Health", any thoughts?
CSS:
.childAppliance
{
display:none;
}
.parentAppliance:hover .childAppliance
{
display: block;
top: 50px;
left: 130px;
}
HTML:
<a href="#/appliance_status.home" hiddentitle="Appliance" id="ui-id-83" class="ui-corner-all" tabindex="-1" role="menuitem" aria-haspopup="true" title="" data-original-title="">
<span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><ins class="ui-navigation-static-menu-icon ui-navigation-static-menu-icon-backup"></ins>
<span class="ui-navigation-static-menu-text" style="display: inline;">Appliance</span>
</a>
<ul id="ApplianceSubTable" class="ui-menu ui-widget ui-widget-content ui-corner-all childAppliance" role="menu" aria-hidden="true" aria-expanded="false" aria-labelledby="ui-id-83">
<li itemid="Health" class="ui-menu-item" role="presentation">
<a href="#/appliance_status.home" hiddentitle="Health" id="ui-id-33" class="ui-corner-all ui-state-focus applianceFocus" tabindex="-1" role="menuitem" title="">
<span class="ui-navigation-static-menu-text">Health</span>
</a>
</li>
</ul>
You need to use Javascript/Jquery for that.
HTML
<li itemid="Health" class="ui-menu-item" role="presentation" id="Health">
jQuery
$( "#Health" ).click(function() {
$('#ApplianceSubTable').hide();
});
You have to add some javascript adding a clicked class.
$('.parentAppliance').on('click', function () { $(this).toggleClass('clicked'); });
And the css
.parentAppliance.clicked .childAppliance {
display: block;
top: 50px;
left: 130px;
}
Using javascript you can toggle a class which behaves like a hover.
i have been having trouble styling this group of links with the provided code, what is the correct way to style a link whose have a certain class to it or do i have an alternative with out setting global styles, only to this one link.?
i am using bootstrap class dropdown-toggle" to open up the drop down menu
<li class="bailbonds" >
<a class="bailbondslinks" href="bailbonds.php" class="dropdown-toggle" data-toggle="dropdown">
Bail Bonds
<b class="caret"></b>
</a>
</li>
CSS:
a.bailbondslinks:link
{
color: black;
}
a.bailbondslinks:visited
{
color: black;
}
a.bailbondslinks:hover
{
color: white;
}
a.bailbondslinks:active
{
color: black;
}
I have created a fiddle -> you had one < more than necessary.
Is this OK?
http://jsfiddle.net/DcdeX/
a.bailbondslinks:link
{
color: black;
}
a.bailbondslinks:visited
{
color: black;
}
a.bailbondslinks:hover
{
color: white;
}
a.bailbondslinks:active
{
color: black;
}
<ul>
<li class="bailbonds" >
<a class="bailbondslinks" href="#" class="dropdown-toggle" data-toggle="dropdown">
Bail Bonds
</a>
</li>
</ul>
According to your question, you want to style links by class. See http://jsfiddle.net/QLzV4/1/
Markup:
<ul>
<li class="bailbonds">
<a class="bailbondslinks" href="bailbonds.php" class="dropdown-toggle" data-toggle="dropdown">
Bail Bonds
<b class="caret"></b>
</a>
</li>
<li class="bailbonds">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Something else
<b class="caret"></b>
</a>
</li>
</ul>
CSS:
a.bailbondslinks {
color:black;
}
Followed by the pseudo-classes (e.g :hover)
a.bailbondslinks:hover {
color:red;
}
TYPO :
<<a class="bailbondslinks" href="bailbonds.php" class="dropdown-toggle" data-toggle="dropdown">
1.) Excess <<
2.) class="dropdown-toggle" may override the style you specify to your class="bailbondslinks"
UPDATED You can try like this:
a[class="dropdown-toggle"]:link
{
color: black;
}
Example: http://jsfiddle.net/cherniv/p7HdC/2/
And please note that when element has two class attributes , it is simple ignoring the second in all browsers! Have a look: http://jsfiddle.net/cherniv/p7HdC/4/
UPDATE 2 Thanks to Wayne Austin that mentioned that the only right solution is to have one class attribute , like this:
<a class="bailbondslinks dropdown-toggle" href="bailbonds.php" data-toggle="dropdown">
it should be like this:
.bailbonds a:link{
color: black;
}
.bailbonds a:visited{
color:black;
}
and so on..