Subscribe to How-To Geek

Login / Signup

Welcome to the How-To Geek Forums

We encourage you to register on our forums and post any questions you might have. The How-To Geeks monitor this forum and will respond to your question quickly.

How-To Geek Forums » Windows XP

Website Help. Viewing in different browsers!?

(5 posts)
  • Started 5 months ago by Barlow
  • Latest reply from The Geek
  • Topic Viewed 179 times


Barlow
Posts: 15

Hi guys.

I'm new to web building and am currently designing a website using XHTML and CSS. I was just wondering how I can get the site to look the same in Firefox and Internet Explorer as at the minute it looks slightly different when I view it in IE as I have been designing it using Firefox. Do I need to create a separate Style Sheet? If so, what is the code to enter to define which Stylesheet to use with each browser. I hope that makes sense.

If someone could explain this to me in pretty simple terms, as I said, i'm a newbie!

Thanks!

Posted 5 months ago #
 
nekizalb
nekizalb
Posts: 28

This script should help you out.

<script type="text/javascript">

var browser=navigator.appName;

if (browser == "Microsoft Internet Explorer") {
document.write("<link rel=/"stylesheet/" type=/"text//css/" href=/"#####.css/" //>");
}

else {
document.write("<link rel=/"stylesheet/" type=/"text//css/" href=/"$$$$$.css/" //>");
}

</script>

Replace the ##### with the source of your Internet Explorer CSS, and the $$$$$ with your other CSS. Then place this script within the <head></head> tags. If you put the CSS fiels in a subdirectory, then you need to escape every slash you use. For example, if you store them in a folder called CSS, you would normally write href="CSS/source.css" .You need to escape the slash (and the quotes, but i already did that for you) by putting another slash before it like this, href=/"CSS//source.css/" I know it looks wierd, but that's a javascript for you :P. Let me know if it works!

Posted 5 months ago #
 
thegeek
The Geek
Posts: 1610

Actually the proper way to do this is to use conditional comments in the page... for instance to specify an alternate stylesheet for IE6 you would use this conditional comment saying only process if less than IE 7:

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/ie-6-sucks.css" />
<![endif]-->

Sorry to hijack your answer, nekizalb =)

Posted 5 months ago #
 
nekizalb
nekizalb
Posts: 28

Conditional Comments? I've never heard of those. Must research.

No need to apologize. I'm glad there's an easier way than mine.

So you would put the firefox css first, then the overriding IE css in a conditional comment.

<link rel="stylesheet" type="text/css" href="Firefox.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="whatever-styles-need-to-be-overridden-to-make-IE-conform-to-the-rules-of-normality.css" />
<![endif]-->

Is that about right?

Posted 5 months ago #
 
thegeek
The Geek
Posts: 1610

Yep. You can even have one stylesheet for good browsers, another for IE7 and another for IE6.

Although realistically IE7 is not all that terrible in rendering... just some weird margin/padding issues still.

Posted 5 months ago #
 

RSS feed for this topic

Reply

You must log in to post.

Sponsored Links
Getting Started
About How-To Geek
What Is That Process?
svchost.exe
jusched.exe
dwm.exe
ctfmon.exe
wmpnetwk.exe 		wmpnscfg.exe
rundll32.exe
wfcrun32.exe
Ipoint.exe
Itype.exe 		Wfica32.exe
Mobsync.exe
Cmd.exe
Dpupdchk.exe Adobe_Updater.exe

Copyright © 2006-2008 HowToGeek.com. All Rights Reserved.