My website doesn't work on firefox.

2 réponses
1 a ce problème
26 vues
Dernière réponse par guigs

il y a 10 ans

01/09/2014 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.

Modifié le 4 septembre 2014, 09:33:23 HEP par cor-el

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

guigs

04/09/2014 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

04/09/2014 09:33

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

Rechercher dans l’assistance

My website doesn't work on firefox.

Toutes les réponses (2)

Parcourir par produit

Explorer par sujet

Naviguez par produit

Parcourir toutes les discussions du forum par sujet

Obtenir de l’assistance pour

Rechercher dans l’assistance

My website doesn't work on firefox.

Toutes les réponses (2)