I am having problems getting box-shadow to work in IE10 I have tried to add
#media screen and (min-width:0\0)
rule but with no success.
The codes works well in firefox and chrome.
code
.glossy-curved-black .slide-wrapper {
background-color: #FFF;
border: 10px solid #FFF;
box-shadow: 40px 40px 40px #000;
-webkit-box-shadow: 40px 40px 40px #000;
-moz-box-shadow: 40px 40px 40px #000;
}
#media screen and (min-width:0\0) {
/* IE9 and IE10 rule sets go here */
.glossy-curved-black .slide-wrapper {
box-shadow: 0px 0px 80px #000;
}
}
my website here
The problem is in your head element:
<!-- Mimic Internet Explorer 7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
You're forcing the page into IE7 mode, if you want IE to act like a modern browser use IE=EDGE instead. I tested forcing the latest rendering mode and the shadow shows up.
Update
Per recommendation by Microsoft, just use an HTML5 doctype and avoid sending a document compatibility mode. Browser detection is deprecated and should be avoided in general. Use feature detection instead. The default mode is an in standards mode always has been EDGE*.
<!doctype html>
*Except in the web-browser control, in which case the document mode must be set explicitly to EDGE either via the X-UA-Compatible header or via the registry.
The main CSS declaration without the vendor prefix should always be last. Try this instead:
.glossy-curved-black .slide-wrapper {
background-color: #FFF;
border: 10px solid #FFF;
-webkit-box-shadow: 40px 40px 40px #000;
-moz-box-shadow: 40px 40px 40px #000;
-ms-box-shadow: 40px 40px 40px #000;
box-shadow: 40px 40px 40px #000;
}
#media screen and (min-width: 500px) {
/* IE9 and IE10 rule sets go here */
.glossy-curved-black .slide-wrapper {
-webkit-box-shadow: 0px 0px 80px #000;
-moz-box-shadow: 0px 0px 80px #000;
-ms-box-shadow: 0px 0px 80px #000;
box-shadow: 0px 0px 80px #000;
}
}
I also noticed you had a weird min-width value in your media query. I have set this to 500px as an example for you.
Related
I'm using the jQuery Validation Engine to validate some form fields. Everything's working well except in IE7 and IE8.
The style sheet has a :focus class, which gives them a blue box-shadow when the form field is focussed on:
input:focus { outline: none; -webkit-box-shadow: 0px 0px 2px 1px #06c !important; -moz-box-shadow: 0px 0px 1px 1px #06c; box-shadow: 0px 0px 1px 1px #06c; }
I'm using jQuery to add a class to the form fields when they're not valid (as defined by the jQuery Validation Engine,) so that those fields can have a red box-shadow:
input.error { outline: none; -webkit-box-shadow: 0px 0px 2px 1px #c00 !important; -moz-box-shadow: 0px 0px 1px 1px #c00; box-shadow: 0px 0px 1px 1px #c00; }
This works great...in IE9, Firefox, and Chrome. It doesn't work in IE8 or 7. (There was a party when we stopped supporting IE6.) I tried installing PIE.htc and adding a style option that indicated a border for those elements, rather than a box-shadow, but that didn't seem to help and it caused some other display weirdness with the error-bubbles, so I removed PIE.htc. Then I tried having a separate style definition, enclosed in IE-conditional tags, that specified borders for those inputs, but still it didn't work. Here's my conditional-CSS:
<!--[if lte IE 8]>
<style type="text/css">
input:focus { border: 1px solid #06c; }
input.error { border: 1px solid #c00; }
</style>
<![endif]-->
...help?
Not everything is supported in those browsers. Just live with it and find an alternative, like showing an additional message. Or you could embed the input element inside a div:
div.invalid {
display: inline-block;
border: 1px solid red;
}
<div class="invalid">
<input type="text"/>
</div>
If you start adding element like this, I would do that though JQuery too, and preferably in a separate piece of code that is included only in IE7 and 8, so you can easily drop it once you don't need it anymore. Or you could choose to always use the div, and just style div.invalid input{...} for other browsers.
Using the following css, I get a slight jagged or non-smooth circle rendered in the iOS webview browser. Anyone know of a fix? It shows up at any border width, and can event be detected as low as 1px with the high density retina display on the iPhone.
a.circle {
display: block;
position:absolute;
z-index:10000;
border: 6px solid #000;
box-shadow:inset 0px 0px 0px 1px #ccc;
width:54px;
height:54px;
top:352px;
left:123px;
border-radius: 99px;
background-color: #fff;
}
a.circle:active {
box-shadow:inset 0px 0px 0px 1px #fff;
}
Notice the slight hard and somewhat angled lines on both the border and inner 1px shadow:
http://www.css-101.org/articles/-webkit-transform-rotate-and-anti-aliasing/rotate-creates-jagged-border-image.php
This is a slightly different issue, but it directly relates to iOS.
I cannot figure out, in a single page, why CSS3PIE works on the outside page shadow but not work on the shadow of the photos in IE8. Everything work fine in other browsers.
I am using #page for the outside page div and
#facilities_maintable tr>td.column2 img for the photos in the page content.
#page
{
position:relative;
width: 1024px;
margin-left: auto;
margin-right: auto;
margin-top:0px;
background-image: url('../../content/img/bg4.jpg');
background-repeat: no-repeat;
background-color: #efebe0;
-webkit-box-shadow: #222 0px 0px 8px;
-moz-box-shadow: #222 0px 0px 8px;
box-shadow: #222 0px 0px 8px;
behavior: url('../../Content/PIE.htc');
}
#facilities_maintable tr>td.column2 img
{
margin:5px 15px 5px 15px;
border:1px solid #666;
-webkit-box-shadow: #777 3px 3px 5px;
-moz-box-shadow: #777 3px 3px 5px;
box-shadow: #777 3px 3px 5px;
behavior: url('../../Content/PIE.htc');
}
just set td {border-collapse: separate;}
i know, looks strange, but works
Safari to version 5.1, Chrome to version 10.0 and iOS support a property-webkit-box-shadow.
Firefox to version 4.0 supports property-moz-box-shadow.
Internet Explorer up to version 9.0 does not support the property box-shadow.But you can use non-standard property of the filter:
filter: progid: DXImageTransform.Microsoft.dropshadow (offX = 5, offY = 5, color = # 000000);
I am trying to use the following two properties in my styles.css:
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
It comes up with the following message.
They are not known css properties.
You get that message beacause these are css3 properties.
To check it's validity use:
http://jigsaw.w3.org/css-validator/validator?uri=EXAMPLE.COM/STYLE.CSS&profile=css3
replace EXAMPLE.COM/STYLE.CSS with url to your css file.
If you have those errors in your browser you need to use the more border-radius types because all the browsers have there own.
an example for border-radius:
-webkit-border-radius: 5px; /* Safari and webkit */
border-radius: 5px; /* Opera, Chrome */
-moz-border-radius: 5px; /* Mozilla (FF, Seamonkey) */
an example for box shadow:
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
-moz-box-shadow: 10px 10px 5px #888;
Support for these CSS3 properties is growing, but a lot of browsers don't have it yet.
The latest Opera has the capability, Safari, Chrome and Firefox too but they require custom properties.
The best approach is to duplicate each property, once with the prefix -moz- and once with the prefix webkit-. Always write the standards compliant rule last. Like this:
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; /*w3c border radius*/
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5);
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
You can check which browser supports what on Standardista.
I believe that's a Visual Studio error message, right? If so, just ignore it. But do add browser specific versions of those rules to your css for older browsers. e.g. -webkit-border-radius and -moz-border-radius etc.
Is it possible to remove a style in the case that browser specific CSS 3 items (drop shadows, rounded corners, etc.)? For example:
.fancy
{
/* only display if no drop shadow support */
border: thin solid #888;
box-shadow: 0px 1px 4px #888;
-webkit-box-shadow: 0px 1px 4px #888;
-moz-box-shadow: 0px 1px 4px #888;
}
It's better if you don't remove style rules, but only apply them when CSS3 is enabled. You could use this fancy piece of Javascript for it, called Modernizr.
Let me give you a quick example of how you could use it in your stylesheet:
.boxshadow .fancy {
border: thin solid #888;
box-shadow: 0px 1px 4px #888;
-webkit-box-shadow: 0px 1px 4px #888;
-moz-box-shadow: 0px 1px 4px #888;
}
Modernizr adds classes to the HTML element, which tells you what browser functionalities are enabled.
CSS doesn't do conditionals. In any version.
What you can do is dynamically serve up different stylesheets for browsers that support CSS3.
Since CSS3 is style-markup, and not a programming language, you can't do true "if-else"--however you could design your CSS3 styles to override the CSS2 styles, and the end result would be CSS3 where supported with CSS2 as a fallback.
In terms of practicality however, this approach will likely be more painful than dynamically serving CSS3 stylesheets to supported browsers.
One means -though given the patchy nature of css adoption/implementation it might/will not work exhaustively- is to use:
.fancy
{
border: thin solid #888;
}
.fancy:nth-of-type(odd), .fancy:nth-of-type(even)
{
border: 0 none transparent;
box-shadow: 0px 1px 4px #888;
-webkit-box-shadow: 0px 1px 4px #888;
-moz-box-shadow: 0px 1px 4px #888;
}
This is a bit messy in that the selector has to explicitly target all the odd and even .fancy elements, I'd prefer a neater solution but it does work (certainly in Chrome/Linux). Demo at: http://jsbin.com/ezako3