Actinic and CSS3 and PIE

[bwebsites]

I have used CSS3 PIE with actinic, for several sites, and intend to use it from now on.

You can see it for rounded corners and drop shadows in this Actinic site I did, on the right hand side. The left hand side was done with images and divs before I discovered CSS3 PIE, but I don't think I'll go back to the old way.

http://www.petitpoppet.com/acatalog/...terfly_II.html

It can behave oddly in IE9 but you can tell IE9 to behave like IE8 by adding

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

to the header.

I can't get the .htc file to be picked up in the Actinic internal browser, so you don't get to see the effects until you publish.

[Steve G Griggs]

I don't think Actinic's preview mode uses the IE rendering engine so it probably wouldn't pick up the effects of PIE.htc
I have to admit I hadn't thought of trying the emulate IE8 trick.

[bwebsites]

I think Actinic uses the same rendering engine as IE7 as it exhibits all of the same CSS bugs, although occaisionally the internal renderer shows some very odd behavior that IE7 doesn't. It's no big deal really as the important thing is that the live site works.

[Steve G Griggs]

That's the main thing, also having thought about it I'm fairly sure that the htc file needs to be on a server to work.

[neilspinney]

any pointers on how to get this to work as I have been struggling to get rouned corners to work in actinic!?


Neil

[Duncan Rounding]

Rounded corners are easy to implement without PIE - see it in action on the New Products here: http://www.evening-dress-shop.co.uk/index.html. It only works of course in Safari, Chrome and FF.

[Steve G Griggs]

Rounded corners.

Using CSS3 of course Duncan..
But..
Why not design for the latest browsers, and just make sure that your pages just don't look "broken" in older browsers?
Just write the CSS so it "degrades gracefully", meaning Chrome, FF, Safari etc (oh and IE9 when it arrives, if your visitors have got Vista or win7) get rounded corners, drop shadows etc, and IE8 gets-plain old CSS2 pages-square corners, no drop shadows.
Don't rely on CSS3 for essential functions and layout, just a bit of extra "eye candy" for the browsers that can do the business.
Why can't we just accept that the web site(s) we're designing won't look the same in all browsers.
Oh, of course you could add all sorts of extra markup with images linked to them, and slow your page loading down, and make your HTML "fatter" with all the unsemantic (is that a real word or not? Firefox says "no".) <div> and <span> elements.
Now I've stirred up the hornets nest...
Merry XMAS everyone. Happy coding for 2011.

[neilspinney]

Okay I have now got rounded corners running on our site.
But I need to get them running in IE.
I have uploaded the pie file to our site using Additional Files and entered the coding in my CSS file but it will not work!?

Any tips hints?


Neil

[Steve G Griggs]

The css line that calls the PIE behaviour must point to the location of the file relative to the HTML file the CSS relates to.
(I find it easiest to use the root folder)

IE:behavior: url(/PIE.htc);
Note: this path is relative to the HTML file being viewed,
not the CSS file it is called from.

There is support at this URL http://css3pie.com/documentation/


Another point is, is your server configured to allow use of .htc files? See below..(copied from the PIE help files)
Serving the correct Content-Type

IE requires that HTC behaviors are served up with a content-type header of "text/x-component", otherwise it will simply ignore the behavior. Many web servers are preconfigured to serve the correct content-type, but others are not.
If you have problems with the PIE behavior not being applied, check your server configuration and if possible update it to use the correct content-type. For Apache, you can do this in a .htaccess file:
AddType text/x-component .htc If for some reason you are unable to modify the server configuration (e.g. if you are on a shared host which does not allow custom .htaccess files), then you may also use a wrapper script. For instance, PIE includes in its distribution files a PHP script called PIE.php; this script simply serves up the PIE.htc file using the correct content-type header. To use it, simply make sure both PIE.php and PIE.htc are in the same directory, and then in your CSS point the behavior to the PHP file instead:
behavior: url(PIE.php);

[neilspinney]

Cheers for the pointers!

I couldn't find the .htaccess file on my server so have uploaded PIE.php and have changed my css file to this:

#container1 {
behavior: url(http://www.gparts.co.uk/PIE.php);
-moz-border-radius: 10px;
-moz-box-shadow: 10px 10px 7px #888;
-webkit-border-radius: 10px;
-webkit-box-shadow: 10px 10px 7px #888;
width:600px;
background:#eeeeee;
border-color:#DEDEDE;
}

I am just doing a upload and will test again in IE.

Neil

[neilspinney]

Just tried this and it still is not working!?


mmmmmmmmmmmmmm


Neil

[meden]

Did you uplad the .htc and .php file using additional files? If so try changing the CSS path to http://www.gparts.co.uk/acatalog/PIE.php

[neilspinney]

okay I have uploaded pie.php via additonal files and changed the css to the following.

#container1 {
behavior: url(http://www.gparts.co.uk/acatalog/PIE.php);
-moz-border-radius: 10px;
-moz-box-shadow: 10px 10px 7px #888;
-webkit-border-radius: 10px;
-webkit-box-shadow: 10px 10px 7px #888;
width:600px;
background:#eeeeee;
border

Currently doing an upload now!

Neil

[neilspinney]

nope still not working mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

Neil

[meden]

Just spotted you haven't added the box shadow and radius rules for ie

Try:
#container1 {
behavior: url(http://www.gparts.co.uk/acatalog/PIE.php);
-moz-border-radius: 10px;
-moz-box-shadow: 10px 10px 7px #888;
-webkit-border-radius: 10px;
-webkit-box-shadow: 10px 10px 7px #888;
width:600px;
background:#eeeeee;
box-shadow:#888 10px 10px 7px;
border-radius:10px;