www.webdeveloper.com
Results 1 to 4 of 4

Thread: Conditional Comments : some help required please

  1. #1
    Join Date
    Apr 2010
    Location
    Whitley Bay, UK
    Posts
    27

    Conditional Comments : some help required please

    Could somebody please clarify the use of Conditional Comments for providing different rules for older IE versions

    My site set up has the main xhtml files in the root directory, with directories below called css and images.

    Problem 1

    In my style sheet, one rule includes this ..

    .box{ background-image:url(../images/beigebox44.png); }


    but for older IE browsers, Iíll opt to use this image instead (the one without a dropped shadow effect on a transparent background)

    ../images/beigebox44.gif

    Where do I put this

    <!--[if lt IE 6.0]> <![endif]-->

    Problem 2

    Due to the way IE handles outset / inset borders differently to Firefox I also want to alter the CSS rule here too.

    For Firefox border-color:#262e9a; but for IE #787FCD

    Again, where does the Conditional comment go please

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    First the css for all browsers then IE in descending order
    Code:
    <link rel="StyleSheet" href="generic.css" type="text/css">
    <!--[if lt IE 8]>
    <style type="text/css">
    </style>
    <![endif]-->
    <!--[if lt IE 7]>
    <style type="text/css">
    </style>
    <![endif]-->
    <!--[if lt IE 6]>
    <style type="text/css">
    </style>
    <![endif]-->
    or target individual IE browsers
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Apr 2010
    Location
    Whitley Bay, UK
    Posts
    27
    Thanks 'Fang'

    Yep that's it .. I read about Conditional Comments ages ago, but having not used them at all, my mind had gone blank.

    Now I see how easy it is to use them

    As I have just a couple of issues I'll just add the new rules in the head section of each page; there's no need for a whole new style sheet

    One again, thankyou !!

  4. #4
    Join Date
    Apr 2010
    Location
    Whitley Bay, UK
    Posts
    27
    Update !

    I added this to the head section ofa page and for some reason it made a gap appear between the overall container and the top of the screen. What causes this please ?

    <!--[if lte IE7]>

    <style type="text/css">

    #mininav li a{
    border-color:#787fcd;
    }

    </style>
    <![endif]-->

    When I clicked on cut to remove this, the layout went back to normal, top of container right at the top of the screen.

    I have this on top of my css file

    *{
    margin:0px;
    padding:0px;
    }

    IGNORE THIS ... NO SPACE AFTER IE CAUSED THE PROBLEM SORRY !!!
    Last edited by Williebee; 05-06-2010 at 11:21 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles