Databases
StackOverflow2013
Postsdbo
POIE7 ignoring my .js css rules - CSS/Javascript issue?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIE7 ignoring my .js css rules - CSS/Javascript issue?
    primarykey
    data
    text
    <p>I am using the classes .js and .no-js on the &lt;html&gt; element to differentiate between layouts that have Javascript and those that don't. </p> <p>With the &lt;html&gt; element, I added a default class of 'no-js'. Then I include a single line of script in the header, <code>document.getElementsByTagName("html")[0].setAttribute("class","js");</code> to switch the html class to 'js'. Obviously this line of code will only work for browsers that have js enabled, so the &lt;html&gt; element will become &lt;html class="js"&gt; whereas non-js enabled browsers will continue to read &lt;html class="no-js"&gt;. </p> <p>And then I will simply use <code>.js someElement{ font-weight:bold;}</code> versus <code>.no-js someElement{ font-weight:normal;}</code> to style my page differently. </p> <p>However, I find that this approach fails dramatically on IE7. On IE7, the script works - or so it seems. On Developer Tools, it shows &lt;html class="js"&gt;. However, ALL css styling that start with .js are ignored by IE7, and IE7 behaves as though the &lt;html&gt; element has a class of .no-js. (Check out <a href="http://bit.ly/LMre3N" rel="nofollow">http://bit.ly/LMre3N</a> to get a clearer picture.) </p> <p>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:</p> <p><strong>CSS</strong></p> <ol> <li>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.</li> <li>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.</li> <li>Changing the specificity of the declarations - perhaps being more specific will lead IE7 to read the .js declarations - NOPE.</li> <li>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. </li> </ol> <p>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:</p> <p><strong>Javascript</strong></p> <ol> <li>I added 'type="text-javascript"' to &lt;script&gt; - No effect. </li> <li>I tried <code>document.documentElement</code> instead of <code>document.getElementsByTagName('html')[0]</code> - still the same.</li> <li>I used <code>var htmlOrWhat=document.getElementsByTagName("html")[0]; alert(htmlOrWhat);</code>, FF, Chrome, Opera, Safari, IE8, and IE9 returns '[object HTMLHtmlElement]', whereas IE7 returns [object], leading me to think IE7 is not reading the &lt;html&gt; element properly. </li> <li>I then tried to read the id and lang attributes of &lt;html&gt; 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. </li> </ol> <p>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 <em>exactly</em> what's wrong with IE7 here, and how to fix it. Thanks in advance. </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USanthonytwp
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POIE7 ignoring my .js css rules - CSS/Javascript issue?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POIE7 ignoring my .js css rules - CSS/Javascript issue?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYour block is lime in all browsers I have at hand btw (JS is enabled).
      singulars
      1. POIE7 ignoring my .js css rules - CSS/Javascript issue?
      1. USm90
    2. COThis is probably not the answer but it's `"text/javascript"` and not `"text-javascript"` inside the `<script>` tag.
      singulars
      1. POIE7 ignoring my .js css rules - CSS/Javascript issue?
      1. USpoepje
    3. COYour doctype is also wrong - it should be <!DOCTYPE HTML>, although this isn't causing the problem.
      singulars
      1. POIE7 ignoring my .js css rules - CSS/Javascript issue?
      1. USajcw
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload