Forum Moderators: not2easy

Message Too Old, No Replies

IE stylesheet quirckyness

         

philaweb

12:05 pm on Feb 14, 2005 (gmt 0)

10+ Year Member



To the latest update of a web site I've added extended PDA functionality using a handheld media stylesheet. I've also added a print media stylesheet, making it three external stylesheets all in all.

To make the new screen layout of the web site work as intended - even in older IE browsers like 5.5 and 5.01 - it was necessary to fiddle a bit with the way the stylesheets are called. Otherwise, IE 5.5; 5.01 and 4.01 would give me a hard time with quirck modes, not showing some of the content.

This is the code I finally got to work in all browsers:

<style type="text/css">@import url("http://www.domain.com/style/print.css") print;</style>
<style type="text/css">@import url("http://www.domain.com/style/handheld.css") handheld;</style>
<style type="text/css" media="screen,projection">@import url("http://www.domain.com/style/screen.css");</style>

There is only one problem now. Some IE Mozilla 4 based browsers (not all, which is really weird) send back a 404 error on the print and handheld stylesheets. They simply cannot understand the code, which was intended to make them ignore the stylesheets, but they send queries like this:

/folder/folder/url(http://www.domain.com/style/print.css)%20print

Well, I'm glad I made the stylesheets actually work on all browsers. I've searched in many places for answers to how I can filter old quircky IE browsers with some odd calls for stylesheets and avoid 404 errors, but haven't come up with something usefull.

Anyone with a heads up?

DrDoc

8:56 pm on Feb 14, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



One thing you can do to get IE4 browsers to ignore the style sheet is not use the url() format. Try this instead:

<style type="text/css" media="print">@import "http://www.domain.com/style/print.css";</style>
<style type="text/css" media="handheld">@import "http://www.domain.com/style/handheld.css";</style>

philaweb

9:54 am on Feb 15, 2005 (gmt 0)

10+ Year Member



DrDoc,

Thanks for your reply.

After a good nights sleep and something else in mind, I returned to the code with the three stylesheets.

It seems like the <style> attributes has their limitations, so I scratched my head and remembered something about <link rel> attributes.

This is the code I finally got to work without any 404 errors whatsoever:

<link rel="stylesheet" media="print" href="http://www.domain.com/style/print.css" type="text/css">
<link rel="stylesheet" media="handheld" href="http://www.domain.com/style/handheld.css" type="text/css">
<link rel="stylesheet" media="screen" href="http://www.domain.com/style/screen.css" type="text/css">

I could slap myself silly for chasing the wrong bus. ;)