SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Oct 2002
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Seperate CSS for different versions of IE?

    Hey,

    Ok got a slight problem - got some CSS that is working in Firefox, IE6 and IE5.5 on pc but not in IE5. Now, I have some CSS that works in Firefox, IE5 and IE5.5 but NOT IE6...so I either need to do a browser detect or something else.

    I have this CSS code which I believed gave different version of IE sepereate values:

    Code:
     * html #content {/*only ie gets this style*/
     	 \width: 30000px;/* for ie5 */
     	 wi\dth: 200px;/* for ie6 */
     }
    This doesn't work though - I think I found this in one of PaulO'B tutorials not sure?

    Anyway I had found this code which I thought would work also) put in the head of the document:

    Code:
     <--[if IE 5.0]>
       <link rel="stylesheet" type="text/css" href="homepage_ie5.css" />
     <![endif]-->
    But IE6 picks this up. Here is a link to the site working in Firefox, IE5.5 and IE6:

    http://www.yduk.net/css/home.htm

    Here is a link to the site working in Firefox, IE5 and IE5.5:

    http://www.yduk.net/css/homeie5.htm

    However, another problem I am having is within IE5 - it doesn't display the background like the others. Here are some pictures as examples:

    http://www.yduk.net/css/working.gif - Working properly (Firefox, IE5.5, IE6)
    http://www.yduk.net/css/notworking.gif - Not working properly (IE 5)

    Even stranger is IE5 on mac, it doesn't display the header and displays the other columns as IE5 does on pc.

    Any ideas? Sorry there is so much to ask, but can't seem to find any workaround on these problems

    Cheers,
    Chris

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are practical ways to simplify things...

    IE5Mac sometimes behaves very differently than the Win versions. There are various workarounds... not difficult, but tedious, easy to forget and sometimes unreliable. As it has a low and declining user base - it's now more than 4 years old and officially 'dead' - you may wish to exclude it from receiving styled content.

    Similar situation with MSIE5Win. 5.5 is heading that way too.

    Brave or foolish men will exclude all MSIE other than Win6... and write xhtml strict code which kicks that browser into 'compliant mode' and thus eliminates some of the problems - whilst creating a few others - and is an altogether better route for those seeking pages which work reliably across a variety of platforms.

    And some, in the quest for 'serve all - exclude none - will simply hack their css until it resembles perl.

    Restricting the serving of styled content to specific browsers is simple to do - if you're interested just say and I'll find some code.

  3. #3
    SitePoint Addict
    Join Date
    Oct 2002
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thanks for your comments - yea I realise some of these browsers are on their last legs, I for one would love to rid them from the internet, but the boss and client want to make sure they are relatively ok looking...

    I've got some code that will hide CSS from specific browsers, but still need IE5 fix - a few people still use it so I should try and support it.

    Cheers,
    Chris

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,872
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    This version works in ie5, 5.5 , ie6 and firefox/opera (all pc).

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>FLYA</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen">
    /*/////////////////////
    /*				   */
    /*	POSITIONING	*/
    /*				   */
    /*/////////////////////
    /* HTML and BODY attributes \*/
    body, html {
     margin: 0 0 0 0;
     padding: 0 0 0 0;
     text-align: center;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 12px;
     background-color: #FFCCCC;
     background: #FFCCCC;
     background-image: url(http://www.yduk.net/css/_images/bgfade.gif);
     background-position: top;
     background-repeat: repeat-x;
     background-attachment: fixed;
    }
    /* Font defaults */
    html, body, p, h1, h2, h3, ul, ol {
     font-family: Verdana, sans-serif;
     color: #FFF;
    }
    /* mac hide\*/
    html, body {height:100%}
    /* end hide */
    /* Wrapper */
    div#wrapper {
     position: relative;
     text-align: left;
     width: 764px;
     margin-left: auto;
     margin-right: auto;
     padding: 20px 0 0 0;
    }
    /* Header */
    div#header {
     position: relative;
     height: 199px;
     width: 764px;
     background-image: url(http://www.yduk.net/css/_images/header.gif);
    }
    /* Background */
    div#background {
     background: #CC3333;
     background-color: #CC3333;
     background-image: url(http://www.yduk.net/css/_images/bgcontent.gif);
     background-repeat: repeat-y;
    }
    /* mac hide\*/
    * html div#background{height:1%}
    /* end hide*/
    
    /* Nav */
    div#nav {
     float: left;
     background: #CC3333;
     background-color: #CC3333;
     border-left: 4px solid #FFF;
     vertical-align: top;
    }
    div#nav {
     width: 165px;
     padding: 0 10px;
    }
    * html div#nav{ width: 185px; w\idth:165px;}
    /* Content */
    div#content {
     float: left;
     background: #CC3333;
     background-color: #CC3333;
     vertical-align: top;
    }
    div#content {
     padding:0px 10px;
     width: 370px;/* Actual size */
    }
    * html div#content{width: 390px;w\idth: 370px}
    
    /* Nav 2 */
    div#nav2 {
     float: left;
     background: #CC3333;
     background-color: #CC3333;
     margin: 0 px 0 0;
     vertical-align: top;
     clear: right;
    }
    div#nav2 {
     width: 157px;
     padding: 0 10px ;
    }
    * html div#nav2 {width: 177px;w\idth: 157px;}
    /* IE6 Padding */
    /* Footer */
    div#footer {
     clear: both;
     height: 64px;
     width: 764px;
     background: #FFCC00;
     background-color: #FFCC00;
     background-image: url(http://www.yduk.net/css/_images/bgfooter.gif);
    }
    .cfix:after {
    content: ".";
    display: block;
    height: 1px;
    margin-top:-1px;
    overflow:hidden;
    clear: both;
    visibility: hidden;
    }
    .cfix {display: inline-block;}
    /* Hides from IE-mac \*/
    .cfix {display: block;}
    /* End hide from IE-mac */
    /*/////////////////////
    /*				   */
    /*	  STYLING	  */
    /*				   */
    /*/////////////////////
    /* Header 1 */
    h1 {
     font-size: 1.5em;
    }
    /* Header 2 */
    h2 {
     font-size: 1.2em;
     margin-bottom: -12px;
     color: #FFCC00;
    }
    /* Header 3 */
    h3 {
     font-size: 1em;
     margin-bottom: -12px;
    }
    /* Footer lists */
    div#footer li, div#footer ul {
     display: inline;
    }
    /* Footer lists */
    div#footer ul {
     position: relative;
     top: 7px;
    }
    /* Footer list link */
    div#footer li a {
     text-decoration: none;
     color: #FFFFFF;
    }
    /* Footer list link hover */
    div#footer li a:hover {
     color: #FFCC00;
    }
    .clearer{
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    clear:both;
    }
    </style>
    </head>
    <body>
    <div id="wrapper"> 
      <div id="header"></div>
      <div id="background" class="cfix"> 
    	<div id="nav"> 
    	  <h2>Menu</h2>
    	  <p>This is a test. How is this working out then? I dunno but it better work! 
    		efsdssddf</p>
    	</div>
    	<div id="content"> 
    	  <h2>Content</h2>
    	  <p>This is a test. How is this working out then? I dunno but it better work! 
    		efsdssddf</p>
    	  <p>This is a test. How is this working out then? I dunno but it better work! 
    		efsdssddf</p>
    	  <p>This is a test. How is this working out then? I dunno but it better work! 
    		efsdssddf</p>
    	  <p>This is a test. How is this working out then? I dunno but it better work! 
    		efsdssddf</p>
    	  <p>This is a test. How is this working out then? I dunno but it better work! 
    		efsdssddf</p>
    	  <p>This is a test. How is this working out then? I dunno but it better work! 
    		efsdssddf</p>
    	  <p>This is a test. How is this working out then? I dunno but it better work! 
    		efsdssddf</p>
    	  <p>This is a test. How is this working out then? I dunno but it better work! 
    		efsdssddf</p>
    	</div>
    	<div id="nav2"> 
    	  <h2>Nav 2</h2>
    	  <p>This is a test. How is this working out then? I dunno but it better work! 
    		efsdssddf</p>
    	</div>
      </div>
      <div id="footer"></div>
    </div>
    </body>
    </html>
    


    I don't see the need to separate ie versions very often as its usually only a tweak or 2 to get them all behaving relatively well.

    The conditional comments will serve each ie version different code if you want but they don't work if you are using the multiple installations of ie.

    Tha backslash hack divides ie6 from ie5 and 5.5. To eparate ie5.5. for ie5 you can use conditional comments or use the voice family hack as follows.

    Code:
    * html #content {
    color:red;/* for ie5 */
    voice-family: "\"}\""; 
    voice-family:inherit;  
    }
    * html #content {/* ie5 will jump this block because of the voice family hack above*/
    color:blue;/* ie5.5. gets this*/
    c\olor:green;/*ie6 gets this*/
    }
    A bit convoluted and ugly and I will only use it if I can't get away with the display as it is.

    Paul
    [/code]


  5. #5
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    P... it gets eaten on MSIE5Mac... the pink bg is absent at the top and there's some nonsense on the right with an intermittent redline.

  6. #6
    SitePoint Addict
    Join Date
    Oct 2002
    Posts
    311
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul as usual you have absolutely confirmed your status as css guru in my opinion - thank you so much for your time and effort! Works wonders now - will look into the code more to see what you did.

    Thanks for clearing up the code regarding IE5, 5.5 and 6 only etc.

    Gulliver as you mentioned - IE5 on mac is dead practically - apart from the background and red line on the right it seems readable - which is ok for me. I could always end up using unstyled for IE5 mac - don't apple provide Safari free with OS X? Did OS 9 come with it's own browser?

    Again, thank you both for your time

    Cheers,
    Chris

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,872
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by gulliver
    P... it gets eaten on MSIE5Mac... the pink bg is absent at the top and there's some nonsense on the right with an intermittent redline
    I'm afraid that i only test on ie5 mac when i get paid for it

  8. #8
    SitePoint Evangelist
    Join Date
    Jul 2004
    Location
    England
    Posts
    588
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    >I'm afraid that i only test on ie5 mac when i get paid for it

    And I usually only use it on 'check this' requests. ;-)

    >I could always end up using unstyled for IE5 mac - don't apple provide Safari free with OS X? Did OS 9 come with it's own browser?

    'Smart move' on the former and 'yes' Saf is bundled with OSX. OS9 runs MSIE/Nav/Opera etc


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •