I have a html5 form with about 6 input fields, some being required and some optional. Once a field has been filled it, I have made it turn green using the following code:
input:valid, textarea:valid { background: #dfd; }
This works fine in Chrome and Firefox however Internet Explorer 9, being what it is, doesn't want to take this CSS code into consideration. Is there any way I could get round this?
IE 9 does not support these Pseudo-classes:
http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx#pseudoclasses
Related
Is ::moz-selection still required to change the text selection colour for Firefox? I've read a few articles who give the code below in order to change the text selection colour in my wordpress website.
/* MP highlight text red */
/* For FireFox */
**::-moz-selection** {
background-color: #50BAEE;
color: #fff;
}
/* For everyone else */
::selection {
background-color: #E53333;
color: #fff;
}
I simulated the code above on browserling.com for Firefox. The colour selection was RED (not blue) in the browser.
FIREFOX TEST RESULTS: https://browserling.com/b/941baebc
Do I still need to use ::moz-selection ?
::selection and ::-moz-selection are CSS psuedo-elements, which means their behavior depends on the browsers themselves independently of Wordpress, (unless Wordpress is somehow mangling your input files, but I have never heard of them doing such a thing.)
You can read more about them on this page, which contains the following information in the Syntax section:
/* Legacy Firefox syntax (version 61 and below) */
::-moz-selection
::selection
So whether you need ::-moz-selection depends on how much you care about what users of Firefox version 61 and below see. You can see more information about browser support and usage numbers here as well.
I want to style all my th elements the same (white text on black background) apart from a couple of usages where this formatting is not wanted - in which case I add a class of no-headers to the table element.
th {background-color: #000000; color:#FFF;}
table.no-headers th {color:inherit; background-color:inherit ;border:inherit; }
So here is some example markup if you needed some
<table><tr><th>This has a black bground</th></tr></table>
<table class="no-headers"><tr><th>This inherits bground from parent</th></tr></table>
This works fine in IE 8/9 and FF and Chrome but not in IE 7.
IE 7 just will not use the 2nd rule - despite it being more selective.
In fact I have tried all sorts to fix this problem - all to no avail.
I have tried adding the no-headers class on the th element too
th {background-color: #000000; color:#FFF;}
th.no-headers {color:inherit; background-color:inherit ;border:inherit; }
<table><tr><th class="no-headers">This inherits bground from parent</th></tr></table>
and even that doesn't work - I am left feeling like I am doing something really obviously stupid / wrong - but then again it works fine in other browsers!
Any help greatly appreciated.
IE7 does not recognize the inherit keyword (except on a few obscure properties).
Your best bet is to specify the default colors manually.
According to this SO post: IE7 CSS inheritance does not work IE didn't suport inherit until IE8. So you will have to specify the color, background, and border specifically.
IE7 does not support style inheriting. That was introduced in IE8.
See: IE7 CSS inheritance does not work
This is not a huge problem, since IE8 is a universal upgrade from IE7, unlike IE9, which is only available for Windows NT6 and above.
Trying to implement this gallery on my website.
http://coffeescripter.com/code/ad-gallery/
It is noted in the css file that the next and previous buttons won't show up in IE6 unless a nonexistent background image is applied to .ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next. The code they used is invalid, but it works. I have also tried using a color instead and it does work, but not what I wanted.
I don't want to point to a nonexistent image file or a blank.gif if possible. Does anyone know what causes this problem in IE6 and if there is a pure css workaround? zoom: 1 does not work in this case.
I presume your IE6 requirement is referring to the following snippet from the jQuery AD Gallery plugin's stylesheet, jquery.ad-gallery.css:
.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
/* Or else IE will hide it */
background: url(non-existing.jpg)\9;
}
The \9 at the end of the background shorthand rule is actually a CSS Hack targeting IE6, IE7 and IE8 — not just IE6.
Note: Paul Irish wrote a Comprehensive List
of Browser-Specific CSS Hacks back
in 2009 which highlighted this
attribute parsing bug in IE/Win:
/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }
If you don't want to use a 1 pixel transparent spacer.gif or non-existent file for IE (which would throw a 404 error), just modify the CSS to re-use one of the existing images in the gallery but specify the background-position's X and Y property to be off the screen:
.ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next {
/* Or else IE will hide it */
background: url(ad_next.png) no-repeat -9999px -9999px\9;
}
This creative work-a-round will allow IE 6-8 to display the previous and next links, but won't actually show the specified background image file, since the X and Y values position the background completely off the screen.
Don't support Internet Explorer 6. It's over 10 years old. Recommend your users upgrade Internet Explorer or switch to a different browser. Problem solved!
background-color:transparent doesnt work on SELECTs in browsers other than FireFox.
So how I specify background-color:transparent for FF alone and background-color:#something for others ?
Did you try to apply the cross-browser setting first and the firefox specific setting afterwards?
select {
background-color: #fff;
background-color: transparent;
}
Find a simple example that is also working fine in Internet Explorer 8 and in Chrome 4 here: http://jsfiddle.net/b6hWu/
Check out this page:
CSS Browser selector.
I use it and works wonders for selecting browsers right in the Stylesheet.
Hope it helps :)
In another question I asked about alignment this was given to me to answer the question about firefox being a twit. It worked but it has left a sour taste in my mouth and I'll explain why.
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Opera (10 for this example), Firefox (3 for this example) and Internet Explorer (7 for this example) all display an input[type="submit"] button differently. This focus-inner property is default 0 on Opera 10, something like 5px for firefox and must be 6px for Internet explorer.
How can I "blanket" reset them all to 0? Is there an standard CSS call that will not only do the above but will set this hidden property for IE too?
The reason why this is happening is simple: because all these browsers are made by different people. Try looking at your buttons from Safari, for example. There is no such thing as one css rule that will force all buttons in all major browsers look the same.
Well, actually you can achieve pixel-perfection, if you treat every one of them personally, like this. And you can always use <input type="image">, that will do the trick for sure.