SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 5.5 and IE 6 Conditional Statement

    This is my first go at trying to make two different stylesheets to accomodate the shortcomings of IE. I am trying to make the vertical taskbar on the left side of the screen to be orange. In all other browsers, I use a transparent PNG as the background, but obviously that doesn't work in earlier versions of IE. I am testing in IE 5.5 and IE 6 to try and make it orange.

    http://www.jameswebdevelopment.com/c...trep/index.php

    I am not sure whether I used the right code in my header. This is what I used...

    Code:
    <style type="text/css" media="all">@import "css/sonnetrep.css";</style>
    <!--[if lte IE6]><style type="text/css">@import "css/IEsonnetrep.css";</style><![endif]-->
    Here is my css...

    Code:
    body, html {margin : 0 auto; padding : 0; background-color : #000; color : #FFF; text-align : center;}
    body {min-width : 800px;}
    /* First Layer */
    #container {width : 800px; margin : 5px auto; padding : 0; background-color : #B1B1B1; color : #FFF; border-left : 1px solid #000; border-right : 1px solid #000; text-align : left;}
    #header {float : left; width : 790px; height : 167px; margin : 5px;}
    #navbar {float : left; width : 800px; height : 40px; margin : 0 auto; padding : 0; background-color : #DC9427; color : #000; text-align : center;}
    #content {float : left; margin : 5px; padding : 0; width : 790px; min-height : 618px; background : url("../pics/background_content.jpg") repeat-y top center #A04030; color : #000; font-family : Verdana, Arial, sans-serif; font-size : 0.8em;}
    #vertnav {float : left; width : 168px; min-height : 604px; margin : 6px; background-color : #DB942A; font-family : Georgia, Verdana, Arial, sans-serif; font-size : 1.6em;}
    #main {float : left; width : 595px; min-height : 604px; margin : 6px 0 5px 0; padding-right : 10px;}
    #main.noverttaskbar {float : left; width : 750px; margin : 10px;}
    #footer {clear : both; float : left; width : 790px; margin : 0 auto; padding : 10px 5px; text-align : center; background-color : #B1B1B1; color : #000; font-family : Verdana, Arial, sans-serif; font-size : 0.6em;}
    /* Helpers */
    .clearfix:after {content : "."; display : block; height : 0; clear : both; visibility : hidden;}
    .clearfix {display : inline;}
    /* mac hide \*/
    * html .clearfix {height : 1%;}
    .clearfix {display : block;}
    /* End hide */
    .left {float : left;}
    .right {float : right;}
    img {border : 0;}
    #main img.left {margin : 5px 5px 5px 0; border : 1px solid #000;}
    #main img.right {margin : 5px 0 5px 5px; border : 1px solid #000;}
    /* Navbar */
    #navbar ul {list-style : none; margin : 0 auto; padding : 5px 0 0 0;}
    #navbar ul li {display : inline; padding : 0 10px;}
    #navbar ul li a {font-family : Georgia, Verdana, Arial, sans-serif; font-size : 1.6em; color : #000; text-decoration : none;}
    #navbar ul li a:hover, #navbar ul li.focus a {color : #FFF; text-decoration : none;}
    #vertnav ul {list-style : none; margin : 0; padding : 0;}
    #vertnav ul li {margin : 15px 5px;}
    #vertnav ul li a {color : #000; text-decoration : none;}
    #vertnav ul li a:hover, #vertnav ul li a:active, #vertnav ul li.focus a {color : #FFF; text-decoration : none;}
    /* Headers */
    h1 {font-family : Georgia, Verdana, Arial, sans-serif; font-size : 2.9em; font-weight : normal; margin : 0; padding : 0; display : block; width : 100%; border-bottom : 1px solid #000;}
    h2 {font-family : Georgia, Verdana, Arial, sans-serif; font-size : 2.0em; font-weight : normal; margin : 5px 0; padding : 5px; display : block; width : 98%; background : url("../pics/background_vertnav.png") repeat center center; border : 1px solid #000;}
    h3 {font-family : Georgia, Verdana, Arial, sans-serif; font-size : 1.5em; font-weight : normal; margin : 0; padding : 0;}
    h4 {font-family : Georgia, Verdana, Arial, sans-serif; font-size : 1.0em;}
    /* Footer */
    #footer p {margin : 0; padding : 0;}
    #footer a {color : #000;}
    #footer a:hover, #footer a:active {text-decoration : none}
    #footer a:visited {color : #4D4D4D;}
    /* Lists */
    #main dd {margin : 10px 0; padding : 0;}
    /* Links and Images */
    #main a {color : #000;}
    #main a:hover, #main a:active {text-decoration : none;}
    #main a:visited {color : #4D4D4D;}
    p.caption {font-family : Verdana, Arial, sans-serif; font-size : 0.8em;}
    /* Text */
    .subscript {font-size : 0.8em;}
    Any help would be appreciated!

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why are you importing the IE stylesheet?

    Also, are you trying to apply a separate look and feel for IE 5/6, or are you just trying to accomodate the browser's shortcomings?

    (Tip: Replace your lte with this: )
    HTML Code:
    <!--[if lt IE 7]>
    
    <![endif]-->

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Isn't the reasoning behind using @import that it shuts out old (version 4) browsers? It's a nice trick, though if there's anyone using those browsers they almost don't deserve to use the internet.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It was fine four years ago (2003), but isn't necessary anymore.

  5. #5
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, to be honest, I am trying to accomodate the browser's shortcomings. Is this the wrong approach? I know I am supposed to design to accomodate all browsers with one stylesheet, but unless someone can tell me how to fix the problem I have, then I am not sure what else to do. Here are the issues...

    • First, I can't seem to get the main section to float on the right of the vertical taskbar.
    • Second, I am using a transparent PNG for the background color of the verical taskbar, which is showing up grey in earlier versions of IE (for obvious reasons) and looks great in IE7 and FF. I thought I could use a separate stylesheet to give the vert navbar a solid color instead of the grey.


    If there is a better way to accomplish these tasks, then I am all ears and ready to learn.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using a conditional comment to feed a custom stylesheet that makes up for IE's short-comings ( :hover on anything, PNG alpha-transparency, and so on) is fine, but there's no need to write an entire stylesheet just to handle IE. Just put the fixes in there and you'll be good to go.


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
  •