My website doesn't work on firefox.

2 การตอบกลับ
1 คนมีปัญหานี้
26 ครั้งที่ดู
ตอบกลับล่าสุดโดย guigs

10 ปีก่อน

1/9/14 18:29

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>&nbsp;</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.

เปลี่ยนแปลงโดย cor-el เมื่อ 4 กันยายน ค.ศ. 2014 9 นาฬิกา 33 นาที 23 วินาที -0700

Answer 1 · 2014-09-01 18:29:08

guigs

4/9/14 09:32

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?

Answer 2 · 2014-09-01 18:29:08

guigs

4/9/14 09:33

I would recommend stackoverflow.com for a faster response however :-)

ค้นหาฝ่ายสนับสนุน

My website doesn't work on firefox.

การตอบกลับทั้งหมด (2)

Explore by product

Explore by topic

เรียกดูตามผลิตภัณฑ์

Browse all forum threads by topic

Get help with

ค้นหาฝ่ายสนับสนุน

My website doesn't work on firefox.

การตอบกลับทั้งหมด (2)