WordPress.org

1. xmatter
   Member
   Posted 1 year ago #
   

   I am using a local install of WP/xampp for testing purposes and looking for a "working" IE 8 CSS3 border radius hack.

   I have found 2 so far:
   1)ie-css3.htc
   2)border-radius.htc

   I have tried both of them and cannot can them to work. I think I may be placing those files in the incorrect directory. So... I placed the file in all directories and levels, from xampp all the way into the theme/images folder..... no luck. Then I changed the behavior:url to the absolute location for each location.... no luck.

   Any thoughts?

2. Kathryn
   help me help you
   Posted 1 year ago #
   

   How exactly are you calling in those the files? Copy-paste the contents of the file where you're referencing them into a Pastebin so folks can take a look.

3. Ryan Yu
   Member
   Posted 1 year ago #
   

   To use the behavior on WordPress, you need to put the absolute url.

   So let's say if you want to have the rounded border for mainbox.
   Add this code in the header.php
   

   <style type="text/css">
   #mainbox {
   	behavior: url("<?php bloginfo('url'); ?>/border-radius.htc");
   }
   </style>

   and upload border-radius.htc to your root directory.

   You may also want to check out CSS3PIE:
   http://css3pie.com/

4. xmatter
   Member
   Posted 1 year ago #
   

   geeksfolder: I have tried what you suggested and no luck. In the below script you will see the url path that i am using, but i have also tried:

   '
   behavior: url(PIE.php);
   behavior: url(wordpress/PIE.php);
   behavior: url(localhost/wordpress/PIE.php);
   behavior: url(/localhost/wordpress/PIE.php);
   behavior: url(http://localhost/wordpress/PIE.php);
   behavior: url(http://localhost/wordpress/PIE.php);
   '

   I have tried everything including the border-radius way with all paths (like above) and nothing. The PIE php and htc have not worked either. I am at a loss. Also, i have placed copies of the PIE.php/PIE.htc IE-CSS3.php/IE-CSS3.htc in all directories from c:\\xampp right down into the theme folder itself.

   '
   #inner {
   width:960px; float:left;
   margin:0px auto 5px;
   min-height:670px;
   background:#EFEDED;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   -moz-box-shadow: 0 0 5px 2px #888;
   -webkit-box-shadow: 0 0 5px 2px #888; /* blur5 distance5px */
   box-shadow: 0 0 5px 2px #000;
   behavior: url(http://localhost/wordpress/PIE.php);}
   '

5. Ryan Yu
   Member
   Posted 1 year ago #
   

   Hey xmatter,

   I'm currently using CSS3PIE for my clients' wordpress sites,
   and it works ok.

   Download CSS3PIE and in the folder you will see PIE.htc with other files.
   I usually drop just PIE.htc in the root directory of wordpress.

   And let's say you want to create a div called mainbox with the rounded corner. On CSS3PIE site, create the code and copy it into your style.css excluding behavior: url(/PIE.htc).

   border: 1px solid #696;
   padding: 60px 0;
   text-align: center; width: 200px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   background: #EEFF99;

   And add the code below in the header.php (sorry the code in my first comment was wrong).

   <style type="text/css">
   #mainbox {
   	behavior: url(<?php echo get_bloginfo('url'); ?>/PIE.htc);
   }
   </style>

   It should work, let me know if you are still having a problem :)

6. xmatter
   Member
   Posted 1 year ago #
   

   I have put PIE.htc here:

   'C:\xampp\htdocs\wordpress'

   I have added the style css to head.php within the head tag. Still nothing.
   I did however notice that the background color is now gone from the "main" area and when i do multiple repeat refreshes in IE, the background color looks like a strobe light. So the color is residing in there, without rounded corners, somewhere.

   Other suggestions?

   Also, i created a basic template after a fresh install of xampp/WP to make sure it wasn't some other code screwing something up.

7. Ryan Yu
   Member
   Posted 1 year ago #
   

   Maybe try adding

   position:relative;
   zoom:1;

   in the box.

8. xmatter
   Member
   Posted 1 year ago #
   

   geeksfolder: worked like a champ!!!!

   Thank you so much!

9. xmatter
   Member
   Posted 1 year ago #
   

   it was the position and zoom all along. I can comment out the style within the header.php and place the htc file within root and add position and zoom within the style.css and it all works. perfect!

10. xmatter
    Member
    Posted 1 year ago #
    

    the only thing that doesn't work is the li a hover:

    '.menu li a:hover {
    color:#457843;
    background:#EFEDED;
    padding:13px 19px 13px 19px;
    margin:-3px 2px 0 0;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    position:relative;
    zoom:1;
    behavior: url(PIE.htc);}

    .menu li.current_page_item a {
    color:#457843;
    background:#EFEDED;
    padding:13px 19px 13px 19px;
    margin:-3px 2px 0 0;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    position:relative;
    zoom:1;
    behavior: url(PIE.htc);}
    '

    At first i have these 2 styles combined since they display the same and separated them to try and make it work. IE will only hover without rounded corners. any thoughts?

11. xmatter
    Member
    Posted 1 year ago #
    

    I forgot to mention..... the current_page_item DOES work, it's the hover that DOES NOT work.

12. Ryan Yu
    Member
    Posted 1 year ago #
    

    I'm wondering if you have any example page that I can see?

13. xmatter
    Member
    Posted 1 year ago #
    

    i do not any live hosting at this point. sorry. I guess i will just deal with it for now and fix in the future. Thanks for all your help!

14. Ryan Yu
    Member
    Posted 1 year ago #
    

    PIE doesn't work in some occasions
    like for the transparent background for IE6,
    if you repeat the background image, it won't work.

    But in your case, you don't have to put behavior
    for the hover.

    Hope it helps :)

15. maticpus
    Member
    Posted 1 year ago #
    

    Hello guys,

    I have the same problem, PIE is not working on my site (www.brezideje.si). I followed the procedure of geeksfolder, and still it's not working. Any idea, please?

    I am using repro theme, from themeforrest. Thanks, see ya

16. David Borrink
    Member
    Posted 1 year ago #
    

    Thanks, Geeksfolder for posting your help. I was confused where the PIE.htc file should go and you spelled it out for me.

    I suddenly found out that IE8 wasn't behaving with CSS3 border-radius declarations, so I'm glad you shared CSS3PIE info. I was 95% done with a nice site redesign and my client says, "Did you do the round corners? I still see squared corners. I'm using IE8."

    Worked like a charm. Now I can finish the project today.

17. postjoe.com
    Member
    Posted 1 year ago #
    

    I thought I would share my method for installing CSS3 PIE in WordPress Themes. This method has worked pretty well for me:
    In your theme functions.php add:

    if ($wp_ver >= 2.8) include(TEMPLATEPATH . '/includes/widgets.php');
    function my_render_css3_pie() {
       echo '
    <!--[if lte IE 8]>
    <style type="text/css" media="screen">
       #featured .your-container-name
     {
          zoom=1;
          behavior: url('.trailingslashit(get_bloginfo('template_url')).'js/PIE.php);   }
    </style>
    <![endif]-->
    ';
    }
    add_action('wp_head', 'my_render_css3_pie', 8); ?>

    To the theme files you will upload a file. I called mine "js". for all the PIE files. PIE_uncompressed.htc, PIE_uncompressed.js, PIE.htc, PIE.js and PIE.php. I am not sure how many of these besides PIE.php are essential but I included them all and it works which is good enough for me. Also, this method does not require that you add anything to your header and is portable because it does not require a hard coded path to the PIE files. Hope this helps someone as much as it helped me. Where I have: #featured .your-container-name you would replace this with all the CSS containers that need PIE to look right, separated by commas.

18. santhu_81@rediffmail.com
    Member
    Posted 1 year ago #
    

    thanks dreadcarno, its working fine for me

Topic Closed

This topic has been closed to new replies.