Mystery: CSS not showing in IE8

[Vildbas]

Hi!

I'm having problems with my site http://xn--bleka-tnder-r8a.com/. It's written with html5 and it when I run it in IE8 no CSS is displayed. Just white background and simple text/images...

I'm aware of troubles with html5 but I thought I've done the right things to prevent ths to happen:

- I've added html5shiv-script
- I've put "display:block" in css to make it understand article, section etc.

What else is there to do. Help!

/Emil, Sweden

 

[CaldwellYSR]

I don't know if this is the case and I don't have (or want) IE to test it on but try deleting the media queries. I think I remember reading somewhere that IE doesn't support them (along with you know everything else that's web standard). Anyways try deleting them and see if that helps, then if it does you'll just need to put most of your css in a file with no queries and then the stuff that changes into files with queries.

 

[chrishirst]

Probably because your conditional comments load the scripts for IE8 when IE7 is the browser in use, and IE9 scripts for IE8

 

[Vildbas]

1.Yes, some things were added when I deleted the media queries but I dont think thats stuff like section and article were rendered. Thought that html5shiv would take care of that...

2. I really would like to get my page responsive to different screen sizes. I'm pretty new to this wed design stuff but what happens if I follow your advice and make one "standard css file" and one "mobile css with small alterings to stuff that IE doesnt use". How will pages react to the "standard css"? How will i.e. a monile site understand which css to use? There'll be two of them!

Thanks for reply!

Emil, about to learn something

 

[chrishirst]

1.Yes, some things were added when I deleted the media queries but I dont think thats stuff like section and article were rendered. Thought that html5shiv would take care of that...

Only if you load the right script for the right browser.

This for example says

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

If [browser] is LESS THAN IE8 load IE8.js


and you have mis-understood how media queries work. For example this

media="only screen and (max-width:640px)">

Is NOT valid in a media attribute. It belongs in the stylesheet prefixed with @

@media only screen and (max-width:640px) {
/* rules go here */
}

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

 

[Vildbas]

Yes, i'm not 100% aware of what I'm doing

So the imortant stuff in my head looks like this:

<!--FÖLJANDE SCRIPT ANVÄNDS FÖR ATT IE6-9 SKA FUNKA MED HTML5 -->

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

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

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

<!-- 960.gs -->

<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/html5blocklevel.css" rel="stylesheet" type="text/css">
<link href="css/960_12_col.css" rel="stylesheet"  media="only screen and (min-width:641px)" /> 

<!-- Screen -->
<link href="css/table.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/screen.css" rel="stylesheet" type="text/css"  media="only screen and (min-width:641px)"> 

<!-- Mobile-->
<link href="css/table.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width:640px)"> 

<!-- Gallery -->
<script src="js/jquery-1.6.2.min.js" ></script>
<script src="js/slides.min.jquery.js" ></script>

How do u want it to look to be right? Gues I'll have to make media quueries in the css later.....

Really happy for your answe btw

 

[chrishirst]

The [if lt IE8] should be [if IE8] so that the code FOR IE8 is loaded for an IE8 user agent.


Conditional Comments are explained at Quirksmode, and the CSS tricks URL explains media queries.

 

[Vildbas]

Almost there...

Hi again!

I've now managed to get IE to read a special IE-css with help of "<!--[if lte IE 8]>".

- I use html5shiv
- I use 960gs
- I'm working with special css-file "screenIE" so I skip mediaquierybugs when IE doesn't detect.

MY PROBLEM NOW: When running the site in IE8, I dont get the page to scroll and I dont get backgroundcolor to my wrapper (called .container_12 på 960gs). Very weird...

I've also got two 960gs-scripts but they are exactly the same, just wanted to be sure IE8 detects it by uising "<!--[if lte IE 8]>". Don't think that matters but maybe?

Help

Emil, Sweden

My site that I'm working with: http://xn--bleka-tnder-r8a.com

 

[PixelPusher]

Yes IE8 will see your scripts because you are using the "lte" (less than or equal to) statement.

 

[Vildbas]

Yes I understand that now

The problem is just as I wrote the scrolling error and the wrapper without color... Can't see why this is happening

Thanks for answers!