[Solved]CSS with IE and Firefox

tomwbro · 08-28-2008, 06:04 PM

Hi! I've been messing around with CSS and my html pages display properly in IE but not in Firefox. I'm not talking about subtle differences, either. Firefox doesn't seem to know a style sheet even exists; there is no formatting at all. It's probably something dumb, but I can't figure it out.

**jamiemac2005** · 08-28-2008, 06:10 PM

Hey, could you post the code to your entire webpage(so we can see exactly what's going on in the page)...

Cheers,
Jamey

tomwbro · 08-29-2008, 09:44 AM

Hi Jamey!

These are the basic files I'm using to do the testing:

mystyles.css

Code:

H2 {font: bold 18pt Verdana, Arial, Helvetica; color: Red}
H3 {font: bold 16pt Verdana, Arial, Helvetica; color: Navy}

test2.html

HTML Code:

<html>

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

<title>My Home Page</title>

<body>
<h2>This text should be red.</h2>
<h3>This text should be navy.</h3>
</body>
</html>

*Note that in my code I have "href=C:/css/mystyles.css" but when I posted it here using the <>[html] feature it removed the "C:/". It won't work for me (in IE) without having the "C:/" in the code. It won't work either way in Firefox.

The link in the <head> section references the directory where the .css file is saved. I tried saving the .html and the .css files in the same directory to see if that would make a difference, but it didn't. The above code works in IE but not Firefox. I'm using IE7 and Firefox 3.0.1 with Notepad++ as my editor. I appreciate the help.

**jamiemac2005** · 08-29-2008, 04:14 PM

You should be using relative links in hrefs etc. If you don't the user's pc will be looked for, wheres the .html file stored? (the full path because we can work it out from there)...

Cheers,
Jamey

tomwbro · 08-29-2008, 08:30 PM

What do you mean by relative link?

The .css file is stored in:
C:/css/mystyles.css

The .html file is stored in:
C:/webpage/test2.html

Thanks for your help.

**jamiemac2005** · 08-30-2008, 06:20 AM

Okay, you have direct file links which are anything that starts with a drive letter or network drive path ("C:/")... An absolute reference would be one with the website's main url at the start of it ("http://www.blah.com/theUrl").

The problem with this is that when you upload it C:/ is not the same (because it's on someone elses pc[most browsers don't allow using a C:/ link so you get the problem you're having])...

You have to use a relative url (The url is relative to the page it's on)...

So the link for the .css file would become "../css/mystyles.css" (The ".." stands for up a directory). Then when you upload them you have to ensure it's within the same directorys on the web.

Here's a tutorial on the subject: http://www.webreference.com/html/tutorial2/3.html

Cheers,
Jamey

tomwbro · 08-30-2008, 10:15 AM

Well, how 'bout that? You learn something new everyday. Thanks, Jamey. You're a genius.

08-28-2008, 06:04 PM	#1 (permalink)
tomwbro Registered User Join Date: May 2008 Posts: 13 OS: XP	[Solved]CSS with IE and Firefox Hi! I've been messing around with CSS and my html pages display properly in IE but not in Firefox. I'm not talking about subtle differences, either. Firefox doesn't seem to know a style sheet even exists; there is no formatting at all. It's probably something dumb, but I can't figure it out.

08-28-2008, 06:10 PM	#2 (permalink)
jamiemac2005 Design Team Member Join Date: Jul 2007 Location: Northampton, UK Posts: 1,090 OS: Win Vista Home Premium & Ubuntu Hardy(8.04)	Re: CSS with IE and Firefox Hey, could you post the code to your entire webpage(so we can see exactly what's going on in the page)... Cheers, Jamey __________________ Help fight cancer. < I just started =]

08-29-2008, 09:44 AM	#3 (permalink)
tomwbro Registered User Join Date: May 2008 Posts: 13 OS: XP	Re: CSS with IE and Firefox Hi Jamey! These are the basic files I'm using to do the testing: mystyles.css Code: H2 {font: bold 18pt Verdana, Arial, Helvetica; color: Red} H3 {font: bold 16pt Verdana, Arial, Helvetica; color: Navy} test2.html HTML Code: <html> <head> <link href="css/mystyles.css" rel="stylesheet" type="text/css" /> </head> <title>My Home Page</title> <body> <h2>This text should be red.</h2> <h3>This text should be navy.</h3> </body> </html> *Note that in my code I have "href=C:/css/mystyles.css" but when I posted it here using the <>[html] feature it removed the "C:/". It won't work for me (in IE) without having the "C:/" in the code. It won't work either way in Firefox. The link in the <head> section references the directory where the .css file is saved. I tried saving the .html and the .css files in the same directory to see if that would make a difference, but it didn't. The above code works in IE but not Firefox. I'm using IE7 and Firefox 3.0.1 with Notepad++ as my editor. I appreciate the help.

08-29-2008, 04:14 PM	#4 (permalink)
jamiemac2005 Design Team Member Join Date: Jul 2007 Location: Northampton, UK Posts: 1,090 OS: Win Vista Home Premium & Ubuntu Hardy(8.04)	Re: CSS with IE and Firefox You should be using relative links in hrefs etc. If you don't the user's pc will be looked for, wheres the .html file stored? (the full path because we can work it out from there)... Cheers, Jamey __________________ Help fight cancer. < I just started =]

08-29-2008, 08:30 PM	#5 (permalink)
tomwbro Registered User Join Date: May 2008 Posts: 13 OS: XP	Re: CSS with IE and Firefox What do you mean by relative link? The .css file is stored in: C:/css/mystyles.css The .html file is stored in: C:/webpage/test2.html Thanks for your help.

08-30-2008, 06:20 AM	#6 (permalink)
jamiemac2005 Design Team Member Join Date: Jul 2007 Location: Northampton, UK Posts: 1,090 OS: Win Vista Home Premium & Ubuntu Hardy(8.04)	Re: CSS with IE and Firefox Okay, you have direct file links which are anything that starts with a drive letter or network drive path ("C:/")... An absolute reference would be one with the website's main url at the start of it ("http://www.blah.com/theUrl"). The problem with this is that when you upload it C:/ is not the same (because it's on someone elses pc[most browsers don't allow using a C:/ link so you get the problem you're having])... You have to use a relative url (The url is relative to the page it's on)... So the link for the .css file would become "../css/mystyles.css" (The ".." stands for up a directory). Then when you upload them you have to ensure it's within the same directorys on the web. Here's a tutorial on the subject: http://www.webreference.com/html/tutorial2/3.html Cheers, Jamey __________________ Help fight cancer. < I just started =]

08-30-2008, 10:15 AM	#7 (permalink)
tomwbro Registered User Join Date: May 2008 Posts: 13 OS: XP	Re: CSS with IE and Firefox Well, how 'bout that? You learn something new everyday. Thanks, Jamey. You're a genius.