Incorrect Folder for CSS3 PIE and WEBFONTS in 2.10 HTML5

I believe the code used to render the CSS3 PIE code when you add rounded corners is not correct. The HTC file must be included from the relative path of the CSS, so "plugins/css3pie/pie.htc" is not correct since the CSS files reside in "system/scripts/xxxxx.css"

technically it should then be :
"../../plugins/css3pie/pie.htc"

This is also a problem when including the @font-face tag, so the font url() specification must also start with ../../tl_files/theme/webfonts/myfont.ttf"

Hack.. On 2.10 you can modify the Stylesheets.php file (in system/modules/backend) on line 985 (approx).

Code:

---

                // CSS3PIE
                if ($blnNeedsPie)
                {
                        $return .= $lb . 'behavior:url("../../plugins/css3pie/PIE.htc");';
                }

---

Hope this helps people...

This is even worse in 2.11, where the path is incorrectly translated by the Combiner to:

Code:

---

behavior:url("plugins/css3pie/PIE.htc");

---

becomes =>

Code:

---

behavior:url("../../system/scripts/plugins/css3pie/PIE.htc");

---

In the bugfix version 2.11.2 this should be fixed (cf. commit 19ef787)

This still seems to ba a problem in 2.11.4 when I work with the Contao CSS editor :-(

The path in the css becomes

Code:

---

plugins/css3pie/PIE.htc

---

and IE does not show things correctly.

If I manually modify the path to

Code:

---

../../plugins/css3pie/PIE.htc

---

it works.

UPDATE: It turned out that the path is correct but the CSS3PIE had some z-index issues with IE.

In my opinion Contao should have an option to turn off CSS3PIE completely. In my experience it is an unnecessary layer of added complexity and always breaks more stuff than it fixes. I always empty the PIE.htc file since it is easier and faster than manually adding behaviour: none; to all elements that need it.

Just use external CSS files instead of the internal editor. It is much faster and you have full control. I never regretted doing this.

I ONLY use the built-in CSS editor and yes, you feel you have more control when you edit code before you use it, but once you start using the CSS editor for a bit, the complete graphic click editing, copying and pasting in Contao is brilliant. In fact, I've checked and it's much faster to use the built-in graphic clicking editor, than typing or even having an editor that does auto-complete. I can edit CSS at lightning speed with the built-in Editor.

Also, you can use categories in a css file. I have several CSS files in the theme, which are merged using the combiner. Then within each of them I have Categories as well, e.g. menu.css contains Menu Main and Menu Top and Menu Social categories.

Now I just want Contao to add CSS3 transitions as well.