0

I am setting up a page partly in HTML5 styling in combination with the ie7.js script (which enables html5 styling support). It worked before flawlessly, but now I'm using the same setup, the website comes up in IE6/7 unstyled. I've been busy with it now for days and cannot find out why. Anyone that is able to find out what's wrong?

This is my head:

<!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]--> 

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="http://zzappservices.nl/wordpress/wp-content/themes/zzapp/style.css" />
<link rel="shortcut icon" type="image/x-icon" href="http://zzappservices.nl/wordpress/wp-content/themes/zzapp/favicon.ico" />

<!-- Scripts, CSS and settings specific targeted to Internet Explorer -->
<!--[if lt IE 9]><link rel="stylesheet" href="http://zzappservices.nl/wordpress/wp-content/themes/zzapp/css/ie.css" type="text/css" /><![endif]--> 
<!--[if IE 6]><link rel="stylesheet" href="http://zzappservices.nl/wordpress/wp-content/themes/zzapp/css/ie6.css" type="text/css" /><![endif]--> 

<!--[if IE]>
<link href="http://zzappservices.nl/wordpress/wp-content/themes/zzapp/css/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=0.0001)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=0.0001)">
<![endif]-->

The page works perfect in webkit/mozilla browsers.

Kara
  • 6,115
  • 16
  • 50
  • 57
grrrbytes
  • 312
  • 2
  • 15
  • It seems that it chokes on the declaration in style.css: `@import url('css/layouts/1column.css') all; @import url('css/styling.css') all; @import url('css/print.css') print; @import url('extra.css') all;` if I link those stylesheets directly it works (although layout is pretty f up, but that's what I expected). Anyone has a clue why this happens? – grrrbytes Feb 09 '11 at 16:14
  • Anyway, I will ditch the @import method since it apparently affects performance negatively anyway: http://stackoverflow.com/questions/4801302/css-import-or-link-rel-with-media-attribute. Still wonder why explorer chokes on this though... – grrrbytes Feb 09 '11 at 16:22
  • In IE, if @import is used for CSS the stylesheets will be included after the body has loaded so if your JavaScript is relying on a CSS class or style being defined, it may be failing due to that. Avoiding @import is an excellent idea. – nybbler Feb 10 '11 at 04:23

1 Answers1

1

One problem you might be having is due to the fact that your CSS stylesheet that is supposed to be included if IE < 9 is not there. Try visiting: http://zzappservices.nl/wordpress/wp-content/themes/zzapp/css/ie.css and you'll get a blank page.

It appears the IE 6 stylesheet is also not present. If allowed, you should be copying these files locally for your site for reliability.

Community
  • 1
  • 1
nybbler
  • 4,793
  • 28
  • 23
  • They are there, but they are empty so far, since I haven't started making the site IE compliant yet. But even if I remove the references, it still happens. It is actually only in IE<8 – grrrbytes Feb 09 '11 at 15:40