HTML Help
HTML Help Central . com

» Online Users: 100

0 members and 100 guests
No Members online
Most users ever online was 695, 02-16-2011 at 07:01 AM.

» Site Navigation

 > FAQ

» Domains For Sale

Results 1 to 13 of 13
  1. #1
    Join Date
    Oct 2002
    Location
    Houston, Texas
    Posts
    1,994

    Yet another Browser Detection Thread

    Ok. I am building a web page application that is HEAVILY reliant on JS and CSS. I do this work at home using Firefox on Debian Linux. Things work smoothly on Firefox (100%), but when I bring this stuff to work to vie won IE everything is out of place (CSS position top/left needs adjustments) and my JS code errors (style.color wont work on IE, it needs style.fontColor [ but this errors on Firefox...] ).

    Anyways... I've come down to the conclusion that I am going to need to add in browser detection support so that this application knows which files to load.

    If IE I will oad up the IE stylesheet and js file(s) - If Firefox I will load those - If Netscape I will load those - etc etc

    I am wondering how many different types of stylesheets and JS files am I going to have to prepare to cover most (if not all) browsers?

    Like.... Do I only need to make 2? One for IE and one for the others ? Or do I need to get more specific than that?

    I can show you my source code if need be (i doubt you need it though).
    -Billy

    "I am using Linux every day to up my productivity - so up yours!"

    ******** W A R N I N G ! *******************************
    Linux should not be used by those under the influence of Microsoft.
    May cause dizziness or vertigo. Consult your tech support before
    using Linux. (note--after using Linux, you may notice extreme
    discomfort when using Microsoft. Discontinue use of Microsoft.)
    ******************************* W A R N I N G ! ********

  2. #2
    Join Date
    Oct 2002
    Location
    Houston, Texas
    Posts
    1,994
    Will this work for my stylesheets, or is it a load of crap? I find it hard to believe ALL browsers will be the same and only IE stands out differently...
    -Billy

    "I am using Linux every day to up my productivity - so up yours!"

    ******** W A R N I N G ! *******************************
    Linux should not be used by those under the influence of Microsoft.
    May cause dizziness or vertigo. Consult your tech support before
    using Linux. (note--after using Linux, you may notice extreme
    discomfort when using Microsoft. Discontinue use of Microsoft.)
    ******************************* W A R N I N G ! ********

  3. #3
    Join Date
    Oct 2002
    Location
    Houston, Texas
    Posts
    1,994
    Ok - here is the page layout and the stylesheet that makes it work...

    I had it working fine in Firefox last night, and today I played with it again and got it working in IE... I THINK I got it to work in both Firefox AND IE now... but I could be wrong...

    And another thing... I notice my main window scrollbar is WAY out of wack in IE.. It scrolls down a LOT but there is nothing down there.

    Remember, I am pretty new to using CSS for layout......... And so far I like the way things work, even though I am running into a LOT of problems.

    Can someone please help me out so I don't have to revert back to using tables....

    How can I make my layout fit PERFECTLY in ALL browsers no matter what - and how do I fix this stupid scrollbar problem in IE ??
    Attached Files Attached Files
    -Billy

    "I am using Linux every day to up my productivity - so up yours!"

    ******** W A R N I N G ! *******************************
    Linux should not be used by those under the influence of Microsoft.
    May cause dizziness or vertigo. Consult your tech support before
    using Linux. (note--after using Linux, you may notice extreme
    discomfort when using Microsoft. Discontinue use of Microsoft.)
    ******************************* W A R N I N G ! ********

  4. #4
    Join Date
    Aug 2001
    Location
    New Jersey, USA
    Posts
    1,940
    You shouldn't need to use different javascript files for different browsers. Check out brainjar, although the authors content is growing increasingly out of date, he handles the DOM extremely well, check out the way he sets up his javascript.

    Good luck.

  5. #5
    Join Date
    Oct 2002
    Location
    Houston, Texas
    Posts
    1,994
    I am having a hard time with this JS then...

    I just tested it and this works on IE:

    <html>
    <body>
    <span id="test"></span>
    <script>
    var font1 = document.createElement('font');
    font1.style.color="#0000FF";
    font1.appendChild(document.createTextNode("This is some text"));
    document.getElementById("test").appendChild(font1) ;
    </script>
    </body>
    </html>




    BUT this is my code from my chat program and it errors where I highlighted red:

    if (msge2[1] == 0) { // normal message
    var font1 = document.createElement('font');
    var bold = document.createElement('b');
    var font2 = document.createElement('font');
    var font3 = document.createElement('font');
    var br = document.createElement('br');
    if (msge2[0] == "<?=$_SESSION['username']?>") { font2.style.color='blue'; }
    else { font2.style.color='black'; }
    font3.style.fontSize=msge2[4]+'pt';
    font3.style.color=msge2[5];
    font3.style.fontWeight=msge2[6];
    font3.style.fontStyle=msge2[7];
    font3.style.fontDecoration=msge2[8];
    font2.appendChild(document.createTextNode(msge2[0]));
    bold.appendChild(document.createTextNode("[ "));
    bold.appendChild(font2);
    bold.appendChild(document.createTextNode(" ]"));
    font3.appendChild(document.createTextNode(msge2[3]));
    font1.appendChild(document.createTextNode(msge2[2]+' '));
    font1.appendChild(bold);
    font1.appendChild(document.createTextNode(': '));
    font1.appendChild(font3);
    messagecont = document.createElement('font');
    messagecont.appendChild(font1);
    messagecont.appendChild(br);
    -Billy

    "I am using Linux every day to up my productivity - so up yours!"

    ******** W A R N I N G ! *******************************
    Linux should not be used by those under the influence of Microsoft.
    May cause dizziness or vertigo. Consult your tech support before
    using Linux. (note--after using Linux, you may notice extreme
    discomfort when using Microsoft. Discontinue use of Microsoft.)
    ******************************* W A R N I N G ! ********

  6. #6
    Join Date
    Aug 2003
    Posts
    1,464
    font1.style.color="#0000FF"; != font2.style.color='blue';

    I may have opened the door, but you entered of your own free will
    Blog - Spam Trap -Blogrums

  7. #7
    Join Date
    Oct 2002
    Location
    Houston, Texas
    Posts
    1,994
    GOD DAMN IT !!!

    Now I am very pissed off...

    This works:

    <html>
    <body>
    <span id="test"></span>
    <script>
    var font1 = document.createElement('font');
    var bold = document.createElement('b');
    var font2 = document.createElement('font');
    var font3 = document.createElement('font');
    var br = document.createElement('br');
    if ("Billy" == "Billy") { font2.style.color='blue'; }
    else { font2.style.color='black'; }
    font3.style.fontSize='9pt';
    font3.style.color='black';
    font3.style.fontWeight='400';
    font3.style.fontStyle='normal';
    font3.style.fontDecoration='normal';
    font2.appendChild(document.createTextNode("10:12") );
    bold.appendChild(document.createTextNode("[ "));
    bold.appendChild(font2);
    bold.appendChild(document.createTextNode(" ]"));
    font3.appendChild(document.createTextNode("This is a test message..."));
    font1.appendChild(document.createTextNode('Billy '));
    font1.appendChild(bold);
    font1.appendChild(document.createTextNode(': '));
    font1.appendChild(font3);
    var messagecont = document.createElement('font');
    messagecont.appendChild(font1);
    messagecont.appendChild(br);
    document.getElementById("test").appendChild(messag econt);
    </script>
    </body>
    </html>

    on IE

    Now check this out - I have this very same code on a test site... BUT IT DOESNT WORK ON IE..

    What is going on here???

    test site links:

    Does not work (uses .color)
    http://forums.pl3x.net/chat/pl3xchat2/

    Works (uses .fontColor)
    http://forums.pl3x.net/chat/pl3xchat2_2/
    Last edited by Billy; 10-19-2005 at 11:24 AM.
    -Billy

    "I am using Linux every day to up my productivity - so up yours!"

    ******** W A R N I N G ! *******************************
    Linux should not be used by those under the influence of Microsoft.
    May cause dizziness or vertigo. Consult your tech support before
    using Linux. (note--after using Linux, you may notice extreme
    discomfort when using Microsoft. Discontinue use of Microsoft.)
    ******************************* W A R N I N G ! ********

  8. #8
    Join Date
    Oct 2002
    Location
    Houston, Texas
    Posts
    1,994
    Originally posted by
    font1.style.color="#0000FF"; != font2.style.color='blue';

    Well... IE, Firefox, Mozilla, Netscape, Opera, and Konqueror all interpret 'blue' the same as '#0000FF'...

    But now that you've mentioned it I will make sure to use hex codes on my next update to this project.

    But since this is not the problem, read my last post.. 'blue' works on my test page so its not the problem..

    I have given two links to my test server. One works, The other doesn't. And EVERYTHING is the EXACT same on both links except all the .color are .fontColor on the working one....
    -Billy

    "I am using Linux every day to up my productivity - so up yours!"

    ******** W A R N I N G ! *******************************
    Linux should not be used by those under the influence of Microsoft.
    May cause dizziness or vertigo. Consult your tech support before
    using Linux. (note--after using Linux, you may notice extreme
    discomfort when using Microsoft. Discontinue use of Microsoft.)
    ******************************* W A R N I N G ! ********

  9. #9
    Join Date
    Aug 2003
    Posts
    1,464
    Why don't you simplify things and let css do the work ?

    ie :-
    Code:
    <style type="text/css">
    
    .not_user{
    color:#ccc;
    }
    
    .is_user{
    color:#000;
    }
    
    .is_user span{
    color:#00f;
    font-weight:bold;
    }
    </style>
    
    <div class="not_user">time <span>[user_name]</span>: message</div>
    
    <div class="is_user">time <span>[user_name]</span>: message</div>
    I may have opened the door, but you entered of your own free will
    Blog - Spam Trap -Blogrums

  10. #10
    Join Date
    Oct 2002
    Location
    Houston, Texas
    Posts
    1,994
    hrm... That's not a bad idea at all. I'm going to give it a try. Thanks!

    Now what about positioning (relative: top & left), max/min widths/hieghts? It seems IE is rendering these numbers different ly than Firefox. How do I make two different stylesheets and have IE look at IE's, and Firefox's look at it's? OR even better, how can I make it all into one big stylesheet?

    Read a few posts up - I added an attachment (chat.zip) that has my main layout html page and the css stylesheet page. I want to make it look the exact same in all browsers... If I can't then I am going back to using tables.
    -Billy

    "I am using Linux every day to up my productivity - so up yours!"

    ******** W A R N I N G ! *******************************
    Linux should not be used by those under the influence of Microsoft.
    May cause dizziness or vertigo. Consult your tech support before
    using Linux. (note--after using Linux, you may notice extreme
    discomfort when using Microsoft. Discontinue use of Microsoft.)
    ******************************* W A R N I N G ! ********

  11. #11
    Join Date
    Aug 2003
    Posts
    1,464
    There's a couple of minor differences, but try this

    html
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>Pl3x.net Chat - DEMO</title>
      <link rel="stylesheet" type="text/css" href="styles.css">
     </head>
     <body>
       <div id="main">
        <div id="chatscreen">
         <div id="chattitle">
          &nbsp;&nbsp;&nbsp;Username: $_SESSION['username'] | Chatroom: $_SESSION['chatroom'] | Refresh In: <span id="refreshtimer">5</span>s
         </div>
         <div id="chatmsgs">
          <span style="color:aaa">20:57&nbsp;Server Notice:&nbsp;<em>Attempting to join chatroom "$_SESSION['chatroom']"... Please wait...</em></span><br />
          <span id="chatmessages"></span>
         </div>
        </div>
        <div id="rightholder">
         <div id="userlist">
          <b>User List:</b><br /><span id="users"></span>
         </div>
         <div id="fontcontrols">
          <!-- font controls go here -->
    	<p>content</p>
         </div>
        </div>
        <div id="msgarea">
         <input type="text" name="chatform" id="chatform" onchange="" />
         <input type="button" name="chatformbtn" id="chatformbtn" value="Send" onclick="" />
        </div>
       </div>
     </body>
    </html>
    css
    Code:
    body {
     margin:5px;
     font-size:9pt;
     font-family:verdana,arial,helvetica,sans-serif;
    }
    #main {
     width:750px;
     margin:0 auto;
    }
    
    #chatscreen {
    float:left;
    width:600px;
    height:475px;
    }
    
    #chattitle {
     height:25px;
     border:solid #000;
     border-width:1px 1px 0 1px;
     background:#ccc;
     text-align:left;
    }
    
    #chatmsgs {
     height:450px;
     border:1px solid #000;
     background:#f0f8ff;
     text-align:left;
     overflow:hidden;
    }
    
    #rightholder {
    float:right;
    width:148px;
    height:475px;
    border:solid #000;
    border-width:1px 1px 1px 0;
    }
    
    #userlist {
     height:340px;
     background-color:#ccc;
     overflow:scroll;
    }
    
    #fontcontrols {
     height:135px;
     border-top:1px solid #000;
     background-color:#ccc;
    }
    
    #msgarea {
     clear:both;
     line-height:25px;
     border:solid #000;
     border-width:0 1px 1px 1px;
     background-color:#ccc;
    }
    
    
    #chatform {
     width:660px
    }
    
    #chatformbtn {
     width:78px;
    }
    I may have opened the door, but you entered of your own free will
    Blog - Spam Trap -Blogrums

  12. #12
    Join Date
    Oct 2002
    Location
    Houston, Texas
    Posts
    1,994
    Thanks !

    Just one small piece on FYI.

    style="color:aaa"

    does not work on IE. At least the version I have here at work (Version: 6.0.2900.2180.xpsp_sp2_gdr.050301-1519). The text is still black until I put #aaa.

    Anyways, thanks again !
    -Billy

    "I am using Linux every day to up my productivity - so up yours!"

    ******** W A R N I N G ! *******************************
    Linux should not be used by those under the influence of Microsoft.
    May cause dizziness or vertigo. Consult your tech support before
    using Linux. (note--after using Linux, you may notice extreme
    discomfort when using Microsoft. Discontinue use of Microsoft.)
    ******************************* W A R N I N G ! ********

  13. #13
    Join Date
    Aug 2003
    Posts
    1,464
    Lol, damn typos

    I may have opened the door, but you entered of your own free will
    Blog - Spam Trap -Blogrums

Similar Threads

  1. Browser Detection and Redirection
    By graffiks in forum Javascript / AJAX / VBScript
    Replies: 1
    Last Post: 09-24-2009, 06:52 PM
  2. Browser detection
    By Solo600 in forum Javascript / AJAX / VBScript
    Replies: 7
    Last Post: 12-19-2002, 04:04 PM
  3. IE filter Detection
    By tetsou13 in forum Javascript / AJAX / VBScript
    Replies: 9
    Last Post: 01-25-2002, 01:11 PM
  4. Browser Detection
    By Jrzyboi00 in forum HTML / XHTML / XML
    Replies: 7
    Last Post: 07-01-2001, 02:59 PM
  5. collision detection
    By gasman in forum Flash / Multimedia
    Replies: 5
    Last Post: 05-02-2001, 07:00 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Powered by vBadvanced CMPS v4.1.1