...

View Full Version : how can i use a differ CSS for IE and NS?



manga101
10-02-2002, 09:15 PM
man!!

i spent alot of time reading and stuff and create my site..its looks cool and all..using CSS ..

but when i launch NS 4.7 to test.. my page and site is whack!!!

especially the form!! cus i use the input style and select style for colors..

anyone know how to code so that i can use a differ CSS for NS?

maybe like .. IF IE use this IF NS use crap..

Bosko
10-02-2002, 09:20 PM
Make that:
IF IE then you are already using crap ;)

MCookie
10-02-2002, 09:24 PM
Make a simple stylesheet for NN and call it like this:

<link rel="stylesheet" href="simple.css" type="text/css">

Then make another stylesheet with additional styles and/or overriding simple.css and call it with the @import rule which NN doesn't understand:

<style type="text/css" media="all">@import "style.css";</style>

realisis
10-03-2002, 06:17 AM
do ALL other browsers understand @ import? I'm not sure about that...

At any rate, you can also use the <nolayer> tag to exclude NS4.


<link rel="stylesheet" href="simpleNS4.css" type="text/css">

<nolayer>
<link rel="stylesheet" href="simple.css" type="text/css">
</nolayer>

In this case all browsers will see the content of the first external style (which is intended for NS4), but any declarations inside will be "corrected" when they download the second style. Whereas NS4 will see only the first style.

The same technique works if using local styles. See this little example re: the legendary NS4 "font-pixel" bug.

<STYLE>
<!--
body { font: 400 14px verdana; }
-->
</STYLE><nolayer>
<STYLE>
<!--
body { font-size: 13px; }
-->
</STYLE></nolayer>

(edit: just added a missing tag...)

manga101
10-03-2002, 08:06 PM
nice! guys.. i didnt know about the nolayer tag... must keep on reading.hehe...

webmarkart
10-03-2002, 08:28 PM
If you know a server side language like asp, you can determine the browser and link to the appropriate css. This requires you to maintain two separate css but it works.

manga101
10-03-2002, 09:03 PM
lol.. u read my mind webmarkart... yup doin that now..

i search around and found this tutorial and sample..

hope this help other noobs like me..:

===== ( JavaScript solution ) =====

This example shows one method of detecting a user's browser and link
the current document to a corresponding style sheet. This is
implemented in two parts: the main script which is written as a
separate .js file, and a calling script written within the HEAD of each
page that will link to the style sheets.

STEP 1: Copy this code and save it as a separate file, for example, as
css.js

