I wan tmy page not only work on Ie also firefox the following code is not working. what is wrong? browser ="Microsoft Internet Explorer"; firefox="Mozillia Firefox"; if(browser==Microsoft Internet Explorer) document.write('<link href="leftIE.css" rel="stylesheet" type="text/css">'); else { document.write('<link href="leftmoz.css" rel="stylesheet" type="text/css">'); }
Browser sniffing is a particularly Bad Idea. First, what if the user has javascript disabled? Second, there is no sane reason for browser specific stylesheets. Become competent in authoring css, and you'll see the truth of statement two. cheers, gary
You shouldn't be doing that like Gary said. Also; if(browser==Microsoft Internet Explorer) is the wrong statement to use, but can't remember what it is.
HI thank you all the nice reply, but Gary only tell me what i shouldn't do , not what should I do. beside I change the code to <script language="JavaScript" type=text/javascript> <!-- var browser=navigator.appName if (browserName==â€Microsoft Internet Explorerâ€) { document.write(’<link rel="stylesheet" type="text/css" href="leftIE.css" />’) } else { document.write(’<link rel="stylesheet" href="leftmoz.css" type="text/css">’) } --> </script> Code (markup): 1)can't reach my css.files but if I have this page on top of my page, <link rel="stylesheet" type="text/css" href="leftIE.css" /> I can get reach with my css, why? 2) if browser is java script disable? without java script, how can we write some sample Web site? I don't get it! Thank you
No, I wasn't just negative. I said for you to become competent in authoring css, too. Browser sniffing is a really stupid idea, and I didn't want you to be seduced down that path. There is no upside and there are myriad gotchas with big teeth. cheers, gary
Exactly, don't do it. If you're struggling with stylesheet links, you really need to do a few more tutorials before you start worrying about browser support.
Hi Amy, As the others have said, using browser sniffing is a bad idea because various browsers can not only mask themselves as IE, but can also identify themselves as IE as well. You'll also run into the problem of browsers not having JavaScript enabled (or worse yet, not even supported), and there's also the issues regarding scripting and hand-held devices like PDAs and Web enabled cell phones. If you're having trouble trying to create a layout that works equally well in IE, FireFox, Opera and Konqueror/Safari, feel free to post your HTML and CSS code here and I'll gladly help you fix it up so it works .
>If you're struggling with stylesheet links, you really need to do a few more tutorials before you start worrying about browser support give me some useful link >If you're having trouble trying to create a layout that works equally well in IE, FireFox, Opera and Konqueror/Safari, feel free to post your HTML and CSS code here and I'll gladly help you fix it up so it works sound nice for me left.html <html> <head> </head> <script language="JavaScript" type=text/javascript> <!-- var browser=navigator.appName if (browserName==â€Microsoft Internet Explorerâ€) { document.write(’<link rel="stylesheet" type="text/css" href="leftIE.css" />’) } else { document.write(’<link rel="stylesheet" href="leftmoz.css" type="text/css">’) } --> </script> <body leftmargin="0" topmargin="0" marginleft="0" margintop="0" text="white"> <table> <tr> <td align="center"> <a href="SKL.doc" target="_top" class="menulink"><span>About Us</span></a></td> </tr> <tr> <td align="right" > <a href="Login.jsp" target="mainFrame" class="menulink"><span>Login to database</span></a></td> </tr> <tr> <td align="right" > <a href="Register.jsp" target="mainFrame" class="menulink"><span> Registration</span></a></td> </tr> <tr> <td align="left" > <a href="http://google/help/"class="menulink" target="_top"><span ID=S2>help</span></a></td> </tr> <tr> <td align="left" > <a href="http://google/search/"class="menulink" target="_top"><span ID=S2>google</span></a></td> </tr> </tr> </body> </html> Code (markup): leftmoz.css body { background: url('images/left3.jpg') no-repeat; height: 270px; width: 350px; } a.menulink { text-decoration: none; font-family:Verdana; font-size:16px; width: 200px; height: 10px; } A.menulink:hover { text-decoration: none; font-size:16px; color: #DAA520; } span{ font-size: 11pt; font-family: Arial Black; color: white; } #S2{ width: 200px; height: 20px; font-size: 11pt; font-family: Arial Black; color: gold; } Code (markup): body { background: url('images/left3.jpg') no-repeat; height: 270px; width: 350px; } a.menulink { text-decoration: none; font-family:Verdana; font-size:16px; width: 200px; height: 10px; } A.menulink:hover { text-decoration: none; font-size:16px; color: #DAA520; } span{ width: 200px; height: 20px; font-size: 11pt; font-family: Arial Black; color: blue; Filter: mask(color=#000000)shadow(color=white,direction=120)chroma(color=#000000) } #S2{ width: 200px; height: 20px; font-size: 11pt; font-family: Arial Black; color: blue; Filter: mask(color=#000000) shadow(color=gold, direction=120)chroma(color=#000000) } Code (markup):
Well, I can see a couple readily apparent problems here. First thing first, you have no DOCTYPE declaration at the top of your HTML file. This is going to force every browser into quirks (legacy) mode, which basically means that you can kiss cross-browser CSS support goodbye. Fortunatley, it's very easy to fix. Since you're apparently working with existing code, I'm going to recommend HTML 4.01 Transitional rather than Strict or even XHTML. This will help get all the major browsers on the same page and in standards mode. You can easily do this by putting the following code at the top of your Web page (above the openng HTML tag): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Code (markup): You're also going to need a title for your page, and a character encoding to go with it. Make sure that the character encoding you put into the page is the same one you save the file as, or else you may have some problems when the page is downloaded to a browser. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title of Web Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> </body> </html> Code (markup): I left the body empty for the time being (I included it for reference only), so I could concentrate on linking an external stylesheet to the page using regular HTML. You can use the <link> tag to literally link a stylesheet to your page (in fact, every page), which will make maintenance a lot easier. It looks like this: <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"> Code (markup): I know it probably looks confusing, but what it does is states that this particular link is referencing a stylesheet, declaring its type (text/css), then providing a link (stylesheet.css) and stating which media (in this case traditional browsers, like IE and Mozilla) should use it. This goes in the HEAD section, directly beneath the character encoding. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title of Web Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"> </head> <body> </body> </html> Code (markup): Ok, that should take care of everything in the head section. You'll notice there's no need for the script (which would also go in the head section if you were to use it; it would also have type="text/javascript" instead of language="JavaScript"); CSS is going to take care of the cross-browser presentation. But before you can style the page, you're going to need some content for it. In your case, you have what appears to be a list of links. Ah, I see. It's a menu. Rather than using tables for that (which are a PITA to code anyway), why not use a simple unordered list? <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> Code (markup): Of course, since this list is a menu, you might want to mark it up that way to serve as a reminder. Since this menu won't be appearing anywhere else on the page, a unique way to identify it will come in handy. In this case, the ID attribute (multiple IDs can be used on a page, but each one must have a unique value; for example "menu1" and "menu2" are fine, but "menu1" and "menu1" are not- if you want "menu1" to be used more than once, a class should be used instead). Since it's a menu you're identifying, I think the value of "menu" would be appropriate here. <ul [color=red][b]id="menu"[/b][/color]> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> Code (markup): Which gets us this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title of Web Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"> </head> <body> <ul id="menu"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </body> </html> Code (markup): I'm going to go ahead and fill in those links for you so you have a working example you can use rather than just standard example code, ok? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title of Web Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen"> </head> <body> <ul id="menu"> <li><a href="SKL.doc" target="_top">About Us</a></li> <li><a href="Login.jsp" target="mainFrame">Login to database</a></li> <li><a href="Register.jsp" target="mainFrame">Registration</a></li> <li><a href="http://www.google.com/help/" target="_top">Help</a></li> <li><a href="http://www.google.com/search/" target="_top">Google</a></li> </ul> </body> </html> Code (markup): Ok. Now that you have a real working example, try going to http://validator.w3.org to see that it validates. (I suggest using the direct input option at this point. Just copy and paste the code into the text area.) You'll notice that the code does indeed validate as HTML 4.01 Transitional, which is the first step in cross-browser compatibility. Now let's move on to the stylesheet, shall we? I included explainations inside the CSS so you can follow along (since this post is getting to be rather long in the tooth as it is). * { /* this is the universal selector; it's being used to remove the margins and padding from everything, so you no longer have to worry about browser defaults */ margin: 0; padding: 0; } body { background: #FFF url('images/left3.jpg') no-repeat; /* the white serves as a default background in case the image doesn't load */ color: #000; /* you can change this later so it contrasts nicely with your default background color */ font: 16px/1.2 Verdana, Arial, Helvetica, sans-serif; } #menu { border: 1px solid #000; /* for demonstration purposes only */ list-style: none; /* removes the bullet markers from the list items */ margin: 10px 0 0 10px; /* top and left margins of 10px for demonstration purposes */ width: 348px; /* have to subtract one pixel from the left and right side to accomodate for the border */ } #menu a { background: #0F0; /* placeholder */ color: #00F; /* placeholder */ display: block; /* lets the link take up all the available space */ padding-bottom: 2px; /* helps make the link text easier to read */ text-decoration: none; /* removes the underline in ALL states, since it's applied to A instead of a:link */ text-indent: 10px; /* if you just need to indent the text, then use this instead of padding: left; */ width: 100%; /* fixes IE's hasLayout bug so the link takes up all the space */ } #menu a:hover { background: #FFF; /* the CSS validator will return a warning if you declare a color without also declaring a background color */ color: #DAA520; } Code (markup): I know it's not exactly 100% what you want (you've probably also noticed that the <span> tags are missing from the HTML), however, this post's purpose is to demonstrate and teach. There are times when Internet Explorer just won't play nicely (usually it'll be version 6). There are two ways to get around this. The first is to use what's called the Star HTML hack. It looks like this, and goes inside your stylesheet: * html [i]selector[/i] { /* IE 5 and 6 only rules here */ } Code (markup): There's a hack that usualy goes with this to hide the "special" styles from IE-Mac, but that browser's been dead for three years now, so I'm not going to include it. (Note: While writing this post, I thought about using the * html hack to hide an import directive which would contain a separate IE-only stylesheet - if it passes muster with the W3C validator, I'll let you know, since the next option won't be necessary.) The other option is to use conditional comments. These look like regular HTML comments, except they contain some IE-only code that will hide whatever is inside them from other browsers (you can even "jury-rig" conditional comments to hide code from IE, while letting the other browsers see it just fine - what fun!) Here's an example of the most common conditional comment you'll see (and probably use): <!--[if lt IE 7]> <![endif]--> Code (markup): You start off by writing a normal HTML comment, then you add this: [if lt IE 7] This tells the browser that it should ignore it unless it's a.) Internet Explorer, and b.) older than version 7. Meaning IE 5, 5.5 and 6 would be able to see it (since conditonal comments are supported only by IE 5 and higher). If you want to target all versions of Internet Explorer, you would just type this instead: [if IE] And of course, to close the comment, you type this, before closing the regular comment. <![endif] In the case of proprietary code (like your filters), you'll have to use conditional comments to hide them from the CSS Validator (like I said, unless importing a stylesheet via the * html hack works; I'll get back to you after I test it myself). For everything else, if you just need to tweak or adjust something for IE, you should be able to get by with the * html hack (which does not work in IE 7, since the browser supports many of the standards that were noticibly absent from IE 5, 5.5 and 6). [Edit: I forgot to mention that for your filters, you can simply give your last two links a unique ID (one ID for each link) and reference them that way.] If you need any further help, don't hesitate to ask, ok?
Hi Dan, Thank you for your detail teaching, I using your suggestion, but the text fornt -size still not the same on both IE and firefox thank you
can you provide a link to the site you're working on? I can check it in Internet Explorer 5, 5.5, 6, 7; Netscape 6.2, 7, 8.1; FireFox 1.0.3, K-Meleon and Opera 9.1 (locally) for you. I might also be able to uncover some other bugs which may be affecting the text size issue as well.
Hi Dan, Something else need to be take, so late to reply <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title of Web Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="left.css" media="screen"> </head> <body> <ul id="menu"> <li><a href="my.doc" target="_top">About Us</a></li> <li><a href="Login.jsp" target="mainFrame">Login to database</a></li> <li><a href="Register.jsp" target="mainFrame">Registration</a></li> <li><a href="http://www.ncbi.nlm.nih.gov/blast/"class="menulink" target="_top">BLAST</a></li> <li><a href="http://apollo.lanl.gov/search/"class="menulink" target="_top">ISD</a></li> </ul> </body> </html> Code (markup): * { /* this is the universal selector; it's being used to remove the margins and padding from everything, so you no longer have to worry about browser defaults */ margin: 0; padding: 0; } body { background: #FFF url('images/left3.jpg') no-repeat; /* the white serves as a default background in case the image doesn't load */ } #menu { list-style: none; /* removes the bullet markers from the list items */ margin: 10px 0 0 20px; /* top and left margins of 10px for demonstration purposes */ width: 348px; /* have to subtract one pixel from the left and right side to accomodate for the border */ font-family: Verdana; font-size: 16px; } #menu a { color: #00F; /* placeholder */ display: block; /* lets the link take up all the available space */ padding-bottom: 2px; /* helps make the link text easier to read */ text-decoration: none; /* removes the underline in ALL states, since it's applied to A instead of a:link */ text-indent: 10px; /* if you just need to indent the text, then use this instead of padding: left; */ width: 100%; /* fixes IE's hasLayout bug so the link takes up all the space */ } #menu a:hover { background: #FFF; /* the CSS validator will return a warning if you declare a color without also declaring a background color */ color: #DAA520; } Code (markup):
<html> <head> <title>Please Login</title> <meta http-equiv="Refresh" content="2; URL=/test/Login.jsp"> <style> <!-- .position{ position:relative; left:150px; } --> </style> </head> <body leftmargin="0" topmargin="0" marginleft="0" margintop="0" WIDTH="600" height="310" > <p align="center"> </p> <div class="position"> <div style="position:relative; font-size:40px; z-index:1;" > <img src="../images/lock.jpg" border="0" style="Filter: Alpha(Opacity=80 -moz-opacity:.50, FinishOpacity=0, Style=2, StartX=2, StartY=5, FinishX=0, FinishY=0)" ></div> <div style="position:relative; top:-50; left:5; color:red; font-size:25px; z-index:2">Sorry, you need to Login !</div> </div> </body> </html>
What exactly is this page trying to do? (Sorry, but my computer's been having problems lately, so I'm trying not to tax the system, especially when I'm working.)