Whenever I try to create 3D Buttons by nesting elements within an element... I have no problems in Google and Firefox... however in IE10... there seems to be a disconnect between the .parent:active and it's children...
Something like this:
<ul class="checkout">
<li id="creditcard">
<a href="#" class="a-btn">
<span class="a-btn-left">Proceed to Checkout</span>
<span class="a-btn-slide"><img class="slide-icons" src="icons.png" /></span>
<span class="a-btn-right">
<span class="arrow"></span>
<span class="cards"></span>
</span>
</a>
</li>
</ul>
Here is a JS fiddle: http://jsfiddle.net/H75jN/
All of the Transforms work in IE10... which makes me even more confused about why the :active function is not working.
Am I targeting the wrong class?
Replace <a> with <button>
Add extra CSS:
padding:0 0 5px 0; /* This is necessary for the Box shadow to work in Chrome */
border:0;
outline:0;
overflow:visible; /* Necessary for any images to overflow past button edges */
cursor:pointer;
background:none; /* This eliminates grey background in FF and IE */
box-sizing:content-box; /* By default, Chrome BUTTONS are border-box, this fixes it */
Finish!
JS Fiddle: http://jsfiddle.net/D8nJ6/1/
BAM!
In IE9, there's still an issue with the rounded-borders, but it has something to do with the Rounded-Border + Background-Gradient combination. Still looking for a fix.
Related
I have a angular app and it has a drop down menu as below
I use NVDA reader to read the screen.Here when I tab focus it only reads the content inside aria-label.I want it to read the aria label content and other text ('Account',username,email) inside the anchor tag also.
navigation.tpl.html
<ul id="accountMenu" class="dropdown-menu" role="menu">
<li class="account" ng-click="openDialog($event)">
<a class="account-container" role="button" aria-label="Open dropdown" href="#">
<div href="#" class="dropdown-menu">Account</div>
<div class="account-name">{{ ::username }}</div>
<div class="account-email" ng-bind="::email"></div>
</a>
</li>
</ul>
In your example you overwrote the "account, username, email" text with the aria-label.
aria-label works as a "say this instead of the contents of this element to a screen reader" attribute, overriding the information within.
If you ever want to add additional information you should look at aria-labelledby.
However I always encourage people away from using aria-label and use visually hidden text instead.
It all boils down to support aria-label doesn't have perfect support, whereas visually hidden text will work all the way back to IE6!
Also visually hidden text works on browsers that do not support CSS (text only browsers), a nice added bonus.
I have created a snippet below to show you how to do this.
Additional point on semantics
Please note i have also added a second example within the snippet where I changed your anchor (<a>) to a <button>.
Semantics matter, a button indicates an action on the same page, an anchor indicates navigating to another page. Adding role="button" to an anchor with no target destination (#) is way more complicated than using a <button> and is far less robust than just using a button in the first place!
It may take a little CSS fiddling but I would suggest you try and follow that pattern of buttons for same page actions, anchors for navigation as it will make your life easier.
Why not just use .sr-only
If you wonder why I would recommend this custom CSS class for hiding text over the standard .sr-only class in bootstrap etc. here is the original explanation I made on Stack Overflow explaining the issues with .sr-only classes as they stand today.
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<ul id="accountMenu" class="dropdown-menu" role="menu">
<li class="account" ng-click="openDialog($event)">
<a class="account-container" role="button" href="#">
<span class="visually-hidden">Open dropdown</span>
<div href="#" class="dropdown-menu">Account</div>
<div class="account-name">{{ ::username }}</div>
<div class="account-email" ng-bind="::email"></div>
</a>
</li>
</ul>
<h2>A suggestion to improve this further</h2>
<ul id="accountMenu" class="dropdown-menu" role="menu">
<li class="account" ng-click="openDialog($event)">
<button class="account-container">
<span class="visually-hidden">Open dropdown</span>
<div href="#" class="dropdown-menu">Account</div>
<div class="account-name">{{ ::username }}</div>
<div class="account-email" ng-bind="::email"></div>
</button>
</li>
</ul>
Background color for a button is displayed faded in IE-9 and it works perfectly fine in other browser.
<div id="pt1:_d_reg:region1:1:pt1:r1:0:r4:0:pt1:subf1:cb1" class="x2cg xhq p_AFTextOnly" style="background-color:#00822e; border-color:#00972b; border-style:solid; border-width:1.0px; background-image:none; background-repeat:repeat;" _afrgrp="0">
<a onclick="this.focus();return false" class="xhp" href="#">
<span class="xhu">Search</span>
</a>
</div>
Above is the snippet from the html. How to make this work?
I was able to overcome this by using the below style attribute:
filter: none !important
Thanks a lot for your comments guys.
I'm trying to turn Data Icons into navigation. The icons are clickable in Firefox and Chrome, but they are not clickable in Safari. Thanks for your help! Here's my mark-up:
<span data-icon="!" aria-hidden="true" class="close"></span>
The issue was CSS related. I needed to add a width and height to the li and then display:block and height/width: 100% in the span.
I want different menu items in different corners having a simple hover effect. Following code is working. But only right-bottom menu item is not giving proper effect in IE6 and IE7. Whats wrong?
Here is the fiddle.
CSS:
.d
{
height:50px;
width:50px;
background-color:#b2b2b2;
position:fixed !important;
*position: absolute;
}
.da {position:absolute;}
#d1 {left:0; top:0;}
#d2 {right:0; top:0;}
#d3 {right:0; bottom:0;}
#d4 {left:0; bottom:0;}
#d1a {bottom:0; right:0;}
#d2a {bottom:0; left:0;}
#d3a {top:0; left:0;}
#d4a {top:0; right:0;}
#d1a:hover {right:-5px; bottom:-5px;}
#d2a:hover {bottom:-5px; left:-5px;}
#d3a:hover {top:-5px; left:-5px;}
#d4a:hover {top:-5px; right:-5px;}
HTML:
<div class="d" id="d1">
<a class="da" href="#" id="d1a"><img src="images/contact.png" /></a>
</div>
<div class="d" id="d2">
<a class="da" href="#" id="d2a"><img src="images/contact.png" /></a>
</div>
<div class="d" id="d3">
<a class="da" href="#" id="d3a"><img src="images/contact.png" /></a>
</div>
<div class="d" id="d4">
<a class="da" href="#" id="d4a"><img src="images/contact.png" /></a>
</div>
IE6 and IE7 are having a hard time with the negative numbers for some reason on the BR.
Strangely enough, if you remove the #d3a {top:0; left:0} css rule, (That should be its default position anyway) the problem goes away. In fact, if you play with it...any value other than top:0, left:0 allows the browser to properly determine the hover position of the #d3a div.
Further experimentation with !important on the #d3a:hover rule will help support that this is not an issue with css applying correctly, but rather, with the browser's ability to render position correctly. (That is to say that the css style is applying...but having no effect.)
I have found following solutions for the problem:
1) to add visibility:hidden to #d3a:hover block
or
2) to add margin-left:0% to #d3a:hover block
both solutions will make the code running properly in IE6 and IE7. (Even it is working with IE5.5 too)
I'm making a "sort elements" web game using jQuery, HTML & CSS. While everything works fine in FF, IE8, Opera, Chrome, I'm having problem with IE7 wrapping words inside block elements.
Here's how it looks in IE7 (wrong):
Link (cannot post images as a new user)
In IE8 the box with wrapped text would just expand to fit it whole in one line without any overflows. Sorry, can't give another link as a new user
Don't mind the element order as it's random. Elements are dynamically generated by jQuery.
HTML code:
<div class="ui-sortable" id="area">
<span class="object">: </span>
<span class="object">1998- </span>
<span class="object">ISSN 1392-4087</span>
<span class="object">, </span>
<span class="object">. </span>
<span class="object">nepriklausomas savaitraštis buhalteriams, finansininkams, auditoriams</span>
<span class="object">. </span>
<span class="object">. </span>
<span class="object">. </span>
<span class="object">Vilnius</span>
<span class="object">1998- </span>
<span class="object"><em>Apskaitos, audito ir mokesčių aktualijos</em></span>
</div>
CSS code (irrelevant info like fonts & colors removed):
#area {
min-height: 160px;
width: 760px;
}
.object {
display: block;
float: left;
text-align: center;
width: auto;
}
Any comments on why does IE7 does that? How do I make these spans expand to fit the whole text in one line in IE7 and not wrap the text or make overflows?
I tried it out myself in IE7, and when you just add 'white-space: nowrap' to the span.object, it should solve the problem. Floating the block elements works just fine, so don't change that.
See image for the test result: http://xs.to/image-B3F6_4BDE909D.jpg
You have a problem. Floats and automatic widths just don't mix. You'll also have issues when it comes to something being wider than the width.
Why not leave it inline? If you need a box, add padding:
span.object { padding: 6px; }
Edit: if you don't want them to break across lines add:
span.object { white-space: nowrap; }
Far easier than getting floats to do this particular task.