Why does IE8/9 not pick up my css?

[Simon]

Hi,

I am having an issue with ie8+9 not picking up the css, (it seems).

We use Firefox to dev and I can see the site fine with chrome and safari.

I can even test the site on my local dev box and it looks fine on ie 9

The site validates, (apart from the <!--[if lt IE 8]>..., this is just
something I am trying).
http://jigsaw.w3.org/css-validator/...w.journalhome.com/pluginn/portalcss/?value=47

But when I put the site live, the css is not picked up.

Even when I use the developer tool, (F12), and press the css tab I
cannot see the css, it does not seem to get picked up.

The url http://www.journalhome.com

What could be the issue? Why would it work on my dev machine but not live?

Many thanks

Simon

 

[BootNic]

[snip]

The site validates, (apart from the <!--[if lt IE 8]>..., this is just
something I am trying).
http://jigsaw.w3.org/css-validator/...w.journalhome.com/pluginn/portalcss/?value=47

[snip]

That would be the place to start. Conditional comments are for HTML not CSS.

<!--[if lt IE 8]>
<style type="text/css">

</style>
<![endif]-->

or

<!--[if lt IE 8]>
<link rel="stylesheet" href="" type="text/css">
<![endif]-->


--
BootNic Tue Dec 11, 2012 02:23 am
Sometimes I think the surest sign that intelligent life exists elsewhere in
the universe is that none of it has tried to contact us.
*Bill Watterson*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iEYEARECAAYFAlDG32kACgkQOcdbyBqMFBEbXwCg0YJxcvUz07zMQ0XTbGwsjHUX
kncAnA//Qm54zbr+0O2zClwz7+1pwgFW
=jw4J
-----END PGP SIGNATURE-----

 

[Jukka K. Korpela]

I am having an issue with ie8+9 not picking up the css, (it seems).

