When I run my CSS through the W3C's validator, any time I use the box-shadow property, I get an error like this:
0 is not a box-shadow value : 0 0 10px #000
It appears to stop at whatever the first value is, since changing the order of the values will change the error to match:
#000 is not a box-shadow value : #000 0 0 10px
I'm validating with the profile set to CSS3, so it's not a case of me forgetting to change the default profile setting from CSS2 (where the box-shadow property doesn't exist).
Why doesn't it think any of the values I'm using are correct? The shadow will render perfectly fine in Firefox and any other browser that supports the non-prefixed box-shadow property.
It's a known validator bug. Apparently they forgot that unitless values are permitted (especially unitless zero values). There's nothing wrong with your CSS; the values you're using are correct.
If you're picky and you can't put up with the bug tarnishing your otherwise would-have-been successful validation, you can simply add units to your zero values:
box-shadow: 0px 0px 10px #000;
But whenever I run into situations like this, I normally don't bother, knowing that it's a harmless validator bug and not something wrong with my CSS.
Note that as of this update the bug has been fixed since August 30, 2012.
Change it to 0px 0px 10px #000 and it will validate. That's probably because of the beta version of the validator.
The validator has a lot of bugs. Its new and its on beta stage.
Related
UPDATE This would appear to be a issue with background in IE8. CSS3 PIE appears to work correctly however when I have a background it doesn't show. If I remove the background css completely it shows again. IE:
html, body{
background: /*CSS */; /* Remove this property */
}
Now my question turns into how do I get CSS3 PIE to work properly in IE 8 with a background?
Here is a jsFiddle with the above code.
Original Question
I am attempting to replicate a look in IE 8 using CSS3 Pie JS Edition. Here is what I want it to look like:
Here is the way it looks in IE 8 with CSS3 PIE:
As you can see when I implement CSS3 PIE the box disappears! I have not used CSS3 PIE before and do not know what is wrong. Here is the code I am using:
NOTE: I am using the JS edition (I am using a hosted CMS and do not have server side access thus cannot use the .htc file.)
Here is my code to call CSS3 Pie:
<!--[if lt IE 10]>
<script type="text/javascript" src="/js/PIE.js"></script>
<script type="text/javascript">
$(function() {
if (window.PIE) {
$('.surround').each(function() {
PIE.attach(this);
});
}
});
</script>
<![endif]-->
Here is the HTML and CSS:
<div class="row surround">
<div class="twelvecol">
<p>Lorem Ipsum</p>
</div>
</div>
.surround
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 25px;
background:#f5f2f7;
border: 5px solid #b30005;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.4);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,0.4);
-o-box-shadow: 0 5px 10px rgba(0,0,0,0.4);
box-shadow: 0 5px 10px rgba(0,0,0,0.4);
-webkit-border-radius:25px;
-moz-border-radius: 25px;
-o-border-radius: 25px;
border-radius:25px;
border-top: solid #b30005 25px;
}
As #Spudley mentioned in a comment above the issue was a z-index issue as described on the CSS3 PIE Website:
Disappearing backgrounds/borders/shadows (z-index issues)
First, a little background on how PIE renders CSS3 decorations: a single element is created which holds all the VML objects. This container element is inserted as a previous sibling to the target element, and absolutely positioned at the same coordinates. If the target element is position:absolute or position:relative, then the css3-container element is given the same z-index as the target element, and since it is a previous sibling in the DOM tree it gets displayed behind, with no possibility of any other element sneaking in between.
However, this does not work so well when the target element is position:static, because static elements do not participate in z-index stacking. The only way to make our position:absolute css3 element go behind it is to give it z-index:-1. Unfortunately, this has a bad side-effect: not only will the css3 element go behind the target element, it will also go behind the background of any ancestor element(s) which are themselves position:static. This leads to situations in which PIE creates the VML rendering correctly but it disappears behind a parent element's background.
The only way I know of to work around this is to either:
make the target element position:relative, or
make the ancestor element position:relative and give it a z-index.
Both of these workarounds can have potential unwanted side-effects in terms of child element positioning and z-index stacking. PIE could easily force one or the other itself, but:
One or the other may be more appropriate depending on the particular situation, so the CSS author needs to be able to control which one gets chosen.
Forcing position:relative outside of the CSS would put IE out of sync with other browsers, leading to confusing inconsistencies.
PIE therefore does neither, and it is up to the author to implement either workaround where necessary. In most cases simply adding position:relative to the target element is fine.
The solution can cause other issues. I ended up asking myself is it worth the hassle to create rounded corners? For some sites, yes it would be, for others, well it is your choice.
Instead of behavior: url(PIE.htc);, you can set behavior: url(PIE.php);.
This CSS produce different results in latest browsers:
input {
border:1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
The radius size in IE is smaller:
How do I fix this?
The versions of IE till 8.0 doesnot support Border-radius as far as i know. So I used transparent PNG images which I have created instead of Div's which needs border-radius and also it solved the browser compatibility issues.
EDIT For IE9: you may be using quirks mode that's why it is not compatible.
Change the IE specific value by 1px,
border-radius: 4px; (instead of 3px)
I need use a modal plugin and colorbox looks great.
How do I load it w/o the rounded borders?
Given my page size, the thick border taking too much space.
Anyway to hide it or make it thinner and hide the border if needed on some calls?
You can hide the borders in easy way:
$("#cboxTopLeft").hide();
$("#cboxTopRight").hide();
$("#cboxBottomLeft").hide();
$("#cboxBottomRight").hide();
$("#cboxMiddleLeft").hide();
$("#cboxMiddleRight").hide();
$("#cboxTopCenter").hide();
$("#cboxBottomCenter").hide();
and add class with border style if you want with this way :
.thin_border {
border: 10px solid blue;
border-radius: 10px;
margin: 10px;
box-shadow: 0 0 25px blue;
}
and then add it with jquery
$("#cboxContent").addClass("thin_border");
I think colorbox isn't actually using the property "border" to get that huge black border going around. It seems like its being incased in a 3 x 3 div which uses images to create that border. Im sure you could remove it but its going to require messing with the actual colorbox javascript. You could try messing with the CSS as well.
You consider looking into a diffrent plugin like lightbox2 or shadowbox? I personally use slimbox (nice little clone of lightbox). If you want to mess with the code go for it. Otherwise I would just pick a diffrent plugin.
i have this simple html and css http://jsfiddle.net/JVfVv/1/
Problem is the text is being cropped under safari/chrome/firefox on mac. Removing overflow: hidden corrects the problem, however this line is necessary for other reasons. Removing line-height: 1; appears to fix the problem, however i get this from my reset stylesheet, and I don't understad why having it causes a crop.
Can someone explain why this is happening, and how to fix it please? thanks
To answer the question of why this happens, I think the key is this particular phrase from the Fonts section of the CSS 2.1 spec (emphasis mine):
The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares.
The line-height: 1 declaration sets the height of the paragraph to the same height as the font-size (since the paragraph only has one line). The fact that some characters are cut off implies that their glyphs bleed outside their em squares (I don't know how to definitively prove that this is true; I'm just speculating based on the evidence).
As for a solution, the most straightforward solution would be to use a larger line-height setting, such as 1.1 or 1.2.
You can set the height in CSS which solves the problem?
p {
line-height: 1;
overflow: hidden;
font-family: "Helvetica Neue", Helvetica, Arial; font-size: 30px;
height:32px; /* this appears to solve the problem */
}
See: http://jsfiddle.net/JVfVv/4/
i have some images (in front of my bachground-image) with low opacity(png format)
and every thing was good in ie8 & firefox until i add pie.htc(or border-radious.htc from google code) for rounded corners & Shadow Box in ie8...
after adding pie.htc by :
behaviour : url(pie.htc);
and adding below codes :
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow: 5px 5px 20px red;
-moz-box-shadow: 5px 5px 20px red;
-webkit-box-shadow: 5px 5px 20px red;
the opacity of my images has gone...
i test it with a simple html project and figured out when we use shadow box in ie 8(just ie8 & ff is ok) the shadow fills our entire element , so the opacity is wanished.
how can i fix this shadow + opacity problem?
=====================================================
MY QUESTION IN ONOTHER WAY :
HOW CAN WE COMBINE THE BELOW CODES FOR IE8 (with keeping opacity):
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";//opacity
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25);//opacity
-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc)";//shadow
thanks in advance
icant is correct but has a small typo. It should be progid instead of profid. I tried editing but it wouldn't let me edit just one letter.
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25) progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc);
Thanks icant!
it seems it's not possible to use shadow with opacity In IE 8...
When You add shadow after opacity to an element (in firefox every thing is ok) in IE8 you can not feel Opacity exists , because of that shadow fills the entire element and do n't let the opacity show itself.
however i checked this issue by the simple html project and searched for solving this issue with no results / if you find a solution about this plz share it with us.
Just put the shadow after the opacity and add a space in-between. It's as simple as it could be.
filter: profid:DXImageTransform.Microsoft.Alpha(Opacity=25) progid:DXImageTransform.Microsoft.dropShadow(attribute1=value1, attribute2=value2, etc);