My website doesn't work on firefox.

2 תגובות
1 has this problem
26 views
תגובה אחרונה מאת guigs

לפני 10 שנים

1.9.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.

השתנתה ב־4 בספטמבר 2014, 9:33:23 -0700 על־ידי cor-el

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

guigs

4.9.2014, 9: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.2014, 9:33

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

חיפוש בתמיכה

My website doesn't work on firefox.

כל התגובות (2)

עיון לפי מוצר

עיון לפי נושא

עיון לפי מוצר

עיון בכל אשכולות הפורום לפי נושאים

קבלת עזרה בנושא

חיפוש בתמיכה

My website doesn't work on firefox.

כל התגובות (2)