I've been successfully using CSS3 pie on a site and it's been really helpful to achieve lots of modern effects without the normal associated pain. (To the point where I can't imagine doing any web development without it these days!)

However, it's a content managed site and there are issues when editing the content with TinyMCE. I have a table which has a thead with rounded tops. In TinyMCE the header cell on the far left doesn't have a background colour, rendering its contents unreadable (as it becomes white on white).

I'm quite happy not to have CSS3 features in my TinyMCE editor - in fact I think it might be better that extra elements aren't being inserted into the content because they could potentially be saved into the HTML which I wouldn't want.

I noticed if I used IE dev tools and unticked the pie.htc behavior rule it seemed to fix it. I have a TinyMCE specific CSS file, so thought I would try this:



But sadly it doesn't make a difference. Oddly enough in dev tools I can see the pie.htc behaviour is showing, but with strikethrough indicating it's been overridden (again unticking it makes the cell work OK). I can see my "behavior: none" rule is active - for all the good it's doing me! I'm guessing because I can have multiple behaviours that "behavior: none" doesn't actually do anything other than confuse the dev tools.

I also tried "border-radius: 0 !important" in there but it didn't help.

Does anyone know if there's a proper way to stop Pie doing its thing? (Other than going through my CSS and stacking up extra selectors in there, which I'd rather not do if possible.)

Any help would be much appreciated!

Thanks!

I would think that the "behavior:none !important" should do the trick. Is your TinyMCE CSS file being loaded in some special way, like with javascript after the page has loaded?

Thanks for the unbelievably - scarily! - fast reply !!!!

I'm using Umbraco as the CMS, and I select tinymce.css from within it. I've had a look at the source and it generates the following:



So I think the answer to your question is no, it does seem to be a raw HTML link to tinymce.css, but I can't guarantee there isn't any funky script stuff going on behind the scenes as I'm pretty certain there will be!

Incidentally, I tried adding the behavior: none to the main CSS file, so it looks like this::



On the public site, Pie was disabled as my curvey corners disappeared, but within TinyMCE I still got the blank cell. I tried removing pie.htc in my original script, and this then fixed it. (But not quite what I'm after)

It feels like it might be something to do with all the script-heavy stuff going on with TinyMCE. Maybe I will just have to add in extra selectors so that the CSS3 stuff only works at all outside TinyMCE.

Thanks, again, for your help!

Did you ask at the TinyMCE forums yet?

I ended up deciding to remove PIE from this particular table altogether in the end.

The reason being was that we were using first-Child and last-Child to apply top left/right curves to the table header row. But IE8 doesn't understand last-Child anyway.

I think it's probably good enough for what we need in this case. The problem might come up again later though, so I might need to revisit. And, if so, I will try the tinyMCE forums. Problem with this kind of thing is that it falls in a hole between Umbraco, TinyMCE and PIE and finding out which one is responsible can sometimes be a bit tricky!

Again, thanks for the replies - really impressed by the responses from here.