PDA

View Full Version : Alternate stylesheet for IE6


tglaz
06-08-2009, 08:17 PM
I'm trying to use an alternate stylesheet for IE6. I am using png-24 files in my design. I have added some javascript which has solved most of the issue with displaying transparency, but there are a couple background image graphics that use background-position and don't display where they're supposed to. These are purely decoration, so I figured it would be just as easy to use an alternate stylesheet so that the page looks nice in IE6. However, I can't seem to get IE6 to use the alternate stylesheet. I hope I have something goofy and simple to correct in my code (one of those "DUH!" things), but having looked at it for so long, I can't see it. Hopefully, someone here can help?? I even added conditions for using IE6 or IE7 hoping that would solve it, but no go.

My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>Insert Title here</title>

<!--[if lte IE 6]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="sytlesheetie6.css" />
<![endif]-->

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="sytlesheet.css" />
<![endif]-->

</head>
felgall
06-08-2009, 08:41 PM
You don't have ANY stylesheets there for any browser except IE.

What you should be doing is have a stylesheet NOT in conditional comments that all browsers can use and then follow it with the stylesheet that is in conditional comments that just has those overrides to the first stylesheet needed to get IE6 to work.
Early Out
06-08-2009, 08:47 PM
<link rel="stylesheet" href="stylesheet.css" type="text/css" />

That certainly looks like the "all browsers other than IE" stylesheet, to me!

This should be sufficient to account for IE6:


<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="sytlesheetie6.css" />
<![endif]-->
tglaz
06-08-2009, 08:49 PM
Isn't the larger text pointing to my normal stylesheet?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
tglaz
06-08-2009, 08:57 PM
sorry Early Out, I was replying when you posted. I tried the language you suggested and it's still not working. Aargh. I'm stumped.
Early Out
06-09-2009, 12:31 AM
That's quite a mystery, since it's pretty standard HTML. All I can suggest is checking the obvious stuff, like making sure that stylesheetie6.css is in the same directory as the calling page, that its name is actually stylesheetie6.css, and not stylesheetIE6.css (filenames are case-sensitive), or sytlesheetie6.css (I notice you misspelled it a couple of times!), etc.
JamesYap
06-09-2009, 01:20 AM
#1. The usual way we write all your codes below (too many lines)


<!--[if lte IE 6]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="sytlesheetie6.css" />
<![endif]-->

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="sytlesheet.css" />
<![endif]-->

is



<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<link rel="stylesheet" type="text/css" href="sytlesheetie6.css" />
<![endif]-->


#2. After that you got to debug to see IF it is not working BECAUSE the your browser is not reading your stylesheet OR IF your sytlesheet css syntas is not working? To know that, change something obvious in your sytlesheetie6.css like font size or margin-top. If they are working, that means your css syntax for background image and background position is not working.
felgall
06-09-2009, 02:28 AM
That certainly looks like the "all browsers other than IE" stylesheet, to me!


Oops - it was separated far enough from the other stylesheet calls that with the quick look I gave the code I didn't see it.

If the code isn't working then it would have to be due to something in one of the stylesheets not behaving as it should as the HTML is fine for what you are trying to do.