Fungerer ikke i Firefox

31. oktober 2010

Prøver å lage en nettside her, men den fungerer ikke i Firefox.
Google Chrome, Safari og Opera fungerer fett. Har ikke prøvd Internet Explorer men ærlig talt gidder jeg ikke.

Hvor ligger problemet?
HTML5 CSS3 JS. Siden ligger enda ikke på nett.

Kode

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Galleri</title>
<link href="main.css" rel="stylesheet" type="text/css">
        <script type="text/javascript"> 
        function playSound() {
            sound = new Audio("click.mp3");
            sound.setAttribute("autoplay", "autoplay");
            document.getElementsByTagName("body")[0].appendChild(sound);
            return true;
		}
		function hoverSound() {
            sound = new Audio("mouseover.mp3");
            sound.setAttribute("autoplay", "autoplay");
            document.getElementsByTagName("body")[0].appendChild(sound);
            return true;
        }
        </script>
<!--[if lte IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script> <![endif]--> 
</head>
<body>
<header>
<nav>
<ul>
  	<li id="yellow">
    <a href="#dont" onclick="playSound()" onmouseover="hoverSound()">Click</a></li>
      <li id="purple">
    <a href="#question" onclick="playSound()" onmouseover="hoverSound()">About</a></li>
      <li id="red">
    <a href="#art" onclick="playSound()" onmouseover="hoverSound()">Photo</a></li>
      <li id="green">
    <a href="#contact" onclick="playSound()" onmouseover="hoverSound()">Contact</a></li>
    </ul>
</nav>
</header>
<div id="hat">
<div class="page" id="question">
<section class="text">
  <h1>PERSONALIA</h1>
<p>My name is Guilian the Pedophile and I'm a pretty serious guy. When I'm not dressing up as a lady I'm usually at home watching South Park or dressing up as some sort of boy
. I like movies with Johny Depp and one of my favourite meals consists of chicken. I also like to listen to Pink Floyd, and my favourite track by them is Foxy Lady.</p>
<p>I spent 3 years in an underground punk band, we held our roots in free jazz and I contributed some mad vocals. We wrote our own songs, that is to say we didn't have anything written but we were pretty intense.</p>
<p>I like to cook. It is important to keep your hands clean while cooking because usually before I cook I browse people on facebook.</p>
</section>
<section class="sidenote">
<p>trollol</p>
<p>lol</p>
</section>
</div>
<div class="page" id="contact">
<section class="text">
  <h1>CONTACT ME</h1>
<p>My name is Henry the VIII and I'm a pretty serious guy and I like to get married. When I'm not getting married I get a divorce and cash in on insurance. coolface.jpg</p>
</section>
<section class="sidenote">
<p>phone email</p>
</section>
</div>
<div class="page" id="art">
<section class="gallery">
<ul>
<li id="1">
<section class="background">
</section>
<img src="1.jpg"></li>
<li id="2">
<section class="background">
</section>
<img src="2.jpg"></li>
</ul>
</section>
<section class="thumb">
<ul>
<li><a href="#1" onclick="playSound()" onmouseover="hoverSound()"><img src="1.jpg" height="72" width="120"></a>
<a href="#2" onclick="playSound()" onmouseover="hoverSound()"><img src="2.jpg" height="72" width="120"></a></li>
</ul>
</section>
</div>
<div class="page" id="dont">
<section class="content">
<h1>THE GAME!</h1>
</section>
</div>
</div>
<footer>
<p>© Meg S. Elv</p>
</footer>
</body>
</html>

css

Kode

@charset "UTF-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
* { 
margin:0; 
padding:0; 
border:0;
}
header, footer, aside, nav, article, section {
	display: block;
	margin: 0;
	padding: 0;
}
@font-face {
	font-family: Futura LT Light; src: url(FuturaLT-Light.ttf);
}
@font-face {
	font-family: Futura LT Bold; src: url(FuturaLT-ExtraBold.ttf);
}
body {
	background-color:#fff;
}
p {
	font-family: "Futura LT Light", Futura, sans-serif;
	font-weight:300;
	font-size:1em;
	line-height:1.3em;
	padding:1.3em;
	padding-bottom: .3em;
}
h1 {
	font-family: "Futura LT Bold", Futura, sans-serif;
	font-size:2.5em;
	letter-spacing:0em;
	line-height:1.5em;
	padding:.5em;
	padding-bottom: .5em;
	color:#333
}
headder {
	position:relative;
	width: 100%;
}
nav li{
	list-style-type: none;
 	display: block;
	width: 6.2em;
	height: 1.8em;
 	float: right;
 	text-align: right;
  	font-family: "Futura LT Bold", Futura, sans-serif;
	font-size: 2em;
	margin: .1em;
}
nav li:hover {
	background-color: #333 !important;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#4c4c4c), color-stop(0.6, #474747));
  }
#green {
	background-color:#0F0;
}
#red {
	background-color:#F00;
}
#purple {
	background-color:#F0F;
}
#yellow {
	background-color:#FF0;
}
nav li a {
	display: block;
	padding: .8em .5em .5em .5em;
	color:#FFF;
	text-decoration: none;
}
a {
	text-decoration: none;
	color:#000;
}
::selection {
	background: transparent; /* Safari */
	}
::-moz-selection {
	background: transparent; /* Firefox */
}
footer {
	text-align:center;
	font-size: .6em;
}
.page{
	height:100em;
}
section.text {
	float: right;
	width: 60%;
}
section.sidenote {
	float: left;
	width: 40%;
	padding-top:6.3em;
}
#hat {
	width:80%;
	min-height:600px;
	max-height:759px;
	width:920px;
	overflow:hidden;
	margin:3em auto;
	position:relative;
}
section.gallery {
	width: 920px;
	height: 550px;
	overflow:hidden;
}
section.gallery li {
	height:600px;
	}
section.thumb li {
	list-style-type:none;
 	float:left;
	padding: .1em;
	margin-top: 2em;
}
section.thumb a:hover {
	background-color: #000;
}
section.background {
	height:50px;
}