6

When I view the site in FireFox the below does work with rounded corners, but not in IE at all. I'm trying to make a webpart header in SP 2010 rounded.

.ms-WPHeader td { background: #005bac; 

background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0,#0091dc), color-stop(1, #0091dc)); 
background-image: -moz-linear-gradient( center bottom, #0091dc%, #0091dc%); border-bottom: none !important;  


}

.ms-WPHeader td.ms-wpTdSpace {
 -moz-border-radius-topright: 5px; 
 -webkit-border-top-right-radius: 5px; 
 border-top-right-radius: 5px; 
 -moz-border-radius-bottomright: 5px; 
 -webkit-border-bottom-right-radius: 5px;
  border-bottom-right-radius: 5px; 

  }

.ms-WPHeader td:first-child.ms-wpTdSpace { 
-moz-border-radius-topright: 0px; 
-webkit-border-top-right-radius: 0px; 
border-top-right-radius: 0px; 
-moz-border-radius-bottomright: 0px; 
-webkit-border-bottom-right-radius: 0px; 
border-bottom-right-radius: 0px; 
-moz-border-radius-topleft: 5px; 
-webkit-border-top-left-radius: 5px; 
border-top-left-radius: 5px; 
-moz-border-radius-bottomleft: 5px; 
-webkit-border-bottom-left-radius: 5px; 
border-bottom-left-radius: 5px; 

}

.ms-WPHeader h3, .ms-WPHeader h3 a { color: #fff; }
.ms-WPHeaderTdMenu { border: none !important; }
.s4-wpcell:hover .ms-WPHeader .ms-WPHeaderTdMenu:hover { background: #0091dc; }
.ms-WPBorder { border: none; }
1
  • 1
    Are you able to get it to work outside of SharePoint? When I face some of these odd challenges I like to copy out the elements' HTML/CSS into a separate HTML file and troubleshoot there first. Dec 1, 2011 at 14:39

3 Answers 3

7

As already mentioned in another answer, Internet Explorer, up to and including version 8, does not provide support for any CSS3 based styling.

While Internet Explorer 9 comes with limited CSS3 support (like border-radius and box-shadow, but neither text-shadow nor background gradients) it would require to change your masterpage as mentioned in another answer.

However, changing your masterpage to include

<meta http-equiv="X-UA-Compatible" content="IE=8;IE=9" />

could lead into other issues and is AFAIK not supported by Microsoft as of yet, hence I would stick with the default

<meta http-equiv="X-UA-Compatible" content="IE=8" />

unless you have found and ironed out all those quirks (which I haven't done yet either).

So, for IE 6-9 with the SharePoint 2010 default "X-UA-Compatible" setting, you could use the following CSS3 Pie code to make your rounded corners work:

.ms-WPHeader td,
.ms-WPHeader td.ms-wpTdSpace,
.ms-WPHeader td:first-child.ms-wpTdSpace
{
    position: relative;
    -pie-lazy-init:true;
    -pie-poll:true;
    behavior: url("/_layouts/styles/pie.htc");
}

And background gradient:

.ms-WPHeader td
{
    -pie-background: none transparent, linear-gradient(#0091dc, #0091dc);
}

If you, however, decided to switch your masterpage to IE=9 mode you could use SVG to create the background gradient because, as I mentioned above, the CSS3 styles for this feature are still missing from IE 9 and are part of IE 10+.

To use SVG for the background gradient, head over to http://ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html and create your CSS code for the inline SVG, which will look similar like this:

.ms-WPHeader td
{
    background-image: url(yourinlineSVGgoeshere);
}

And just in case you want to add support for Internet Explorer 10+, there's some good news and some bad news ;-)

The good news, Internet Explorer 10+ does provide native support for the most-wanted CSS3 styles, including text-shadow and background gradients. The CSS3 for the IE 10+ background gradient looks like this:

.ms-WPHeader td
{
    background-image: -ms-linear-gradient(center bottom, #0091dc, #0091dc); /* IE 10*/
    background-image: linear-gradient(center bottom, #0091dc, #0091dc); /* IE 11+ */
}

The bad news, I do not believe Microsoft supports Internet Explorer 10+ with SharePoint 2010 using the masterpage switch

<meta http-equiv="X-UA-Compatible" content="IE=8;IE=9;IE=10,IE=11" />

or even

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

hence the chance to use all the new CSS3 features of IE 10+ with SharePoint 2010 is pretty much out of luck to us and we have to resort to SharePoint 2013.

Last but not least let me mention that I personally prefer to not rely solely on JavaScript and CSS3 based solutions for pure Website design basically because you cannot be sure that each visitor is using the latest and greatest Webbrowser. So, as a good practice I always include an image-based fallback for background gradients and rounded corners for those Webbrowsers which either do not support CSS3 or have scripting turned off (yes, it happens quite a lot on public facing Websites).

So, for example, your background gradient would look like this with an image fallback:

.ms-WPHeader td {
    background: #005bac; 
    background-image: url('path/to/your/file.gif') no-repeat left center; 
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0,#0091dc), color-stop(1, #0091dc)); 
    background-image: -moz-linear-gradient( center bottom, #0091dc%, #0091dc%); border-bottom: none !important;  
}

I found the following Websites quite useful to create background gradient images and rounded corner images on the fly http://tools.dynamicdrive.com/gradient and http://www.roundpic.com/index.php

8

You are working with CSS3, this is only supported from Internet Explorer version 9. For older versions of IE you need to have a fallback solution.

One of the fallback is CSS3 Pie. More information can be found here:

http://css3pie.com/

http://css3pie.com/about/

It requires you to add and reference an additional file (pie.htc) to your environment.

This is only one of the fallback solutions, another approach could be to user Javascript.

2

If you want to see round corners with your solution in IE9, you have to change IE mode. See a similar question about round corners in SP SE.

<meta http-equiv="X-UA-Compatible" content="IE=9" />

But IE=9 mode can affect some functionality.

If you use IE8 or earlier, you must use alternative methods, (the best links are already provided by EStruyf.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.