Please help! css not working in firefox or ie but works in chrome

Hello, I am trying to make my website work in firefox and IE. It looks great in chrome but all the styles fail in firefox and IE. I am very much a beginner so please bear with me.

Here is the CSS coding

body { background: #FFFFFF; color: #666666; background-image: url(background.jpg); Background-position: top left; background-repeat: repeat-x; font: normal normal 12px Helvetica, sans-serif }

header {background: #000033; color: #FFFFFF; margin-bottom:0; background-image: url(sunset.jpg); Background-position: right; background-repeat: no-repeat; padding:10px; font-family:Georgia, serif; }
nav { padding: 20px 5px 5px 20px; font-weight:bold; float:left; width:150px; }
#nav ul { list-style-type: none; margin:0; padding-left:0; font-size:1.2em; }
#nav a {text-decoration:none;}
#nav a:link {color: #000033; }
#nav a:visited {color: #344873; }
#nav a:hover {color: #FFFFFF; }

h2 {color: #3399cc; font-family:Georgia, serif; text-shadow:1px 1px 1px #ccc; }
h3 {color: #000033; font-family:Georgia, serif; }
dt {color: #000033; }
.resort {color:#000033; font-weight:bold; }
#wrapper{width:80%; min-width:960px; background-color:#90C7E3; overflow:auto; box-shadow:5px 5px 5px #000033; -webkit-box-shadow:5px 5px 5px #000033; -moz-box-shadow:5px 5px 5px #000033; }
Content { background-color:#FFFFFF; padding:1px 20px 20px 30px; margin-left:150px; overflow:auto; }
Content img {float: left; padding: 20px; }
Content ul {list-style-position: inside; }
#address {font-size: 90%; }
footer {font-size: 75%; font-family: Georgia, serif; font-style: italic; }
header, hgroup, nav, footer, figure, figcaption, aside, section, article {display: block; }
Mobile {display: inline; }
#desktop {display: none; }
img {max-width: 100%; height: auto; }
@media only screen and (max-width: 768px) {
body {margin:0;}
#wrapper {min-width:0; Width:auto}
Content {margin-left:0; }
nav { float: none; width: auto; padding: 0; }
footer { margin-left: 0; }
}
@media only screen and (max-width: 480px) {
body {margin:0;}
#wrapper { width:auto; min-width:0; margin:0; }
Content { padding:.1em,1em,.1em,1em; margin:0; font-size: 90%; }
header {margin:0; font-size:1.5em; padding-left:.3em; }
Content { float:none; padding:0; margin:.1em; }
Mobile { display:inline;}
#desktop { display:none; }

Lol. Let me pull out my magic crystal ball to see what’s not working. Ahh the gods are confused because they need something to go on. What’s not working???

As mentioned above we’d need more code to go on. Do you have a link to the page in question?

You do have two errors in that css which you may want to fix first.

Add the closing tag to the last media query and fix this padding rule ( padding:.1em,1em,.1em,1em; ).
It should be:
padding:.1em;

(assuming you meant .1em and not 1em - either way remove the commas as they are not a valid separator in that rule)



@media only screen and (max-width: 480px) {
body {margin:0;}
#wrapper { width:auto; min-width:0; margin:0; }
#content { [B]padding:.1em;[/B] margin:0; font-size: 90%; }
header {margin:0; font-size:1.5em; padding-left:.3em; }
#content { float:none; padding:0; margin:.1em; }
#mobile { display:inline;}
#desktop { display:none; } 

[B]}/* add this */[/B]

Sorry here is the site:

http://www.davidkosak.vacau.com/mod8/

Basically nothing works in firefox and IE. No colors, pictures backgrounds etc. In chrome it works fine. here is the coding for the home page if that helps

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta name= “viewport”
content=“width=device-width, initial-scale=1.0”>
<!–[if lt IE 9]>
<script src=" http://html5shim.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]–>
<title> Pacific Trails Resort </title>
<meta charset=“utf-8”>
<link href=“pacific.css” type=“style/css” rel=“stylesheet” />
</head>
<body>

<div id=“wrapper”>
<header>
<h1>Pacific Trails Resort</h1></header>

      &lt;nav&gt;

<ul>
<li><a href=“index.html”>Home</a></li> <li><a href=“yurts.html”>Yurts</a></li>
<li><a href=“activities.html”>Activities</a></li> <li><a href=“reservations.html”>Reservations</a></li>
</ul>
</nav>
<div id=“content”>

    &lt;h2 class="resort"&gt;&lt;strong&gt;Enjoy Nature in Luxury&lt;/strong&gt;&lt;/h2&gt;

<img src=“coast.jpg” alt=“Coast View” />

            &lt;p&gt;&lt;span style="color:black"&gt; Pacific Trails Resort&lt;/span&gt; offers a special lodging experience
            on the California North Coast. Relax in serenity with panoramic view of the Pacific Ocean.&lt;/p&gt;

            &lt;ul&gt;
            &lt;li&gt;Private yurts with decks overlooking the ocean&lt;/li&gt;
            &lt;li&gt;Activities lodge with fireplace and gift shop&lt;/li&gt;
            &lt;li&gt;Nightly fine dining at the Overlook Cafe&lt;/li&gt;
            &lt;li&gt;Heated outdoor pool and whirlpool&lt;/li&gt;
            &lt;li&gt;Guided hiking tours of the redwoods&lt;/li&gt;
            &lt;/ul&gt;


    &lt;div id="contact"&gt;
      &lt;span class="resort"&gt;Pacific Trails Resort&lt;/span&gt;&lt;br&gt;
            12010 Pacific Trails Road&lt;br&gt;
            Zephyr, CA 955555&lt;br&gt;&lt;br&gt;
    &lt;a id="mobile" href="tel:888-555-5555"&gt; 888-555-5555&lt;br&gt;&lt;br&gt;&lt;/a&gt; &lt;span id= "desktop"&gt;888-555-5555&lt;/span&gt;
    &lt;/div&gt;

    &lt;footer&gt;
            Copyright &copy;2011 Pacific Trails Resort&lt;br /&gt;
            &lt;a href="mailto.david@kosak.com"&gt;david@kosak.com&lt;/a&gt;

    &lt;/footer&gt;

</div><!-- Content –>
</div><!-- #wrapper –>
</body>
</html>

Check your link to your stylesheet. It should be:

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

Yes as mentioned above you need to use this:

type=“text/css”

and not :

type=“style/css”

:slight_smile: