I am experiencing some ghosting, artifacting, or just general wonkiness when trying to use a box shadow on Internet Explorer 9.
The goal is to have a group of text areas, that when focused, will be highlighted with a box shadow. This is working without any issues in most browsers, but when cycling through elements in IE9, I see the following behavior:
In the above example, the third text area loses focus to the second text area. The left and right sides of the box shadow do not disappear on the third text area and do not appear on the second one.
The code to reproduce is below. The issue appears when switching focus between the second and third text area.
HTML
<label>Text Area 1:</label>
<textarea class="sampleClass"></textarea><br /><br />
<label>Text Area 2:</label>
<textarea class="sampleClass"></textarea><br /><br />
<label>Text Area 3:</label>
<textarea class="sampleClass"></textarea><br /><br />
CSS
.sampleClass
{
border:1px solid #ccc;
}
.sampleClass:focus
{
box-shadow: 0px 0px 12px rgba(255,0,0,.8);
}
The code can also be seen here.
What exactly is going on here?
I have a tip... in many cases we can use PIE!
http://css3pie.com/
it "makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features."
It helped me a lot!
Related
I have a simple textbox:
<input type="text" aria-label="First Name" title="First Name" />
I am showing the tooltip First Name on hover of textbox.
I used the aria-label as well as aria-labelledby but neither are working with Chrome or Firefox.
It's working on selection of the textbox, but not working on mouse hover.
But it's working fine with IE on mouse hover as well as on textbox select.
I am using the screen reader NVDA.
Its working on selection of textbox, but not working on mouse hover.
It's not intended to work on mouse hover.
NVDA reads the label for input elements on mouse hover, not the accessible name.
If you want something to be read, you have to add a label.
Just to avoid confusion the correct method for labelling an input is to simply use a <label>.
So you should have
<label for="firstName">First Name</label>
<input id="firstName" name="firstName" type="text"/>
The way to link labels and inputs is using the for attribute and point that at the input's ID.
The added benefit of this is that if you click on the label it will focus the corresponding input, which other solutions will not.
Should you for some reason require an input without a label then the following example illustrates how to do this correctly. (please do not do this if you can avoid it, labels are important for people with anxiety disorders to be able to check that they have filled in the correct field - however I know that sometimes 'designers' just won't budge and you have to workaround them....)
In this example we 'visually hide' the label using CSS and add placeholder text to the element. Just to reiterate this is a last resort for those designers who will not listen about accessibility and you should use visible labels.
At least doing it this way the input will function correctly for screen reader users.
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}
<label for="firstName" class="visually-hidden">First Name</label>
<input id="firstName" name="firstName" placeholder="First Name" type="text"/>
Edit
Finally got chance to test this, works in Firefox, Internet Explorer and not in Chrome for announce on hover.
However if the label is visible it does work fine (if you hover the label, it does not announce if you hover the input itself even with a visible label), it also works fine for if you focus the input.
Final thoughts - show the labels (third time I said this in one answer. hehe), problem solved, no need to make it complicated.
Also, I am not sure why you think this is important, if someone uses a screen reader to assist while using a mouse they will click on an input, I have never come across anyone who would find not having a form field read on hover an accessibility issue if it works correctly once you click into the field.
Also the only people possibly affected by this are:-
screen reader users,
who use the mouse,
who have a sight impediment,
who use Google Chrome,
who also use NVDA,
and do not use a screen magnifier.
pretty specific, so not likely an issue.
I tested with NVDA on Firefox and Chrome and I can confirm the screen reader doesn't announce the value of aria-label on the input
I looked at 2.10 Practical Support: aria-label, aria-labelledby and aria-describedby and found out that aria-label isn't supported for input elements, but aria-labelledby and aria-describedby are. Taken from the link above:
aria-labelledby and aria-describedby are robustly supported for interactive content elements such as links and form controls including the many input types.
So I changed the code this snippet works with NVDA on Chrome and Firefox.
<input type="text" aria-labelledby="label" />
<span id="label">First Name</span>
Make sure to enclose the input and the "label" inside form for it to work optimally.
<input type="button" value="Button" />
IE indents the text down and over by 1px when the button is clicked by default. Is there any way to stop this with just CSS?
I'm also adding my own styles to this button, and everything is great until I click the text in the button... IE seems to ignore the :active state defined in my stylesheet. But if I click the button and not the text, IE performs the :active state. Of course the text moving issue is still present no matter what I do.
Any ideas?
If you use a styled A-tag you get around this whole "pressed" state issue completely. Using display:block and some CSS you can style the A-tag to look exactly like any button.
Okay, so, I had the same problem and I've discovered a solution that works for all browsers.
I had two form buttons that I changed borders, font family and sizes, and padding on. When I would click them in IE they would "jump" because IE is stupid in my opinion. All other browsers seemed to style the buttons correctly and not have a display issue with the buttons moving when the user clicked them..
The solution I found was:
Style the form buttons so that each of them have an equal margin and apply a wrapper division with a position or margin that will offset to your liking.
#myButton {
font-family: Times New Roman;
font-size: 16pt;
border: 2px solid #f7f6f4;
margin: 20px;
padding:15px;
}
<div style="float:right;margin-right:75px;">
<input type="submit" name="myButton" id="myButton" value="Don't Jump!" />
</div>
I don't know which version of IE you are using, but try Button background shift
Also, check out Remove 3D push effect on button, specifically the answer from allicarn, which changes the padding from the element on :active.
Just remember to put the css in IE specific cases, like an IF block.
I am trying to simulate the look and feel of a Firefox disabled text input: textarea and input text.
The only browser compatibility I have to worry about is Internet Explorer 8. I do NOT have to worry about anything earlier (Intranet)
Internet Explorer does not allow one to change the text color of a disabled test input. It does allow background color to be changed but gray text on a gray background color was beyond illegible.
I have an input box and text area declared as follows:
<input name="Count" id="Count" onfocus="this.blur()" type="text" readOnly="readonly" value="0"/>
<textarea name="Notes" id="Notes" style="width: 100%;" onfocus="this.blur()" rows="10" cols="20" readOnly="readonly"/>
I have the following styles applied through a CSS:
input[readonly], textarea[readonly] {
color:black !important;
background-color: threedface !important;
}
Visually, this works excellently in both Firefox and IE. However, IE still allows a cursor into the text area or text box. What am I missing?
ADDITION
By cursor, I am referring to a keyboard cursor such as when you are typing a reply here.
Maybe my problem is better stated as a user can still click on the text area and have a keyboard cursor show up. It appears that the blinking cursor disappears quickly though.
try adding a cursor property to your css
input[readonly], textarea[readonly] {
color:black !important;
cursor: default;
background-color: threedface !important;
}
http://www.w3schools.com/cssref/playit.asp?filename=playcss_cursor&preval=default
--- 12/01/27
Revisiting this solution, I found the following to work for me, hopefully its helpful to you as well:
Use this simple jQuery function in script tag for all readonly input fields.
You can even use any specific ID or Class if you need for a particular item only.
$('input[readonly]').focus(function(){
this.select();
});
Can you use disabled=disabled instead of readonly=readonly?
I have two <input> fields with the HTML attribute size=20.
This displays fine in Mozilla Firefox; the two text fields have the same size.
Internet Explorer shows one bigger than the other.
Can you help me there?
<td>Login</td><td><input type="text" name="login" size="20"/></td></tr>
<tr><td>Password</td><td><input type="password" name="psw" size="20"/>
I'll tell you what I told somebody else earlier on, you may benefit from a reset.css in your page, as I.E. is a niggly so and so it sometimes looks a lot different than other browsers. This is the reset I would normally use:
http://meyerweb.com/eric/tools/css/reset/
This should make it look a bit better, if that doesn't work, you're going to need a seperate css file for internet explorer.
Set your width in pixels instead like
<br>input.text {background-color:#fffafa; border:dotted 1px #555; width:230px;} <br>
Then you should have solved the problem.
I have just checked out what my site would look like in safari and there is a padding difference on my table!
Where there is a table with one column that has text and another that has a form there is padding so that the text in the left column is not right up to the form! This is not the case in safari and im not sure why!
I would like the padding back please safari! lol
http://www.perfectclaims.com/ppiclaimsnew/index.php
I have took a picture of what it looks like in safari to show you what I mean! http://www.perfectclaims.com/ppiclaimsnew/safari.gif
You can see that the text is right up again the blue form!
On second look, the textbox width is different in Safari. You may want to check that (with a ruler, perhaps? :D).
Otherwise, layout looks OK, unless you're aiming for pixel-perfect placement. Which is just absurd in this era of browser ubiquity.
Update:
Digging through the HTML, I took this snippet of HTML from one of your textboxes:
<input
name="fullname"
tabIndex="1"
class="formText"
id="fullname"
style="border-bottom: medium none; border-left: medium none; font-size: 20px; border-top: medium none; border-right: medium none;"
type="text"
size="30"
/>
Preferable, you may want to set the textbox size from the style attribute instead of size. That will give you more pixel perfect page.