My website doesn't work on firefox.
So I've made a website for my internship assignment (first year of my study hence the lack of experience). Sadly I've ran into the problem where it works on every browser except firefox.
I was wondering if anyone here could help me solve the problem after countless hours of trying to fix it myself.
So I am using Html,css and some javascript for the website wich I will post below.
html:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="tartufi.css" media="screen"/> <title>xxxxxx</title> <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> <link href='http://fonts.googleapis.com/css?family=Karla:700' rel='stylesheet' type='text/css'/> </head> <body> <p> </p> <div class="header"> </div> <div class="alpha"> <div class="headermenu"> <div class="logo"> </div> <nav> <ul id="navigation"> <li><div class="navSection "><a id="nav1" href="">HOME</a> </div></li> <li><div class="navSection "><a id="nav2" href="">PASSION</a> </div></li> <li><div class="navSection "><a id="nav3" href="">CONTACT</a> </div></li> </ul> </nav> <div class="talen"> <a href="index.html"><img style="border:0;" src="nederlands.png" alt="English" /></a> <a href="index_en.html"><img style="border:0;" src="english.png" alt="English" /></a> <a href="index_du.html"><img style="border:0;" src="deutsch.png" alt="Deutsch" /></a> </div> </div> <div class="content"> <article class="content"> <section id="s1"> <div id="services" class="f"> </div> </section> <section id="s2"> <div id="services2" class="b"> <div class="tekstcontent"> </div> <div class="imagecontent"> </div> </div> </section> <section id="s3"> <div id="services3" class="c"> <div class="contact"> person lastname <br/> street<br/> postal code<br/><br/> <img src="streep.png" alt="" /><br/><br/> <img src="tel.png" alt=""/> phone <br/><br/> <img src="fax.png" alt="" > fax<br/><br/> <img src="email.png" alt="" align="center"> <a href="mailto:xxxx@xxxxxxxx" class="contactlink">xxxx@xxxxxxxx</a> </div> <div class="imagecontent"> </div> </div> </section> </article> </div> <div class="footer"> Copyright © 2014. <a href="http://www.xxxxx.xxxx/" target="_blank" style="color:grey;">xxxx xxxx xxxxxx</a> </div> </div> </body> </html>
CSS:
body {
background-color: black;
background-image:url("background.jpeg");
background-size: 1300px 768px;
background-repeat:no-repeat;
background-position: top;
}
.alpha {
width: 1300px;
height: 768px;
margin-left: auto;
margin-right: auto;
margin-top: -55px;
position:relative;
}
.header {
width: 100.9% ;
margin-left: -5px;
height: 100px;
margin-top: -55px;
background-color:white;
opacity: 0.4;
float: left;
}
.headermenu {
width: 1300px;
height: 120px;
margin-left:auto;
margin-right:auto;
position: absolute;
}
.logo {
width:263px;
height:350px;
position:relative;
background-image:url("LOGO.png");
background-size:100%;
color:green;
float:left;
background-repeat:no-repeat;
}
.imagecontent {
width:1300px;
height:648px;
position:relative;
background-image:url("bgcontent.png");
margin-left: 600px;
background-repeat:no-repeat;
}
.tekstcontent {
width:435px;
height:120px;
position:relative;
background-color:#D6D6D6;
float:left;
margin-left: 263px;
margin-top: 120px;
font-family:Arial, Helvetica, sans-serif;
color:black;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 20px;
}
.contact {
width:400px;
height:400px;
font-family:Candara;
position:relative;
float:left;
margin-left: 320px;
margin-top: 70px;
z-index:2;
padding: 10px ;
font-size: 30px ;
text-align: middle;
}
.content {
width:1300px;
height:648px;
overflow: hidden;
}
.f {
Width:1300px;
height:648px;
opacity:0;
}
.b {
Width:1300px;
height: 648px;
background-color: white;
}
.c {
Width:1300px;
height: 648px;
background-color: white;
}
.talen {
height:120px;
width:300px;
padding-left: 70px;
float:left;
}
.footer {
width:1300px;
height:23px;
background-color:#000000;
color:grey;
text-align:center;
}
/*nav*/
ul#navigation {
list-style:none;
position:relative;
top:-15px;
}
ul#navigation li {
float:left;
margin-left:20px;
margin-right:-20px;
}
ul#navigation li a {
display:block;
padding:30.5px 30px;
text-decoration:none;
color:black;
font-size: 33px;
margin-left:10px;
font-family: 'Karla', sans-serif;
font
}
ul#navigation li a:hover{
background-color: #c62126;
}
/* page styles */
a {
color: red;
}
Javascript:
$(document).ready(function () {
$('.navSection').on('click', function (e) {
debugger;
var elemId = ""; //eg: #nav2
switch (e.target.id) {
case "nav1":
elemId = "#s1";
break;
case "nav2":
elemId = "#s2";
break;
case "nav3":
elemId = "#s3";
break;
case "nav4":
elemId = "#s4";
break;
}
$('.content').animate({
scrollTop: $(elemId).parent().scrollTop() + $(elemId).offset().top - $(elemId).parent().offset().top
}, {
duration: 1000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function (e) {
//console.log("animation completed");
}
});
e.preventDefault();
});
});
There is still some things that need cleaning up. But I need to get the site working on firefox first before I worry about that.
So I've made a website for my internship assignment (first year of my study hence the lack of experience). Sadly I've ran into the problem where it works on every browser except firefox.
I was wondering if anyone here could help me solve the problem after countless hours of trying to fix it myself.
So I am using Html,css and some javascript for the website wich I will post below.
html:
<pre><nowiki><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="tartufi.css" media="screen"/>
<title>xxxxxx</title>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Karla:700' rel='stylesheet' type='text/css'/>
</head>
<body>
<p> </p>
<div class="header">
</div>
<div class="alpha">
<div class="headermenu">
<div class="logo">
</div>
<nav>
<ul id="navigation">
<li><div class="navSection "><a id="nav1" href="">HOME</a> </div></li>
<li><div class="navSection "><a id="nav2" href="">PASSION</a> </div></li>
<li><div class="navSection "><a id="nav3" href="">CONTACT</a> </div></li>
</ul>
</nav>
<div class="talen">
<a href="index.html"><img style="border:0;" src="nederlands.png" alt="English" /></a>
<a href="index_en.html"><img style="border:0;" src="english.png" alt="English" /></a>
<a href="index_du.html"><img style="border:0;" src="deutsch.png" alt="Deutsch" /></a>
</div>
</div>
<div class="content">
<article class="content">
<section id="s1">
<div id="services" class="f">
</div>
</section>
<section id="s2">
<div id="services2" class="b">
<div class="tekstcontent">
</div>
<div class="imagecontent">
</div>
</div>
</section>
<section id="s3">
<div id="services3" class="c">
<div class="contact">
person lastname <br/>
street<br/>
postal code<br/><br/>
<img src="streep.png" alt="" /><br/><br/>
<img src="tel.png" alt=""/>
phone <br/><br/>
<img src="fax.png" alt="" >
fax<br/><br/>
<img src="email.png" alt="" align="center">
<a href="mailto:xxxx@xxxxxxxx" class="contactlink">xxxx@xxxxxxxx</a>
</div>
<div class="imagecontent">
</div>
</div>
</section>
</article>
</div>
<div class="footer">
Copyright © 2014.
<a href="http://www.xxxxx.xxxx/" target="_blank" style="color:grey;">xxxx xxxx xxxxxx</a>
</div>
</div>
</body>
</html>
</nowiki></pre>
CSS:
<pre><nowiki>body {
background-color: black;
background-image:url("background.jpeg");
background-size: 1300px 768px;
background-repeat:no-repeat;
background-position: top;
}
.alpha {
width: 1300px;
height: 768px;
margin-left: auto;
margin-right: auto;
margin-top: -55px;
position:relative;
}
.header {
width: 100.9% ;
margin-left: -5px;
height: 100px;
margin-top: -55px;
background-color:white;
opacity: 0.4;
float: left;
}
.headermenu {
width: 1300px;
height: 120px;
margin-left:auto;
margin-right:auto;
position: absolute;
}
.logo {
width:263px;
height:350px;
position:relative;
background-image:url("LOGO.png");
background-size:100%;
color:green;
float:left;
background-repeat:no-repeat;
}
.imagecontent {
width:1300px;
height:648px;
position:relative;
background-image:url("bgcontent.png");
margin-left: 600px;
background-repeat:no-repeat;
}
.tekstcontent {
width:435px;
height:120px;
position:relative;
background-color:#D6D6D6;
float:left;
margin-left: 263px;
margin-top: 120px;
font-family:Arial, Helvetica, sans-serif;
color:black;
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 20px;
}
.contact {
width:400px;
height:400px;
font-family:Candara;
position:relative;
float:left;
margin-left: 320px;
margin-top: 70px;
z-index:2;
padding: 10px ;
font-size: 30px ;
text-align: middle;
}
.content {
width:1300px;
height:648px;
overflow: hidden;
}
.f {
Width:1300px;
height:648px;
opacity:0;
}
.b {
Width:1300px;
height: 648px;
background-color: white;
}
.c {
Width:1300px;
height: 648px;
background-color: white;
}
.talen {
height:120px;
width:300px;
padding-left: 70px;
float:left;
}
.footer {
width:1300px;
height:23px;
background-color:#000000;
color:grey;
text-align:center;
}
/*nav*/
ul#navigation {
list-style:none;
position:relative;
top:-15px;
}
ul#navigation li {
float:left;
margin-left:20px;
margin-right:-20px;
}
ul#navigation li a {
display:block;
padding:30.5px 30px;
text-decoration:none;
color:black;
font-size: 33px;
margin-left:10px;
font-family: 'Karla', sans-serif;
font
}
ul#navigation li a:hover{
background-color: #c62126;
}
/* page styles */
a {
color: red;
}
</nowiki></pre>
Javascript:
<pre><nowiki>
$(document).ready(function () {
$('.navSection').on('click', function (e) {
debugger;
var elemId = ""; //eg: #nav2
switch (e.target.id) {
case "nav1":
elemId = "#s1";
break;
case "nav2":
elemId = "#s2";
break;
case "nav3":
elemId = "#s3";
break;
case "nav4":
elemId = "#s4";
break;
}
$('.content').animate({
scrollTop: $(elemId).parent().scrollTop() + $(elemId).offset().top - $(elemId).parent().offset().top
}, {
duration: 1000,
specialEasing: {
width: 'linear',
height: 'easeOutBounce'
},
complete: function (e) {
//console.log("animation completed");
}
});
e.preventDefault();
});
});
</nowiki></pre>
There is still some things that need cleaning up. But I need to get the site working on firefox first before I worry about that.
Modified by cor-el
All Replies (2)
Honestly you just had a "font" randomly in css and I got it to work fine:
https://guigs.makes.org/thimble/MTIxM.../test-webpage
what was not working?
I would recommend stackoverflow.com for a faster response however :-)