Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS3 validation?

E

e7e

macrumors member
Original poster
Dec 15, 2007
53
0
After searching around the web for drop shadow, I found that the css3 has a nice and easy way to accomplish this by writing to lines of code.

Code: 
-moz-box-shadow: 1px 1px 10px #999;
-webkit-box-shadow: 1px 1px 10px #999;

But the CSS validator wont validate those two lines, even after I chose CSS3 profile. Is there anything I am missing here?
 
e7e said:
After searching around the web for drop shadow, I found that the css3 has a nice and easy way to accomplish this by writing to lines of code.

Code: 
-moz-box-shadow: 1px 1px 10px #999;
-webkit-box-shadow: 1px 1px 10px #999;

But the CSS validator wont validate those two lines, even after I chose CSS3 profile. Is there anything I am missing here?
Click to expand...

It seems to me that those hyphens in front of the selectors are causing the problem. Usually when you have those it means the code is trying only to target specific browsers. For example: *moz-box-shadow: 1px; would be targeting IE I believe.

Those hacks don't play well with the validators. Try seeing if you can use the code without those hacks.
 
I tried just using the code like this:

Code: 
box-shadow: 1px 1px 10px #999;

But it wont work, so the only option left for me is to manually shadow the edges which I have no idea how to do :confused:
 
I think that 'box-shadow' without the '-webkit' or '-moz' prefix works in Opera 10.5 and later. Here's an A List Apart article on how to add shadows to sections of your webpage: http://www.alistapart.com/articles/cssdrop2/. They go through the process step by step, and if you do everything they suggest, you'll even get shadows in IE5.5 and IE6.
 
The validator isn't an absolute law or anything. It just lets you know where there's non-standard or bad syntax code at. Using browser-specific CSS is fine even if the validator doesn't approve of it.
 
The following prefixes are used by different browsers:
-webkit-property = Webkit-based browsers (Safari, Chrome)
-moz-property = Gecko-based browsers (Firefox)
-o-property = Opera
-ms-property = Internet Explorer

These vendor-specific extension exists when a CSS property is still a draft. That way your CSS can still be valid.

You need to add this to your "validation links":
&profile=css3

I'm not sure why it's not working for you. Be aware that sometimes the validator will tell you a line isn't valid but the real problem might be a line or two before that.
 
I finally got this working, thanks alot for the answers guys, I really appreciate it. :D
 
Yvan256 said:
You need to add this to your "validation links":
&profile=css3
Click to expand...

Can you explain this in more detail please? I'm quite a fan of css3 and not really that fussed about showing validated code, but it's still nice to get the satisfaction :)
 
Hmm is IE8 and Opera currently not CSS3 supported?

I tried running this:

Code: 
-o-box-shadow: 1px 1px 1px #999;
-ms-box-shadow: 1px 1px p1x #999;

And it wont work in IE nor Opera.
 
e7e said:
Hmm is IE8 and Opera currently not CSS3 supported?

I tried running this:

Code: 
-o-box-shadow: 1px 1px 1px #999;
-ms-box-shadow: 1px 1px p1x #999;

And it wont work in IE nor Opera.
Click to expand...

Nope. CSS3 will be supported in IE9 and Opera, IIRC, only supports approved standards. Does just plain ole' box-shadow without the prefix work?
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back