Which browsers support text-shadow in ::selection - cross-browser

Trying to get some documentation on this. Have seen it used in some websites where they declare text-shadow in their ::selection pseudo element. Does anybody know if IE supports shadows on selected text? I know Firefox does not. Which browsers support text-shadow in ::selection? Thanks.

Use this site for testing is http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-shadow. Just change the code to h1::selection {text-shadow:2px 2px #FF0000;}, then test on your choice of browsers by highlighting over the H1 text in the window after you click the "Click Me" button.
IE9 does not support text-shadow at all, so within a ::selection it definitely wouldn't work. Chrome, however, does support text-shadow within a ::selection.

You can read about that issue:
he W3C working draft for the ::selection pseudo-element
The Mozilla Developer Network on the ::-moz-selection and ::selection pseudo-element
And you can use this page as a test base (just open it on the desirable browser)

Actually, there's an ongoing discussion on supporting text-shadow inside ::selection in Firefox:
https://bugzilla.mozilla.org/show_bug.cgi?id=721750

Related

Internet Explorer 11 not recognising CSS3 specific properties

I have switched from IE8 to IE11, but still I am not able to use CSS3 properties. IE11 not recognising the CSS3 specific porperties like border-radius and box-shadow.
In the developer tools they are without a check box and are red underlined.
A possible reason which I have found is that the doctype html is always commented out and I assume that because of that IE is not recognising the properties.
Try this website: http://caniuse.com/
It will show a guide as to what CSS and general web design rules work with which browsers with and without plugin support.
Border radius: http://caniuse.com/#feat=border-radius
Boxshadow : http://caniuse.com/#feat=css-boxshadow
The graphs output on these links show that both these CSS rules work in IE above IE8.

make css menu that works on IE6 and 7

I am assigned a task and will create a pure css menu that works on all browsers including IE6 and 7. I have to use :hover pseudo class. As these classes are not supported in IE6 still is there are workaround for this using css? If yes please how to do it?
There are a number of tools available on the web for IE6 ~ IE7 pesky fallback.
Check this out:
http://selectivizr.com/
Or if you just want something smaller, look here:
IE6 ~ IE7 great css3 pseudo elements fallback
Good luck,
George!

HTML/CSS: get rid of cursor in opera

building a website for a touch PC and need to know how to make the cursor disappear completely in opera.
Any suggestions?
You could try the following CSS rule:
cursor: none;
That's likeliest unlikely to be supported, as it was introduced in CSS3, and has not yet reached wide adoption.
If that's not supported in Opera, you could try:
cursor: url('/path/to/empty/image.format');
That should set the cursor to appear as that image, which could be a blank/transparent 1x1 image.
EDIT: It looks like neither of these options is supported yet in Opera (though both are valid CSS3.) . Pending another idea, my above examples won't work in Opera.
Quirks Mode has an excellent grid where you can test out the support for each property: http://www.quirksmode.org/css/cursor.html Just mouseover each column name to see how it renders in Opera.

Are there black outlines on this page with IE?

My customer is telling me there are black outlines around the elliptical links on this page
http://animactions.ca/volet_entreprise.php
when using Internet Explorer. None of my pc's show this and i'm not sure how to fix this.
Thanks
It seems to be the outline of the coordinates area, set your CSS there as folows:
p.style2,
p.style2:focus,
p.style2:active,
p.style2:hover {outline:none; border:0;}
Should take care of it, but if not you may try:
p.style2 map,
p.style2 map:focus,
p.style2 map:active,
p.style2 map:hover {outline:none; border:0;}
Hope it helps...
Btw: I've tested that link on FF, IE 7 & 8, Safari, Chrome and Opera Over Windows, and FF over Linux and it was all ok... my guess is that you're client has an old browser's version that needs to be updated
It's probably because you're using 24-bit .png background images with alpha transparency and your client must be using IE6 (which doesn't natively support this). If this is the case then you need to implement a PNG transparency script. Here are a few:
http://www.twinhelix.com/css/iepngfix/
http://www.dillerdesign.com/experiment/DD_belatedPNG/
http://jquery.khurshid.com/ifixpng.php
Some browsers show a border around images inside <a> elements, though off my head it's a blue border rather than a black one. Try border: none instead of outline: none.
EDIT I can't reproduce it either.

Background Color - for IE6, IE7

Works in IE8 & Mozilla
select:focus, input:focus,textarea:focus
{
background:#abd533;
font-family:verdana;
}
While using IE7, I observed that input field background color not shown, but it appears in IE8 & Mozilla.
Can anyone please let me know what to do with IE7 or IE6 ?
It is a bug in IE7
See
Basic Selector Support Tests
You can use javascript to detect focus and change the class name.
i would to show you this link. It deals with a lot of browser issues:
http://quirksmode.org is pretty good for listing browser bugs and compatibility.
Taken from my question:
Collection of Browser characteristics
Just want to add this cause this sites helped me a lot.
I think you've encountered one of Internet Explorer's (many) bugs.
For IE6 and 5, this page is quite useful for form control styling: Styling Form Controls