<!--
if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt
(navigator.appVersion)>= 4 )) {
document.write('<link rel="stylesheet" type="text/css"
href="ie45.css">')}
else {
if (navigator.appName == "Netscape"){
if (parseInt(navigator.appVersion)>= 5 ){
document.write('<link rel="stylesheet" type="text/css"
href="ns6.css">')}
else {
document.write('<link rel="stylesheet" type="text/css"
href="ns4.css">')}
}
else {
document.write('<link rel="stylesheet" type="text/css"
href="default.css">')}
}

//-->

Note that the above example assumes that you have four style sheets:
one for IE 4.0 and later, one for Netscape 5.0 and later, one for
Netsc
ape versions less than 5, and one for the rest. Make sure that
each <LINK href= ... > in the script points to the proper path and
filename of your style sheets.

STEP 2: Copy this code into the HEAD of each HTML document that you
intend to link to the stylesheets.

<script language="JavaScript" src="css.js"></script>

If you change the name and/or location of the main .js file in Step 1,
make sure that the <script src= ... > in Step 2 above references the
correct path and filename of the .js file, or the script will not be
called and thus not function as intended.

with IE4+: another option as below;
gLNGflag is a global variable to be set "language code" in other
function.
--------------< source code sample >------------
<script LANGUAGE="JavaScript">
<!--

if (IECheck( 5, "../index.htm" )){
LNGCheck( "zz", "", "", "" );
}
var lang;
switch(gLNGflag){
case "ja":
lang = "jp";
break;
case "zt":
lang = "ct";
break;
default:
lang = "us";
}
var css = "<link REL='stylesheet' TYPE='text/css' HREF='doc/vb7" + lang
+".css'>";
var sc1 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7whd" + lang
+ ".js'></scr" + "ipt>";
var sc2 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7chd" + lang
+ ".js'></scr" + "ipt>";
var sc3 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7ihd" + lang
+ ".js'></scr" + "ipt>";
var sc4 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7vhd" + lang
+ ".js'></scr" + "ipt>";
var sc5 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7ltool" + lang
+ ".js'></scr" + "ipt>";
var sc6 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7wtool" + lang
+ ".js'></scr" + "ipt>";
var sc7 = "<scr" + "ipt LANGUAGE='JavaScript' SRC='doc/vb7main" + lang
+ ".js'></scr" + "ipt>";
document.write(css);
document.write(sc1);
document.write(sc2);
document.write(sc3);
document.write(sc4);
document.write(sc5);
document.write(sc6);
document.write(sc7);
// -->
</script>

redhead
10-03-2002, 09:15 PM
heres a very simple way to do this that i dug out of one of my old posts, using conditional comments:

<!--[if gte IE 5]>
<link rel="stylesheet" src="ie.css" type="text/css">
<![endif]-->

<![if lt IE 5]>
<link rel="stylesheet" src="other.css" type="text/css">
<![endif]>

simple... and works without huge amounts of code, just make ie.css for IE and other.css for others.

hope this helps :thumbsup:

manga101
10-03-2002, 09:48 PM
Originally posted by redhead
heres a very simple way to do this that i dug out of one of my old posts, using conditional comments:

<!--[if gte IE 5]>
<link rel="stylesheet" src="ie.css" type="text/css">
<![endif]-->

<![if lt IE 5]>
<link rel="stylesheet" src="other.css" type="text/css">
<![endif]>

simple... and works without huge amounts of code, just make ie.css for IE and other.css for others.

hope this helps :thumbsup:


your sooo right lol.. less headache on editing...

but what is the "gte" and "lt"? in ur condition??

do i just cut and paste and put in the HEAD tag?

redhead
10-03-2002, 10:10 PM
yeah, copy and paste it into the <head> section. the "gte" stands for "greater than or equal to" and the "lt" stands for "less than".

heres a nifty tutorial on conditional comments:

http://www.javascriptkit.com/howto/cc.shtml

:thumbsup:

realisis
10-04-2002, 07:16 PM
While I also use conditional comments where practical, and Redhead's suggestion is a good one, remember that the technique presumably excludes IE4 as well as NS4 and other browsers. If your intent was to exclude *only* NS4 the <nolayer> is a better option.

...

And Manga, I'm going to save you about 6 months worth of headaches and head-scratching:

If you use Javascript to fetch an external file via the document.write() method, the technique doesn't work properly on NS4.7. Here's why:

NS4.7 has another infamous bug whereby any external file (whether style or script) fetched via doc.write IS NOT LOADED THE FIRST TIME a webpage is loaded. Any subsequent reloads to the page *will* fetch the file though.

This is maddening because at home you tend to reload the same webpage over and over again when testing it or writing to it. Because of this, any problems you see disappear quickly on reload, you end up thinking the technique works fine, and you leave it as is. The bug is extremely difficult to isolate because it keeps coming and going.

Your visitors though, might only load the page once. They'll never see the stylesheet you intended to fetch.

If however you use a server-side technique (as webmarket suggested), the bug is not invoked, beacuse the page is assembled before the browser sees it.

...

I should point out that MCookie's original suggestion regarding @import has the advantage of being compliant, and will therefore validate, whereas <nolayer> doesn't validate (if you care about that sort of thing).

But does IE4 recognize @import? Anybody know?

joh6nn
10-05-2002, 12:02 AM
http://www.evolt.org/article/Assigning_browser_specific_styles/17/14732/index.html

manga101
10-05-2002, 03:57 AM
wow..i have learn alot from you guys... thanks all!! u all rock!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum