Grow your CSS skills. Land your dream job.

Problems with gradient and round corners on menu ( IE)

  • # January 16, 2013 at 5:52 pm

    Hi

    Menu doesn’t show gradient and round corners properly on drop down menu for IE (all versions).
    Is there anyone who can assist me with this?

    Many Thanks

    # January 16, 2013 at 6:01 pm

    Code? Link? Example?

    # January 16, 2013 at 6:59 pm

    Border-radius and gradient are not working on lower than IE9. You can try http://css3pie.com/ for radius and Gradient on IE8 and lower. An other exemple: http://thedevstop.wordpress.com/2012/01/26/css-gradients-in-ie6-ie7-ie8using-css3-pie-to-fill-the-gap-in-legacy-browsers/

    # January 16, 2013 at 9:56 pm

    Still having the same issue :(

    # January 16, 2013 at 11:43 pm

    You will need to make 2 changes:

    1) The path to pie.htc should be relative to html – not css.
    So, your code in css will be behavior:url(css/pie.htc);

    2) When you are applying pie to an element, it needs to have position – relative or absolute.

    Let me know if that helps. Thanks. :)

    # January 17, 2013 at 12:40 am

    Im sorry but what do you mean by the path to pei.htc should be relative to html?

    # January 17, 2013 at 11:39 pm

    Eg. If you were to write the path of pie.htc in HTML, it would be “css/pie.htc” (assuming pie.htc is in css folder.) The same path should be given in CSS.
    Hence, behavior:url(css/pie.htc)

    # January 20, 2013 at 9:30 pm

    Hi Neerukool

    The html and the css are the same but it’s still not working and I have any idea what I’m doing wrongly. .. Could you assist me?

    # January 20, 2013 at 9:31 pm

    I meant have the same path but it’s still not working properly and I don’t have any idea what …

    # January 20, 2013 at 10:15 pm

    Hi. Perhaps I can help. I’ve made it work in IE8 – the PIE documentation states that the element to which the properties (rounded corners, box shadows, gradients etc) should be assigned should be given a relative/absolute/fixed position, and a z-index.

    Secondly, I noticed that the extension .htc works locally, but to be able to see it on a server, one should use the extension .php.

    P.S: It’s a little weird but I’ve used .htc here, and it seems to work in IE8, but to make it work even in IE9, you’ll have to use .php. (the .htc extension did not work in another project that I had worked on)

    # January 20, 2013 at 10:19 pm

    >

    # January 20, 2013 at 10:36 pm

    I’ve made some buttons in CSS, having rounded corners and a gradient. Perhaps I could send them to you and you could examine the code.

    # January 20, 2013 at 10:46 pm

    It would be great if you can send the file to me. It will help a lot.
    studentit16@yahoo.com

    # January 20, 2013 at 11:36 pm

    @Krish1980, pie.htc can work on server as well.. The page is an HTML page – not php.
    If it was for Drupal, we need full path to the .htc file.

    @StillLearning, I just figured out you have put your PIE.htc in js folder. So, you should change your path in css to:
    behavior:url(js/Pie/PIE.htc);

    And dont forget applying position: relative / absolute to your elements.

    Thanks. :)

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".