Sykje yn Support

Mij stipescams. Wy sille jo nea freegje in telefoannûmer te beljen, der in sms nei ta te stjoeren of persoanlike gegevens te dielen. Meld fertochte aktiviteit mei de opsje ‘Misbrûk melde’.

Mear ynfo

Dizze konversaasje is argivearre. Stel in nije fraach as jo help nedich hawwe.

My website doesn't work on firefox.

  • 2 antwurd
  • 1 hat dit probleem
  • 26 werjeftes
  • Lêste antwurd fan guigs

more options

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

Bewurke troch cor-el op

Alle antwurden (2)

more options

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?

more options

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