Selectivizr: Object doesn't support this porperty or method (IE7 & IE8)

With ‘The CSS3 Anthology’ example, I was hoping to be able to style rows in a table using the Selectivizr method as mentioned so the rows will be colored in IE7 & 8, since ‘nth-child()’ is not supported by these browsers.

Following the instructions, (page 277), I receive an error from IE7 & IE8:
"Line 5
Char 2109
Error: Object doesn’t support this property or method
Code: 0
URL: blah, bla, blah:

Here’s the code that loads in my header:

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript" src="/media/system/js/selectivizr-min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Th source of the code has the correct path because I was able to view the file via my browser, so I know the path to the .js file isn’t the problem and I have JavaScript enabled (I’m using IETester).

I must say that this isn’t the only time I’ve attempted to use a tool published within the book. I’ve tried using PIE.htc for border-radius and it didn’t work as well.

What would be causing Selectivizr not to work with IE7 & 8?

Isn’t this more of a Javascript question? ANd the error is telling you to check line 5. You don’t even have 5 lines posted in taht code of yours :).

I will say though, that you have an XML declaration above the doctype which causes IE to behave old school. Like 1999 old school :)…

Thank you, Ryan:

If the DOCTYPE is the case, then what should I go with? I’m using Transitional at the moment, and I’ve tried changing it, to no avail.

If I’m in the wrong department, which I didn’t think I was, how shall I bump it to the JS forum? :slight_smile:

I had the same as you buddy, sadly I have never found the reason why the error occurs as i spent a good 3-4 hours Googling it but i did find a script that seemed to fix it.

http://s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js

The doctype isn’t the problem. Though you shouldn’t use transitional.

The problem is that you have the XML declaration above the doctype and that throws IE into quirks mdoe.

Though this is completely unrelated to your curent problem. I asked for a thread move so the thread currently is in the JS forum :).

Thank you, Ryan!

Thanks, chris.upjohn, I’ll check this out!

Do you have a link to the page in question as it will be easier to debug if we can see where the actual error is pointing to. IE often throws an error if there’s things like an extra comma in the js.

If you are viewing the page locally you will get an access denied for IE due to its security restrictions.

You’re welcome to see: http://aaarms.com/inventory.html

I have yet to try chris,upjohn’s suggestion, so I was hoping to get this one figured out first.

It seems like any fallback methods I have tried within ‘The CSS3 Anthology’ book has been a dud. I would hope to contact the author to share my challenge, but posting on a forum would probably be the better route at this time.

It seems that the fix worked for IE8, but not for IE7. It would be nice to be able to get IE7 to cooperate, but maybe it’s running in ‘quirks’?

The problem in Ie7 is that you have used a reset that sets the background of everything to transparent. When you do that to td tags then IE7 also makes the tr transparent. That’s why you should be very careful what you put in your reset and why they are often more trouble than they are worth.


div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, city, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {																																																																																																																																																																																																																																																																																																																																						margin: 0px;																																																																																																																																																																																																																																																																																																																																													padding: 0px;
font-size: 100%;
vertical-align: baseline;
border: 0px;
outline: 0px;
[B]/*background: transparent;*/[/B]
}



Here it is working in IE7.

Thank you for the extra time you put into this AND for the tip, Paul O’B, and I do see by your example that it does work, but mine still isn’t. I’m assuming it’s because the .js script is running before jquery is loaded, but I’m struggling to change that within a Joomla template.

That would seem to be the likely problem as the jquery script is last in sequence and should be first. I don’t know anything abut Joomla though so I’m not much use with that I’m afraid. At least you know it will work if everything is in the right place.