In this Blog post, we have shared the simple steps to apply border radius in phpmotion IE7 and IE8. For this, we use .htc file (html component file) which is used to deliver non specific functionality using behavior Url. .htc file is nonstandard which uses vml, javascript and jscript.
An example given below for reference:
- behavior:url('[var.base_url]/themes/[var.user_theme]/js/PIE.htc');
When we apply .htc file directly in the main page, it will affect the background in ie 9. As we had observed this issue, we have included new css file called “ie.css” for ie 7 and ie 8 as a solution to it.
For example
- <!––[if lt IE 9]>
- <link rel="stylesheet" href="[var.base_url]/themes/[var.user_theme]/css/ie.css" type="text/css" media="screen, , projection" />
- <![endif]––>
As Behavior url accepts only absolute url path of html file, we have defined behavior url for selectors in embedded style sheet and call the same selector in external style sheet.
For example
- <!––[if lt IE 9]>
- <link rel="stylesheet" href="[var.base_url]/themes/[var.user_theme]/css/ie.css" type="text/css" media="screen, , projection" />
- <style type="text/css" media="screen">
- .ts-1-1 {
- behavior:url('[var.base_url]/themes/[var.user_theme]/js/PIE.htc');
- }
- </style>
- <![endif]––>
Place the below code in ie.css :
- .ts-1-1 {
- border-radius:10px;
- position:relative;
- }
Finally you will get the output similar to the screenshot given below :
This entry was posted on Saturday, October 29th, 2011 at 12:58 am and is filed under PHPMotion Templates. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
