Forums
View unanswered posts | View active topics It is currently Tue Nov 25, 2014 2:49 pm



Reply to topic  [ 5 posts ] 
 Selectively disabling PIE (e.g. for editing in TinyMCE etc.) 
Author Message

Joined: Mon Nov 14, 2011 8:53 am
Posts: 3
Post Selectively disabling PIE (e.g. for editing in TinyMCE etc.)
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:

Code:
*
{
   behavior: none !important;
}


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!


Mon Nov 14, 2011 9:15 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1446
Post Re: Selectively disabling PIE (e.g. for editing in TinyMCE e
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?


Mon Nov 14, 2011 9:23 am
Profile

Joined: Mon Nov 14, 2011 8:53 am
Posts: 3
Post Re: Selectively disabling PIE (e.g. for editing in TinyMCE e
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:

Code:
<!DOCTYPE>
<html>
  <head xmlns="http://www.w3.org/1999/xhtml">
    <base href="http://mysite/" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link type="text/css" rel="stylesheet" href="http://mysite/css/tinyMCE.css" />
  </head>
  <body id="tinymce" class="mceContentBody ">
  </body>
</html>


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::

Code:
behavior: url(/scripts/PIE.htc);
behavior: none !important;


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!


Mon Nov 14, 2011 9:46 am
Profile

Joined: Sat Aug 21, 2010 11:12 am
Posts: 223
Post Re: Selectively disabling PIE (e.g. for editing in TinyMCE e
Did you ask at the TinyMCE forums yet?

_________________
PIE needs more community support persons! Time is money, which means you can fund PIE development by answering support questions.


Mon Nov 14, 2011 10:56 am
Profile

Joined: Mon Nov 14, 2011 8:53 am
Posts: 3
Post Re: Selectively disabling PIE (e.g. for editing in TinyMCE e
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.


Thu Nov 17, 2011 5:05 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 5 posts ] 

Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.