IE7 ignoring my .js css rules - CSS/Javascript issue? - javascript

I am using the classes .js and .no-js on the <html> element to differentiate between layouts that have Javascript and those that don't.
With the <html> element, I added a default class of 'no-js'. Then I include a single line of script in the header, document.getElementsByTagName("html")[0].setAttribute("class","js"); to switch the html class to 'js'. Obviously this line of code will only work for browsers that have js enabled, so the <html> element will become <html class="js"> whereas non-js enabled browsers will continue to read <html class="no-js">.
And then I will simply use .js someElement{ font-weight:bold;} versus .no-js someElement{ font-weight:normal;} to style my page differently.
However, I find that this approach fails dramatically on IE7. On IE7, the script works - or so it seems. On Developer Tools, it shows <html class="js">. However, ALL css styling that start with .js are ignored by IE7, and IE7 behaves as though the <html> element has a class of .no-js. (Check out http://bit.ly/LMre3N to get a clearer picture.)
I can't begin to imagine what exactly is wrong here: is this a case of IE7 behaving wrongly when rendering CSS, or is it a case of scripting not working properly? Here's what I tried:
CSS
Changing the order of .js and .no-js declarations, as I figured it could be the latter overriding the former that's causing the problem - NOPE.
Changing the order of the script and stylesheets, since it might be because IE7 read the .no-js stylesheet before it read the script - NOPE.
Changing the specificity of the declarations - perhaps being more specific will lead IE7 to read the .js declarations - NOPE.
Removing the .no-js class from the document altogether, hoping that IE7 will thus read .js declarations. NOPE - it simply ignores both the .no-js and the .js declarations.
In short, IE7 totally and completely ignore the fact that there is a .js declaration. So I figured it might be the script that had problems, and here's what I did:
Javascript
I added 'type="text-javascript"' to <script> - No effect.
I tried document.documentElement instead of document.getElementsByTagName('html')[0] - still the same.
I used var htmlOrWhat=document.getElementsByTagName("html")[0];
alert(htmlOrWhat);, FF, Chrome, Opera, Safari, IE8, and IE9 returns '[object HTMLHtmlElement]', whereas IE7 returns [object], leading me to think IE7 is not reading the <html> element properly.
I then tried to read the id and lang attributes of <html> to test if IE7 is actually reading the element properly and yes, it retrieves these attributes correctly, it just simply refuse to apply .js css declarations to it.
By now, I'm at my wits' end (though I suspect the [object] anomaly is related to my problem), and I hope someone here at Stackoverflow will be able to help me out. I will really appreciate it if someone can point out exactly what's wrong with IE7 here, and how to fix it. Thanks in advance.

setAttribute() and getAttribute() are generally broken in IE7 and earlier (and compatibility modes in later versions). Use the element's className property instead.
document.getElementsByTagName("html")[0].className = "js";
Here's a fiddle demo - http://jsfiddle.net/ajcw/6Yz8x/1/

SetAttribute() doesn't work as you might expect in IE7. It won't set an attribute on an item after it has been created. You'll need another way to handle the change in IE7.
The answer below suggests using the className property. Or you could probably just use jQuery.
(More: IE7 and setAttribute() to remove classes)

setAttribute() and getAttribute() are broken in IE 7
check this out:
IE7 and setAttribute() to remove classes

Related

site(using xml and xslt) is not opened in IE11 and mozilla but works in IE8. Please suggest the code of these files to get it worked in mozilla

I am beginner in xml and xslt kindly help.
This code works fine with IE4 and IE8 but not in mozilla and IE11. No error is thrown but site diaplays in text ##
In the stylesheet, remove the xmlns="http://www.w3.org/TR/xhtml1/strict". It does not belong in there as it puts your result elements in a namespace that is not defined by the W3C and is therefore not known by browsers. Your result is HTML anyway and not XHTML (which you could use if wanted but then you would need to make sure all element and attribute names are in lower case letters and the namespace is xmlns="http://www.w3.org/1999/xhtml").
So simply removing xmlns="http://www.w3.org/TR/xhtml1/strict" is the best option.

Hover link-menu not working on IE 11, pseudo classes ignored

i'm trying to do a menu like this one for a project in the making but IE 11 keeps ignoring the pseudo classes.
+<!doctype html>
<html>
<head>
<meta charset="utf-8">
etc...
I have +<!doctype html> because if i remove the + the elements get disorted in chrome for some reason, and altough i've tried removing it because from what i've heard ie forces itself into quircks mode thus not being able to handle pseudo classes doing so does not solve the problem, even with <!doctype html> ie ignores the css and then chrome gets it's view all messed up.
here's a fiddle with the code copy-pasted from what i'm doing. if you remove the #botao span:after you'll see how it renders on IE
fiddle
i've only tested the code on chrome, firefox and ie so far and i tried javascript to detect ie and hide the menu and show a different one but it also didn't work, and older browsers won't be a problem because css3 transforms won't occur leaving the first links in the place (or so i suspect. have to test it later on)
Pseudo class works in IE if you give the anchor tag a reference target. For example:
<span class="hoverlink"><a href=#>Hover over me</a></span>
.hoverlink a, .hoverlink a:visited, .hoverlink a:link{color:red;}
.hoverlink a:hover{color:green;}
Try putting in an "href" and see all the difference it makes in IE!
If you need an element other than the A tag to support pseudo class you'll have to use a doctype. And yes, it breaks the layout for some old IEs not because it enters quirks mode. Quite on the contrary, it leaves quirks mode, and "tries" to conform to standards and miserably fails.

Why does <!DOCTYPE> stop javascript from creating iFrames?

My website uses Javascript to create iframes, and I only realised now that its almost complete that I never set a doctype for the page.
For some reason, the doctype tag, no matter which doctype i use, causes my popup iframes to stop working.
I have no idea why this is happening, but it could be something to do with my javascript (http://www.dosed.co.uk/assets/script.js).
the page (not yet quite finished) is here:
http://www.dosed.co.uk
I'm sorry that I can't be any more specific about the problem! It simply works fine without <!DOCTYPE> but not with it!?
Without a Doctype, browsers emulate the bugs of older browsers. These bugs include misfeatures such as treating a number as a length with a pixel unit when assigned to CSS properties that accept lengths (such as ifrm.style.width=x+20;).
<!doctype html>, for HTML5, does not cause problems with <iframe>s. <iframe> is in the HTML5 spec: http://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-elementWhen no doctype is specified, the browser assumes the page is very old, and won't work as HTML5.

Jquery Error in ie8 and ie9 with Wordpress theme. (Object doesnt support this property or method)

I recently launched a website for a client http://www.bridgechurch.us/ only to recieve complaints of it not displaying correctly on ie8 or ie9. I have confirmed this to be true. IE is pointing to this line of Javascript:
jQuery(function () {
jQuery(".scrollable").scrollable({circular: true}).navigator().autoscroll({interval: 7000});
[...]
Can anyone help me figure out what is wrong with this line of code?
Thank you
UPDATE - FIXED
I figured out that there was a comment before the Doctype Declaration that forced IE into quirks mode.
You have a lot of 404's on that page, mainly related to ie-specific css and border images, which is probably why the page doesn't look like it should. Files like /images/internet_explorer/borderBottomRight.png and /wp-content/themes/Moses/styles/default.css aren't loading.
That being said, looking at the scrollable documentation, there is no .navigator() function off of the return value of scrollable(); and I'm getting the same error in Chrome.
Well, visually, the site doesn't appear to work well at all in IE9 (compared to Chrome). But just looking at the code that adds scrollable() to jQuery, you can see that that function doesn't always return the original element. In your code, if you split the call into two, you might be ok:
jQuery(".scrollable").scrollable({circular: true});
jQuery(".scrollable").navigator().autoscroll({interval: 7000});
I blame the plug-in on this one: functions that extend jQuery are supposed to always return the original elements found by the selector.

Create a <noscript> element with content fails on IE7 and IE8 (jQuery)

I've seen several threads about reading contents, but nothing on writing to noscript.
$('body').append('<noscript><div></div></noscript>');
In Chrome and IE9 I get a noscript-element with a empty div inside like I expect, but in IE7 and IE8 I just get a empty noscript-element without the div inside.
Example: http://jsfiddle.net/cEMNS/
Is there a way to add HTML inside the noscript-tag that works in all browsers? What I need is to add some tracking code into a noscript-element at the end of the page, but the info I need isn't available until after document ready.
Edit: I'm getting a lot of comments on "why". It's some poorly done tracking library that requires this. We don't have access to the code to change it. Regardless, I find it interesting that it works in some browsers and not in others since jQuery was supposed to work equally in all browsers. Is it simply a bug?
Edit2: (2 years later) Adding a noscript on the browser doesn't make sense, I know. My only excuse not the question the task I had was because of lack of sleep, like everyone else in the project. But my rationale was that jQuery should behave the same on all browsers and someone might want to do this on the server.
Regardless of the tracking code, what you are doing (or are required to do) makes no sense!
Why? There are two cases possible here:
user has JavaScript enabled in which case the NOSCRIPT get's inserted into the DOM but is ignored by the browser (does nothing)
user does not have JavaScript enabled, NOSCRIPT does not get inserted and does not "execute"
The end result of both cases is that nothing actually happens.
Just an idea: You could try giving your noscript tag an ID, and then try to use native js.
for example:
$('body').append('<noscript id="myTestNoScript"></noscript>');
document.getElementById('myTestNoScript').innerHTML = '<div></div>';
I would claim that if it does not work with native js, it will not work with any library (feel free to correct me on this one).
I tried following simple HTML code:
<html>
<body>
<noscript>I'm a noscript tag.</noscript>
</body>
</html>
Then I did analyse this with IE8 (in IE7 mode) and his integrated code insprector. Apparently the IE7 checks are script allowed. If so he declared it as empty. And empty tags will be ignored. Unfortunatly I could not try that with disabled script option, because only the Systemadministrator can change the settings (here at my work).
What I can assure you, the noscript does exists. If you add
alert($('noscript').size());
after the creation, the result will be 1.

Categories

Resources