You are here

Solutions for Some CSS3 Internet Explorer incompatibility

I recently implemented a theme for our company's new website. When I did cross-browser testing, some IE CSS3 incompatibility issues came up. A little Google searching yielded some solutions. I will not say these solutions provided the best answers, but they could provide an alternate approach. Here are my issues.

1.Curved corner (border-radius)

Curved corners are a common element for backgrounds of text display. We can use CSS to style this instead of using an image. CSS3′s border-radius properties are fully supported by the current versions of browsers like Safari and Firefox, but trying to implement them in IE is quite frustrating. Thanks to the people who provided the htc solution, you can download the “border-radius.htc”file from here: http://code.google.com/p/curved-corner/, then add the syntax “behavior: url(border-radius.htc);” after your border-radius statements. The magic will show in the IE browser. The tricky thing is to make it work in Drupal, because you have to give its absolute path. Here is an example:

.testimonials {		
  float: left;	
  padding: 12px;
  background-color: #f1f1f1;	
  margin: 20px 5px 0 0;	
  border-color: #f1f1f1;
  -moz-border-radius: 5px;	
  -webkit-border-radius: 5px;	
  border-radius: 5px;	
  behavior:url(sites/all/themes/appno_theme/css/border-radius.htc);
}

 

2.Displays a color gradient background

We used to use an image for color gradient backgrounds. Now one of CSS3's features gives designers or developers the ability to create gradients in CSS code. Its biggest advantage is writing scalable and flexible gradient effects in code. However, initially CSS3’s gradient property only works great for Safari 4+, Chrome 1+, Firefox 3.6+, and Opera 11.10+. Here again, IE is an issue, so I had to find a solution over the web. Here is our example that adds syntax for IE:

.more-link {  
  font-family: "Lucida Grande", Geneva, Verdana, sans-serif; 
  font-size: 11px; 
  color: #fff;  
  padding: 6px 8px;
  background: -moz-linear-gradient(top, #7fbf4d 0%, #63a62f 100%);/* For Mozilla/Gecko (Firefox etc) */  
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7fbf4d), to(#63a62f));/* For WebKit (Safari, Google Chrome etc) */
	
  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7fbf4d', endColorstr='#63a62f'); /* For Internet Explorer 5.5 - 7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#7fbf4d', endColorstr='#63a62f')"; /* For Internet Explorer 8 */
}

 

The tip for IE8, you can’t put “a” link into your CSS name, better use .more-link {~} instead of .more-link a {~}

3. Implementing @font-face

@font-face is one of the many ways to allow you to show a font on a Web page even when the end user hasn’t installed this font on his/her computer. We’re going to use Stratum typeface, an OpenType font, for a header this time. The syntax is:

@font-face{	
  font-family:'Stratum';	
  src: url('../font/Stratum2-Light.otf') format('opentype');
}

h1, h2, h3 {	
  font-family: Stratum, Tahoma, Helvetica, sans-serif;
}

 

But Internet Explorer only supports .eot (Embedded Open Type) files, even though it was the first browser to support @font-face. So we have to find a way to sort it out. First, we have to convert the Stratum typeface .otf file to a .eot file at fontsquirrel.com. Second, add “src: url('../font/stratum2-light-webfont.eot?#iefix') format('eot');” to the iefix.css file for IE7 & IE8. Then the problem will be solved.

There are tons of articles related to the above issues, here is just a short list of links for your reference:

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser http://webdesignerwall.com/tutorials/cross-browser-css-gradient http://css-tricks.com/css3-gradients/ http://www.fontsquirrel.com/fontface/generator http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-...

Front End Developer
Li began his career by studying internet programming and graphic design at BCIT and Emily Carr Institute of Art + Design. He has worked on a wide variety of projects at local IT companies, government agencies and nonprofit organizations accumulating years of front front end...→ More about Li
Front End Developer

Li began his career by studying internet programming and graphic design at BCIT and Emily Carr Institute of Art + Design. He has worked on a wide variety of projects at local IT companies, government agencies and nonprofit organizations accumulating years of front front end coding experience, especially with with Drupal Theming. He always strives for pixel perfection in his work and constantly keeping up with the latest technologies. His background and enthusiasm for Chinese culture brings an Asian element to the multicultural team. As a member of CIPA, he loves photography and enjoys traveling, camping and snowshoeing.

Last place visited: Yellowstone National Park.

Playlist includes: Paul Simon & Art Garfunkel, Bob Marley, and the current one is Lana Del Rey.

Bucketlist accomplishments: Climbed to the top of the deserted part of the Great Wall of Ming Dynasty near Beijing.

Favorite books or movies: Novels by Chinese nobel prize winner Mo Yan and Ang Lee's "Life of PI"

 

 

Appnovation Technologies