It seems that the CSS code uses kludges like /*\*//*/ that are
apparently trying to play with IE. Are you sure you got them right, and
are you sure this is the right approach to whatever problems you were
having with IE.

Even when I use the developer tool, (F12), and press the css tab I
cannot see the css, it does not seem to get picked up.

Oddly enough, in the Nework pane there, it seems that the browser loads
the CSS file *twice* in succession.

 

[Simon]

That would be the place to start. Conditional comments are for HTML not CSS.

<!--[if lt IE 8]>
<style type="text/css">

</style>
<![endif]-->

or

<!--[if lt IE 8]>
<link rel="stylesheet" href="" type="text/css">
<![endif]-->

Yes, thanks, I removed them, but I still have the same issue...

Thanks

Simon

 

[Simon]

It seems that the CSS code uses kludges like /*\*//*/ that are
apparently trying to play with IE. Are you sure you got them right, and
are you sure this is the right approach to whatever problems you were
having with IE.

I have removed that code, (it is not needed on the landing page).
But the problem still occurs... (and it still works fine on my local
server).

Oddly enough, in the Nework pane there, it seems that the browser loads
the CSS file *twice* in succession.

I never noticed that here, this is strange, (it also happens with the js
code).
On my local machine it only gets loaded once...

Simon

 

[Jukka K. Korpela]

But the problem still occurs... (and it still works fine on my local
server).

Looks odd indeed.

I never noticed that here, this is strange, (it also happens with the js
code).

That's probably just a feature in IE developer tools, caused by using
refresh. When normally loading the page, this does not happen. Sorry for
the confusion.

The transaction seems quite normal: the browser requests for a text/css
resource, gets it with adequate headers, and developer tools show the
response text OK (and it validates as CSS), but somehow the browser then
loses it.

However, the response headers lack a Content-Length header. I never
thought this could make a difference, but since the HTTP protocol says
"Applications SHOULD use this field to indicate the transfer-length of
the message-body, unless this is prohibited by the rules in section
4.4.", this could be the problem. After all, in RFC language, SHOULD is
a strong word.

I tested the problem with a trivial document that simply uses the same
link element to refer to the style sheet and contains just an h1 element
(to see whether it gets styled). The problem is reproducible, so the
issue is definitely with the CSS file, not with JavaScript or with HTML
on your page.

In the "CSS" pane in IE developer tools, I can see the CSS file URL and
the text "Loading.." (well, "Ladataan..", but it means the same thing),
and this suggests that IE is really waiting for the loading to complete.
This would be consistent with my idea: in the absence of Content-Length,
IE thinks it does not know when to stop waiting, and it does not start
parsing the content as CSS.

 

[dorayme]

The site validates...

The url http://www.journalhome.com

This url above does not validate. This may be independent of your
problem, but it should be of some concern. There are other serious
design concerns, some things causing actual illegibility, your page
works best (even with styling disabled in a browser) at very small
text sizes. Perhaps you have very good eyesight and are not
sufficiently aware that other people are not so blessed or that some
people use Text_Only_Zoom.

 

[Simon]

Looks odd indeed.

However, the response headers lack a Content-Length header. I never
thought this could make a difference, but since the HTTP protocol says
"Applications SHOULD use this field to indicate the transfer-length of
the message-body, unless this is prohibited by the rules in section
4.4.", this could be the problem. After all, in RFC language, SHOULD is
a strong word.

But I do return the Content-Length header, I promise. I can even see it
in Firebug
But looking at the ie developer tab I can see that it is not there,
(even on my local site).

On my local site when/if I return a 304 header with a content-length=0
then the response header in the developer tab has the length of the
document so it might just be a display issue.

Not sure if that helps, but I use php:
header( sprintf( 'Content-Length: %d', strlen($output));

Simon

 

[Simon]

This url above does not validate. This may be independent of your
problem, but it should be of some concern. There are other serious
design concerns, some things causing actual illegibility, your page
works best (even with styling disabled in a browser) at very small
text sizes. Perhaps you have very good eyesight and are not
sufficiently aware that other people are not so blessed or that some
people use Text_Only_Zoom.

You are 100% correct and I need to address those issues as soon as possible.

Unfortunately re-designing the site, (or even fixing the various
issues), could take a better part of a week, (and given the time of year
it could even take longer).

So, as a stop-gap measure I want to get the site to render 'ok' in ie so
I can then concentrate on re-designing the site itself.

Thanks

Simon

 

[Simon]

However, the response headers lack a Content-Length header. I never
thought this could make a difference, but since the HTTP protocol says
"Applications SHOULD use this field to indicate the transfer-length of
the message-body, unless this is prohibited by the rules in section
4.4.", this could be the problem. After all, in RFC language, SHOULD is
a strong word.

If I turn the compression off then the content-length is sent back to
the browser.

So I suspect that there is something very wrong with the way I do
compression, (it also seems to slow the page down a fair amount).
Or my content-length is not calculated properly.

I will keep it turned off while I investigate further.

Simon

 

[Jukka K. Korpela]

Really? I don't think it is the problem,

You quoted (without attribution) "Hot-Text", which is either an
automated nonsense generator or a person trying to imitate one. Just
ignore it/him/her.

 

[Simon]

I will keep it turned off while I investigate further.

I have made some changes to the compression and it seems to work.
I am not 100% sure what was wrong with it in the first place but i
suspect that my content-length was wrong somewhere.

But I guess it is more a problem in my code rather than ie9/8.

Over the week-end I will try and investigate what settings are not the
same on the test server vs the live server to try and reproduce it on my
machine.

For now it seems to work.

Ironically this now gives me more time to re-write the site template.

Thanks for the help.

Simon

 

[Simon]

You quoted (without attribution) "Hot-Text", which is either an
automated nonsense generator or a person trying to imitate one. Just
ignore it/him/her.

Not sure what you mean by attribution. You mean quoting who the message
came from originally?

I remove it sometime when trying to trim the reply down.

Simon

 

[Jukka K. Korpela]

Not sure what you mean by attribution. You mean quoting who the message
came from originally?

Indeed. Like the first line in your message, or in mine.

I remove it sometime when trying to trim the reply down.

Attributions should not be removed, even in cases where its usefulness
is limited by the quoted poster's failure to use his or her full name.

 

[BootNic]

Really? I don't think it is the problem, I have not seen that
requirement anywhere.

Do you have a link to confirm that?

Even if … it would be incorrect information.

If It's On The Internet, It Must Be True …

Google may even return results that claim an external stylesheet needs a css
extension.

At any rate, IE 6 - 10 appear to load the linked stylesheet just fine the last
time I checked.




--
BootNic Wed Dec 12, 2012 01:41 am
I thought you should know that you didn't invent anything new.
*Bergamot*

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.11 (GNU/Linux)

iEYEARECAAYFAlDIJyUACgkQOcdbyBqMFBHtfQCfRGRv+Wh9hX5CB+4bj6ChQbSi
d44AnRw2xrPc4ct9hhaUYgRF8EqhuBFs
=Q6ZT
-----END PGP SIGNATURE-----

 

[Simon]

Even if … it would be incorrect information.

I think I would have accepted a link from the microsoft.com website.

If It's On The Internet, It Must Be True …

Must be.

At any rate, IE 6 - 10 appear to load the linked stylesheet just fine the last
time I checked.

Yes, the stylesheet I have seems to work fine, (well at least it loads,
not sure about working fine) ...

Simon