CSS Coding not working on Firefox/Google but is working on IE (go figure)

Question

4.00/5 (2 votes)

See more:

View website: www.petalumaadobe.com[^] on I/E and on Google/Firefox to see what I mean.

Please help! I am a novice and trying to help out a park.
It says I have solved this issue, but I haven't. The code works on I/E but not on any other browser. I don't know how to fix this.

CSS

body  {background-color:#dfca93; font-family: Verdana, Tahoma, Arial, sans-serif; font-size:1em; color:#453823; margin: 0px 150px 0px 50px;}
		   
h1, h4 {letter-spacing:-1px; }	  	
h1 {font-size:200%; font-family: "Viner Hand ITC", Verdana, Tahoma, Arial, sans-serif; padding-left:115px; padding-top:10px; padding-bottom:45px; background-image:url(images/logo.jpg); background-repeat:no-repeat; 
background-position:center left; }
h2  {font-size:140%; text-transform:uppercase; letter-spacing:+2px; color:#333399; background-color:#dfca93; border-bottom: 2px solid #382E1C;}			
h3  {font-size:120%; letter-spacing: 1px; }	
h4  {font-size:100%; font-style:italic; letter-spacing: +1px;}

p {font-size:90%; line-height:150%; background-color:#dfca93; color:#2C2416; }
p.indent {text-indent:25px;}
p.bold {font-weight: bold; }
p.center {text-align: center;}

.years {text-transform:uppercase; font-weight:bold; font-size: 150%; margin-bottom:10px; padding: 10px; background-color: #FFF8DC; border-color:#453823; border-width: 2px; border-style:solid;  }

.next {font-style:normal; font-weight: bold; font-size: 120%; padding: 8px; background-color: #FFF8DC; border-color:#453823; border-width:2px; border-style:solid; }

.date {font-weight: bold; font-size: 120%; line-height: 100%; }

.event {color:#333399; font-size: 120%; }

table {border: solid #453823; margin:10px; border-collapse:collapse;background-color:#C2BA63; text-align:center;}

td, th {border:thin solid #453823; padding:6px; border-spacing:0px; }
th {background-color:#FFF8DC;}

.darkrow {background-color:#C3C3E5;}

caption {padding-bottom:6px; text-align:center;}

#form th {text-align:right; vertical-align:top; font-weight:normal; padding:4px 12px 4px 4px; background-color:#FFF8DC;}
#form td {text-align:left; vertical-align:top; font-weight:bold; padding:4px 4px 4px 12px;}

#address {border-color:#453823;
border-width:2px;
border-style:solid;
padding: 5px; 
margin:30px 100px;
text-align:center;
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size:100%; color:#333399; font-weight:bold;
background-color:#FFF8DC; }

a {font-weight:bold; }
a:link {color:#333399; background-color:#dfca93;}
a:visited {color:#443266; background-color:#dfca93;}
a:hover {color:#8C489F; background-color:#dfca93;}
a:active {color:#8C489F; background-color:#dfca93;}

#bar{width:250px; float:left; }

#nav a {border-width: thin; border-style:solid; 
font-size: 15px; 
background-color: #333399; 
text-decoration:none; 
text-align: center; 
padding:8px; 
margin-right: 30px;
margin-bottom: 50px; 
margin-top: 50px; 
color:#C3C3E5; } 

#nav a:link {background-color:#333399; }
#nav a:visited {background-color:#443266;}
#nav a:hover {background-color:#8C489F;}

#content {margin-left:280px; line-height:125%; }
#footer {margin-left:250px; line-height: 100%; }

#content-2 {width:225px; float:right; margin-bottom: 150px; margin-top:50px;}
#content-3 {width:225px; margin-left:300px; margin-bottom: 150px; margin-top: 50px; }

#container {width:780px; margin-left:auto; margin-right:auto;}

Posted 13-Jun-12 7:21am

SMS1067

Updated 13-Jun-12 10:41am

v3

Add a Solution

Comments

R. Giskard Reventlov 13-Jun-12 14:41pm

Try to be more specific as to what is not working; tie it down to some specific CSS. BTW, nice park! Consider changing the buttons to all be the same width.

lewax00 13-Jun-12 17:37pm

Taking a quick look myself, I think "not working" sums it up, none of the CSS is being applied. Something odd about how Firefox (and I assume Chrome) is interpreting the file contents.

SMS1067 13-Jun-12 17:59pm

Thank you... I'll try to resave it

SMS1067 13-Jun-12 18:28pm

The wierd thing I just noticed is the CSS is being applied to the subpages, just not the main one. Great. What did I do to the coding?

SMS1067 13-Jun-12 16:42pm

I'm not sure what you mean. I just know that it isn't working. I haven't changed any of the CSS coding, but last week it started showing up on other browsers in the ugly way. Now my comment is marked that I solved it and I haven't. I don't know what specific CSS isn't working, it just is ugly. :(

SMS1067 13-Jun-12 18:39pm

WOO HOOO I fixed it, thank you SO MUCH!!!!

Tim Corey 13-Jun-12 22:05pm

Since you solved the information, please do two things for us: first, mark the solution as accepted and vote for it if it helped. Second, please tell us what you did to get it to work so that the next person that has this issue can learn from you. Thanks.

2 solutions

Solution 3

I am not sure what I did, but I resaved the notepad file as a UTF-8 instead of ANSI or unicode. And, it seems to be working now. The host company couldn't find anything wrong, so it may have just been a glitch in cyper world. Thank you so much for all of your assistance.

Posted 14-Jun-12 12:41pm

SMS1067

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

lewax00 · Accepted Answer · 2012-06-13T10:58:00

Solution 2

For some reason, if I open the css file in Firefox, it comes up as a bunch of unicode characters (looks mostly like Chinese). I think something's wrong with the encoding of the file (like it thinks it's UTF-16 when it's actually UTF-8 or something like that). You might want to try re-saving it with a different editor and see what happens.

Posted 13-Jun-12 10:58am

lewax00