CSS border radius background colour/color issue | IE Firefox | border-radius.htc

[trixit]

Hi all,

I’m using the border-radius.htc IE fix/hack (found I think in CSS Tricks) and it’s working well on a few pages. However, on one particular page where I’m using two background colours nested in various DIVs (just some simple layering), I find I either need to remove the underlying CSS background definition (e.g. background-color: #400000) – which removes that underlying colour for all browsers, but retains the round corners – or place an override on the inner-most background definition (e.g. background-color: #200000 !important;) – although this keeps both background colours, we lose rounded corners in IE.

Apologies if that is not comprehensive, so here’s a summary:

1. Normally CSS round corners in FF is fine, and also works in IE using the border-radius.htc fix/hack
2. On one page, round corners in IE works only when removing a parent background definition
3. To keep all background definitions in all browsers, but disable round corners in IE only, I must place an override on the child DIV which uses the roundbox class

Border-radius.htc is well-known and can be found elsewhere, and the extra CSS required for the rounded corner IE behaviour looks like:

If it is of any use in any way, I’m utilising the 960 CSS framework.

For now I’m happy with IE not displaying this particular page/template quite as desired. I suppose my CSS structure includes a background definition somewhere which is overriding the child div background, but this only occurs in IE, and I’ve poured over it with Firebug etc.

I’ve already spent far too much time on this issue so I’ll leave it to anyone who may have an idea.

Many thanks

P.S. thanks to CSS Tricks for scores of fantastic tips!

[Author]

Posts