Login

02-08-2012, 01:59 AM

[eluser]info-solution[/eluser]
Good morning,
last night I was trying to integrate CSS3PIE or ie-css3.htc inside my web application to get the compatibility with Internet Explorer.

My problem is quite simple. To make it work I need to know the path of the file which is served by CodeIgniter to the browser, because I have to link the script in the css with a relative path from the document I am serving.

So, I have Models, Views and Controllers, and my Controllers call 3-4 Views to generate a page, so how can I use those CSS3 scripts inside my application.

I believe it is a common problem, but I can't solve it it this MVC environment.

Many thanks

02-08-2012, 04:27 AM

[eluser]InsiteFX[/eluser]
Add to all your html head tags

Code:
&lt;head&gt;

    &lt;base href="&lt;?php echo base_url();?&gt;" /&gt;

&lt;/head&gt;

Now you can use paths like assets/images

02-10-2012, 07:47 AM

[eluser]info-solution[/eluser]
I tryed but nothing changes.
The problem is simple but I need a bit of information which I don't know.

For example, to make the ie-css3.htc work I have to add to the CSS the following line of code:

Code:
behavior: url(<URL RELATIVE TO THE HTML PAGE>);

My problem is that I don't know the real location of the HTML page because there is no HTML page but it is generated from the views.

So, placing

Code:
&lt;head&gt;

    &lt;base href="&lt;?php echo base_url();?&gt;" /&gt;

&lt;/head&gt;

can help me with relative paths inside my view files, but I want to place style inside of the CSS file.

By the way I am trying some solutions now. I will let you know.

Thanks

02-10-2012, 08:04 AM

[eluser]info-solution[/eluser]
Ok, it works, and you were right man!

Many thanks, here a brief tip to make things more clear.

You have to use the <base> tag as InsiteFX has written above. Than you can place the ie-css3.htc file inside the main root or inside your css folder.

You can experiment some problems but they a re well known problems with ie-css3.htc, and to avoid them it is quite simple:

Position statement:
You have to declare the position of your element inside your css file.

Code:
position: relative;

or

Code:
position: absolute;

Z-Index:
Put your z-index higher than the elements around your "rounded borders" element.

Code:
z-index:10; /* I don't like this but it make things work */

Background:
This is not a common issue but after making things work, my background was black (only for the rounded corners elements).
I have placed a statement to make it white again.

Code:
background: white;

And it works.

Thanks.