www.webdeveloper.com
Results 1 to 2 of 2

Thread: Browser Validation and CSS

  1. #1
    Join Date
    May 2007
    Location
    Cleveland, OH
    Posts
    1,403

    Question Browser Validation and CSS

    I'm no pro when it comes to Javascript, so the problem might be with that. However, because only IE supports color gradients I have set up a basic Javascript to determine what browser you are using, and changing your CSS based on that. The IE CSS uses gradient backgrounds, but the other CSS uses bitmap gradients I made. However it seems that either a)Firefox is trying to use IE's CSS or b)my javascript isn't linking the CSS properly. Anyway here's what I'm working with right now (cookies for remembering validation will be added in later.) Keep in mind its a first-day mockup I'm working with. I didn't get much sleep last night so I'm hopingits something dumb I just keep overlooking.

    IE's CSS
    Code:
    body
    {
    filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');
    }
    td.a
    {
    filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#FFFFFF', startColorstr='#C0CFE2', gradientType='0');
    border-bottom:#000000 solid;
    }
    td.b
    {
    background-color:black;
    }
    img.a
    {
    position:absolute;
    top:15px;
    }
    Firefox + Other browser's CSS
    Code:
    body
    {
    background-image:
    URL('bg1.bmp');
    background-repeat:repeat-x;
    background-color:#bdd0e3;
    }
    td.a
    {
    background-image:
    URL('bg2.bmp');
    background-repeat:repeat-x;
    background-color:white;
    border-bottom:#000000 solid;
    }
    td.b
    {
    background-color:black;
    }
    img.a
    {
    position:absolute;
    top:8px;
    }
    Javascript + CSS links
    Code:
    <link rel="stylesheet" type=text/css"" href="otherbg.css" id="otherbg" title="otherbg">
    <link rel="stylesheet" type="text/css" href="iebg.css" id="iebg" title="iebg">
    <script>
    <!--
    var browserName=navigator.appName; 
    var browserVer=parseInt(navigator.appVersion); 
    if ((browserName=="Microsoft Internet Explorer" && browserVer>=4)) 
      version="n3"; 
    else 
      version="n2"; 
    
    if (version=="n3")
      function setActiveStyleSheet(iebg) ;
    else
     function setActiveStyleSheet(otherbg) ;
    //-->
    </script>
    Here's what it looks like
    http://i19.tinypic.com/6g2k42b.jpg
    http://i13.tinypic.com/689nyab.jpg

    Also just noticed my page content dissappeared in IE, lol I'll have to deal with later.

  2. #2
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,270
    Don't use JavaScript for this, use Conditional Comments.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

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