Yet another Browser Detection Thread

**Billy** · 10-18-2005, 05:40 PM

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** · 10-18-2005, 05:45 PM

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** · 10-19-2005, 10:17 AM

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 ??

**element** · 10-19-2005, 10:19 AM

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.

**Billy** · 10-19-2005, 11:01 AM

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);

**¥åßßå** · 10-19-2005, 11:06 AM

font1.style.color="#0000FF"; != font2.style.color='blue';

¥

**Billy** · 10-19-2005, 11:08 AM

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/

**Billy** · 10-19-2005, 11:29 AM

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....

**¥åßßå** · 10-20-2005, 05:28 AM

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>

¥

**Billy** · 10-20-2005, 09:13 AM

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.

**¥åßßå** · 10-20-2005, 01:14 PM

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;
}

¥

**Billy** · 10-20-2005, 03:12 PM

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 ¥!

**¥åßßå** · 10-21-2005, 05:15 AM

Lol, damn typos

¥

» Search Forums

» Online Users: 70

» Site Navigation

» Domains For Sale

Thread: Yet another Browser Detection Thread

Thread Tools

Search Thread

Display

Yet another Browser Detection Thread

Similar Threads

Browser Detection and Redirection

Browser detection

IE filter Detection

Browser Detection

collision detection

Posting Permissions