PDA

View Full Version : Linking to Stylesheet for IE?



michael180
Aug 22nd, 2007, 02:18 AM
REF: http://moderntimes.com/tmp/

For the page above to render correctly in IE, I need to write a separate Stylesheet. Will someone tell me where I can get the information on linking to a separate Stylesheet for IE?

Thanks

VIPStephan
Aug 22nd, 2007, 02:37 AM
The trick is a conditional comment (http://msdn2.microsoft.com/en-us/library/ms537512.aspx).
Like so:



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


You can have as many of them a you want to serve different versions of IE.

michael180
Aug 22nd, 2007, 03:33 AM
Thanks VIP, I'll see what I can do with it.

Michael

michael180
Aug 22nd, 2007, 03:46 AM
VIP, maybe I'm not coding it properly, but nothing seems to happen? I created a Stylesheet called style_ie.css, and purposely left out the #wrapper, and looked at it in IE7, but nothing?

Michael

harbingerOTV
Aug 22nd, 2007, 03:49 AM
put a space between IE and 7 in your comment like:


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

michael180
Aug 22nd, 2007, 04:06 AM
No nothing. The link you provided on Conditional Comments, the middle of it not there, it's as if there was an image there. I cannot read it.

Thanks

Arbitrator
Aug 22nd, 2007, 04:54 AM
The link you provided on Conditional Comments, the middle of it not there, it's as if there was an image there. I cannot read it.Try http://www.quirksmode.org/css/condcom.html.

Also note that you can use down‐level revealed conditional comments [1] if you need to hide content from Internet Explorer.


http://www.456bereastreet.com/archive/200511/valid_downlevelrevealed_conditional_comments/

michael180
Aug 22nd, 2007, 05:39 AM
Hi Arbitrator,

I tried as the link to .456 suggests, but still I cannot get IE7 to recognize the alt stylesheet?

Thanks

Arbitrator
Aug 22nd, 2007, 06:02 AM
I tried as the link to .456 suggests, but still I cannot get IE7 to recognize the alt stylesheet?If you had read what I said, you would know that that particular resource instructs you how to hide content from Internet Explorer.

harbingerOTV
Aug 22nd, 2007, 06:15 AM
try :



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

michael180
Aug 22nd, 2007, 07:19 AM
If you had read what I said, you would know that that particular resource instructs you how to hide content from Internet Explorer.

Isn't that what I want to do, hide the CSS that works with everything else, and re-direct IE to the sytlsheet that I set up for IE?

michael180
Aug 22nd, 2007, 07:25 AM
try :



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


No luck. I am probably just going to have to live with the way the page renders in IE. The sytlesheet is so basic, I can't understand why IE works this way? I just cannot move the image off the bottom border without destroying how the others browsers render the page. Unbelievable!

Thanks.

Arbitrator
Aug 22nd, 2007, 07:53 AM
Isn't that what I want to do, hide the CSS that works with everything else, and re-direct IE to the sytlsheet that I set up for IE?Based upon your previous statement, it sounded like you were trying to show only Internet Explorer a style sheet by using a down‐level revealed conditional comment, which would do exactly the opposite of the intention.

Regarding the current statement, a more practical approach would be something like:


<link Ö>
<!--[if IE]>
<link Ö>
<![endif]-->The first style sheet would be designed for the more standards‐compliant browsers and be read by Internet Explorer. The second would only be read by Internet Explorer; the only things that it would contain are the CSS necessary to make things work in Internet Explorer (new CSS or overrides for parts of the existing CSS). This, of course, assumes that you will design for a better browser first and tweak for Internet Explorer afterward.

Alternatively, you could do the following, as you proposed:


<!--[if !IE]>-->
<link Ö>
<!--<![endif]-->
<!--[if IE]>
<link Ö>
<![endif]-->

However, that will almost certainly mean that you have two style sheets that are mostly identical and when you change one you will almost always have to make a change in the other. In other words, itís more work than the other method.

michael180
Aug 22nd, 2007, 08:14 AM
I was able to get the page to render in IE almost as good as it does in FF, without re-directing. The only problem I am having it that when I re-size my browser in FF it moves everything around. Is there a way to make things stable?

Maybe that's for another day. :)

Thanks all.

Michael Mills

michael180
Aug 22nd, 2007, 08:19 AM
I was able to get the page to render in IE almost as good as it does in FF, without re-directing. The only problem I am having it that when I re-size my browser in FF it moves everything around. Is there a way to make things stable?

Maybe that's for another day. :)

Thanks all.

Michael Mills

The page does not crumble in FF, it's Safari. . .

Thanks

Arbitrator
Aug 22nd, 2007, 09:42 AM
The page does not crumble in FF, it's Safari. . .Firefox 2 looks the same as Safari 3 (beta) from here. If you mean Safari 2, I canít really help you.

I can tell you that I see some odd behavior due to the left margin, right margin, and right padding on #wrapper. Iím not sure why youíre using code to center your layout when you apparently donít want it centered. You could try removing those declarations and then adding some left padding to #panel.

Speaking of #panel, the code for it could be much better.


<div id="panel">

<p><a href="http://moderntimes.com/palace/"><span title="Palace Classic Films, articles and images on Hollywood's golden era"><img src="image/palace.gif" alt="Moderntimes Classic Film Pages" width="210" height="25"/></span></a></p>

versus


<ul id="panel">
<li><a href="http://moderntimes.com/palace/"><img alt="Palace Classic Films" width="210" height="25" src="image/palace.gif" title="Palace Classic Films, articles and images on Hollywood's golden era"/></a></li>