SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Browser version based CSS

    Hi

    I was wondering if i'm able to detect a visitors browser version, and then base my webcontent on that. Im using .png files with PNG-24 Alpha Transparency, which works fine in Firefox, and IE (version 7 or over). However, when users visit my site with IE6, the .png files looks ugly and i want to utilize .gif pictures instead.

    I use the .png files as table backgrounds for my html page, which are defined in the css style tags. So is it possible to do something like this:

    Code:
    // FOR IE6
    
    /* content definitions */
    
    .contentBoxTop
    {
       background:url('../border_top.gif') no-repeat;
    }
    .contentBoxMain
    {
       background:url('../border_middle.gif') repeat-y;
       padding-right: 6px;
    }
    .contentBoxBottom
    {
       background:url('../border_bottom.gif') no-repeat;
    }
    
    // FOR IE7 AND UP, FIREFOX, OPERA
    
    /* content definitions */
    
    .contentBoxTop
    {
       background:url('../border_top.png') no-repeat;
    }
    .contentBoxMain
    {
       background:url('../border_middle.png') repeat-y;
       padding-right: 6px;
    }
    .contentBoxBottom
    {
       background:url('../border_bottom.png') no-repeat;
    }
    Thank you for your help and answers

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    This is how to use conditional comments so that:
    • IE browsers up to version 6 get one stylesheet that is hidden from non IE browsers
    • browsers from 7 onwards get a different stylesheet that is visible to non IE browsers


    Code html4strict:
    <!--[if lte IE 6]>
    <link rel="stylesheet" type="text/css" href="gifimages.css">
    <![endif]-->
    <![if gte IE7]>
    <link rel="stylesheet" type="text/css" href="pngimages.css">
    <![endif]>
    Last edited by paul_wilkins; Aug 14, 2008 at 19:10.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •