[css] CSS3 elements not displaying correctly

[Admiral208]

I need a bit of help with this... Im doing some work on our website and I want to incorporate a few CSS3 elements into the mix. The elements are box-shadow, border-radius and text-shadow.

 

As you can see from the 3 screen shots, in chrome, everything works as it should. There is a shadow around the outside of the site, the horizontal menu has a drop shadow under the text and headings on the page have rounded corners. Opera has a shadow around the outside of the page, drop shadow under the text but no rounded corners for the headings. IE9 has a shadow around the site, no drop shadow under the text and no rounded corners on the headings.

 

1. Box Shadow - this should work in IE9 but I have had to include a line in the css to run a file called ie-css3.htc. I would have included this anyway to make it work in IE8 but why doesnt it work in IE9 without it. Heres the css im using to create a box shadow around the outside of the page.

.shadow {
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
-moz-box-shadow:    0px 0px 15px rgba(0, 0, 0, 1);
box-shadow:         0px 0px 15px rgba(0, 0, 0, 1);
behavior: url(https://slp2.somerset.gov.uk/schools/rbsc/_catalogs/masterpage/ie-css3.htc);
}

 

2. Border Radius - Aparently this should also work in all three browsers but it only seems to work in Chrome, Firefox and Safari. Opera and IE9 dont seem to be able to cope with the rounded borders. heres the css im using

.ms-WPHeader td {
border:1px black solid;
height:24px;
padding: 0px 0px 0px 8px;
background:url(https://slp2.somerset.gov.uk/schools/rbsc/Images/button_bg.jpg);
border-radius:8px; 
-moz-border-radius:8px; 
-webkit-border-radius:8px; 
behaviour:url(https://slp2.somerset.gov.uk/schools/rbsc/_catalogs/masterpage/ie-css3.htc);
}

 

3 - Text Shadow - This should work in all browsers but again, it doesnt appear to work in IE9. CSS below

.ms-topnav {
font: bold 13px "Verdana";
border:none; 
border-right:2px solid [url=http://www.edugeek.net/misc.php?do=dbtech_usertag_hash&hash=fff]#fff[/url] 
background-color:transparent; 
background-image:none; 
background-repeat:repeat; 
background-attachment:scroll;
height:40px; 
text-shadow:1px 1px black; 
behavior: url([url]https://slp2.somerset.gov.uk/schools/rbsc/_catalogs/masterpage/ie-css3.htc[/url])
}

 

 

All of the browsers im using should support CSS3 by default and I cant see any reason why its not working. The site is based around Sharepoint. Im starting to think that it might only be my computer that is not displaying the site correctly but because ive got the only copy of IE9 in the school, I cant test on anyone else.

 

Does anyone have any experience with CSS3 and help me out. Its not a major problem but I would like to get it right.

 

And sorry for such a long post.

 

Thanks!

James

[JJanisch]

From what I see this should work OK, what I would suggest is to create a blank page with one element. Apply these styles and test in all browsers - that way you can rule out if it's another function causing your problems or not. The problem I often see people have is based around parent and child elements, where the parent is preventing something from happening in the stylesheet.

 

When it comes to working with CSS3 you have to be a little cautious. Make sure one style works before applying the next, and try not to use (a bloat of) classes where it's not necessary.

Edited February 2, 2012 by JJanisch

[JJanisch]

Also just a heads up I've noticed a couple of missing semi colons in the topnav class.