Vyhľadajte odpoveď

Vyhnite sa podvodom s podporou. Nikdy vás nebudeme žiadať, aby ste zavolali alebo poslali SMS na telefónne číslo alebo zdieľali osobné informácie. Nahláste prosím podozrivú aktivitu použitím voľby “Nahlásiť zneužitie”.

Ďalšie informácie

My website doesn't work on firefox.

  • 2 odpovede
  • 1 má tento problém
  • 26 zobrazení
  • Posledná odpoveď od 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.

Upravil(a) cor-el dňa

Všetky odpovede (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 :-)