Site maintenance: Sun 15 Nov, from 12:00 UTC, about 4–6 hours. Details

This cutover relies on some testing that is still incomplete so may be cancelled at short notice

Forums / Templates, Stylesheets, Page Layout / Border-radius.htc for rounded corners in ie?

Border-radius.htc for rounded corners in ie?

Started by mike_uk100 on 16 May 2011, 8:04 PM · Views: 2,159

Results 1 to 6 of 6
16 May 2011, 8:04 PM
#1
mike_uk100 avatar

mike_uk100

New Zenner

Join Date:
Jul 2008
Posts:
16
Plugin Contributions:
0

Border-radius.htc for rounded corners in ie?

Hi,

I'm working on a site where I want rounded corners on some boxes on the home page. I'm using rounded-corners.htc from here: http://code.google.com/p/curved-corner/downloads/list to try and get them to show in ie 6,7 & 8. I have used this method before without a problem but unfortunately I can't seem to get them to work within zen cart. It seems strange because I have a file with just the main content from the home page working as it should in the top zen cart folder of the site but once I put this content on the index page using the define pages editor the corners stop working in ie (and the background of those divs also disapears).

Here is a link to the site:

http://www.glossopgardencentre.com/shop/

Here is the page where it's working:

http://www.glossopgardencentre.com/shop/css-index-layout-mike.html

I'm using absolute paths to border-radius.htc.

Can anyone point me in the right direction with this?

16 May 2011, 8:20 PM
#2
mike_uk100 avatar

mike_uk100

New Zenner

Join Date:
Jul 2008
Posts:
16
Plugin Contributions:
0

Re: Border-radius.htc for rounded corners in ie?

Forgot to mention - within the main content it's just the top box with the slideshow and logos and the one directly beneath it on the right that use css rounded corners (the others are just images)

22 May 2011, 3:06 PM
#3
mike_uk100 avatar

mike_uk100

New Zenner

Join Date:
Jul 2008
Posts:
16
Plugin Contributions:
0

Re: Border-radius.htc for rounded corners in ie?

Had to change it back to table based layout for now so it looks correct in ie as its going live soon, so the links above are no longer relevant. Having thought about it for a few days I think it might be a cascade problem maybe. I'll try and get it working when I have time and post again if i have any success. In the meantime if anyone else has this working or has any ideas I'd be interested to hear.

23 May 2011, 2:36 AM
#4
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Border-radius.htc for rounded corners in ie?

the behavior (style) should be placed in an ie-specific .css file, you also need to include the border radius (style) here.

the border-radius.htc file should be placed at root of store

Note: this slows IE load time tremendously.

I have attempted and succeeded with this in the past and altimately did a screen shot of the site in FF and inserted a bg image for IE.

I have also used curvycorners that uses js but requires the renaiming of classes & id's also not worth it.

Both & all hacks available for this for IE is a waste in my opinion.

23 May 2011, 10:34 AM
#5
mike_uk100 avatar

mike_uk100

New Zenner

Join Date:
Jul 2008
Posts:
16
Plugin Contributions:
0

Re: Border-radius.htc for rounded corners in ie?

Thanks rbarbour, I'll give your background images suggestion a try.

23 May 2011, 6:57 PM
#6
rbarbour avatar

rbarbour

Totally Zenned

Join Date:
Feb 2010
Posts:
2,159
Plugin Contributions:
10

Re: Border-radius.htc for rounded corners in ie?

If your not sure how it will look you can click on my siggy to view my site.

I use the border-radius & linear-gradient style for FF & Chrome, I use backround DIV images to create the appearance in IE.