Hi,

I'm trying to use PIE to deliver gradients, rounding and shadows on a project, which I've done successfully on previous projects.

The site is basically a big wizard guiding the user through a number of pages to gather a lot of information. Each page has a lot of dynamically altered content, controlled by a mix of C# and Javascript / jQuery, with NOTY used to handle error notifications. The whole lot is run in .Net MVC. I'm responsible for the styling rather than the back-end coding so I won't pretend to be an expert on the MVC part of the setup.

The problem is when going from one page to another... much of the validation is done on the page transition, and it seems if an error is found and NOTY called to put up an error toast, then PIE starts generating 'Object Required' errors.

PIE.BorderStyleInfo = PIE.StyleInfoBase.newStyleInfo(
getCss:
line 1819: if( !( el.tagName in PIE.tableCellTags && el.offsetParent.currentStyle.borderCollapse === 'collapse' ) ) {

I hacked my way (horribly) past that error by removing the 'offsetParent', but the code then falls over at

PIE.RootRenderer = PIE.RendererBase.newRenderer(
updatePos:
line 2554: tgtCS = el.currentStyle,


And I think I've seen it fall over on another (similar) line somewhere else, on another occasion.

The complexity of the project doesn't lend itself it to trying to create a Fiddle that'll re-create the problem and allow easy debugging, so I'm left asking:

Are there any common mistakes or reasons for this sort of problem that I can address?
Has anyone seen NOTY causing problems when interacting with PIE?
Is there anything I can do within the PIE source code to workaround the problems?

Any suggestions would be gratefully received, as I appreciate it's not a lot to go on!

For it to fail on that particular line, it would have to be a <td> or <th> that either has no offsetParent, or its offsetParent has no currentStyle. Either one of those seems out of the ordinary to me, and I'm not sure why the browser would get in that state. That said, I've done very little real-world testing with using PIE on tables, so it's very possible there are edge cases like this that crop up.

Not sure what I can do to help without a reproducible testcase. Might you be able to avoid applying PIE to table cells, e.g. wrapping the cell contents in a div instead? Or is that too buried within this NOTY thing?

Jason,

thanks for the prompt reply.
I think I've ruled out NOTY as a factor - I replaced the call to create the toasts with a simple bit of code to create a div containing the error - and the javascript errors still kept coming.
The strange thing is the way the wizard behaves impeccably until the validation picks up an error in the input. Presumably something at that point is giving PIE a nudge to re-apply the styling.

Yes I am using heavily styled 'td' table elements for my wizard's progress bar... I don't think I can easily wrap those in divs, but I'll take a look - I may have to fall back on converting the bar to divs.
Either way at least I've got something to try. (My nightmare scenario would be if I had to drop using PIE, I couldn't keep the site's look-and-feel without it!)

Edit...
Resolution (workaround): Looking at the styling for the td elements, the only thing that PIE was helping with was to apply gradients... so I've replaced them with the old Microsoft filters which work well enough...

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#29abe2', endColorstr='#005289')"

And so it's working. A big sigh of relief as I can leave everything else in place without any major re-work