Geek Answers Handbook

CSS selectors not used in IE7 and IE8

Having a weird issue with IE that I have never seen before.

The whole group of my selectors is simply not applied at all in IE7 and IE8. They work great in IE9 and good browsers.

To see the effect in action, just focus on the logo in the upper left corner of this site: www.rtotv.com.au . Using the developer tools (F12) in IE9, find this element:

<body> <div class="container"> <header class="row header clearfix"> <h1 class="span3 logo"> <a title="RTO TV Home" class="ir" href="/"> <--this element

The styles.css styles load fine, and the .ir class applies, but as an example, this style selector does not apply to ALL in IE7 and 8, but works fine in IE9:

 header h1.logo a {}

If I can understand what is happening here, Iā€™m sure I can fix the rest of the site, but right now it completely destroys the site in IE7 and 8.

+4
source share
3 answers

This site is built using HTML5, which is not supported by ie7 and ie8 and is not fully supported by ie9.

take a look at the upgrade:

Modernizr is an open source JavaScript library that helps you build next-generation websites with HTML5 and CSS3.

or you may want to reuse your HTML with XHTML by replacing the nav , section , header tags with supported tags

+4
source

This is because IE does not support HTML5. Add the following script to render html5 in IE. And add a class to the title element and then style using that class.

 document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav");
+2
source

You can also use shiv to fill in the blanks.

+1
source

More articles:


All Articles