css doesn't work in firefox, but in all other browser it does

Question

I have a bit of an issue with Firefox(v30). I'm making a site, using jQuery Fullpage scroller and the whole site works in Chrome(v35), IE(11), Opera(v22), but not in firefox. Some of the stylings appear, like the font and colors, but none of the images or the backgrounds and even the Sections are not displaying properly. Could you look at it please, because I have made another site with the Fullpage script and it's working under firefox and I've used the same method everywhere and now it just doesn't want to work. The address is: http://sikitomi.hopto.org/bts

Here is my index file:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="">
    <meta name="keywords" lang="en" content="">
    <meta name="robots" content="INDEX,FOLLOW">

    <title>Body Training Solutions</title>

    <link rel="stylesheet" href="./css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="./css/jquery.fullPage.css" type="text/css" media="screen" />

    <!-- <link href="favicon.ico" rel="icon" type="image/x-icon" /> -->

    <script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="./js/jquery.easings.min.js"></script>
    <script type="text/javascript" src="./js/jquery.slimscroll.min.js"></script>
    <script type="text/javascript" src="./js/jquery.fullPage.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#fullpage').fullpage({
                loopTop: true,
                loopBottom: true
            });
        });
    </script>
</head>

<body>

<div id="fullpage">
    <div class="section" id="section0">
        <div class="left">
            <p><img src="./img/logo.png" alt=""/></p>
            <p>FULL SITE</p>
            <p>COMING SOON</p>
        </div>
        <div class="arrow">
            <img src="./img/arrow.png" alt=""/>
        </div>
    </div>
    <div class="section" id="section1">
        <h1>UPCOMING EDUCATION COURSES</h1>
        <div class="arrow">
            <img src="./img/arrow.png" alt=""/>
        </div>
    </div>
    <div class="section" id="section2">
        <div class="bg"></div>
        <h1>OUR CLASSES</h1>
        <div class="arrow">
            <img src="./img/arrow.png" alt=""/>
        </div>
        <ul>
            <li class="trx"><img src="./img/trx.png" alt="TRX"/></li>
            <li class="trx"><img src="./img/trigger.png" alt="TriggerPoint"/></li>
            <li class="trx"><img src="./img/ankorr.png" alt="Ankorr"/></li>
        </ul>
    </div>
    <div class="section" id="section3">
    </div>
</div>

</body>
</html>

And here's the style.css I've made:

/* Font */

@font-face 
{
    font-family: 'canterbold';
    src: url('canter_bold-webfont.eot');
    src: url('canter_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('canter_bold-webfont.woff') format('woff'),
         url('canter_bold-webfont.ttf') format('truetype'),
         url('canter_bold-webfont.svg#canterbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Defaults */

html, body, p, h1, h2, h3, h4, h5, h6, div, ul
{
    padding: 0;
    margin: 0;
    font-weight: normal;
    list-style: none;
}

img
{
    border: 0;
    width: auto;
    height: 100%;
}

p img
{
    width: auto;
    height: auto;
}
/* Customisations */

body
{
    background: #fff;
    font-family: 'canterbold';
    color: #fff;
}

#section0
{
    display: inline-block;
    background: url('../img/slide01bg.jpg') no-repeat center center;
    background-size: cover;
}

#section0 .left
{
    position: absolute;
    top: 5%;
    left: 0px;
    width: 36%;
    height: 95%;
    text-align: center;
    font-size: 10vh;
    font-size: 600%;
}

#section0 p
{
    padding: 2% 0px;
}

#section0 .arrow
{
    position: absolute;
    right: 0px;
    bottom: 2%;
    left: 0px;
    width: 36%;
    height: 12%;
    text-align: center;
}

#section1
{
    background: url('../img/slide02bg.jpg') no-repeat center top;
    background-size: cover;
}

#section1 h1
{
    position: absolute;
    top: 4%;
    left: 2%;
    display: inline;
    text-align: left;
    font-size: 8vh;
    font-size: 480%;
}

#section1 .arrow
{
    position: absolute;
    right: 0px;
    bottom: 2%;
    left: 0px;
    height: 12%;
    text-align: center;
}

#section2
{
    background: url('../img/slide03bg.jpg') center bottom;
    background-size: cover;
    text-align: center;
}

#section2 h1
{
    position: absolute;
    top: 1%;
    left: 5%;
    display: inline;
    text-align: left;
    font-size: 8vh;
    font-size: 480%;
    color: #3c3c3c;
    z-index: 10;
}

#section2 .bg
{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 70%;
    background: url('../img/slide03middle.png') no-repeat center center;
    background-size: contain;
    z-index: 0;
    text-align: center;
}

#section2 .arrow
{
    position: absolute;
    right: 0px;
    bottom: 2%;
    left: 0px;
    height: 12%;
    z-index: 10;
    text-align: center;
}

#section2 ul
{
    display: block;
    position: absolute;
    right: 0px;
    bottom: 0px;
    left: 0px;
    height: 37%;
}

#section2 li
{
    width: 33%;
    height: 35%;
    display: inline-block;
    font-size: 0;
}

#section3
{
    background: url('../img/slide04bg.jpg') center bottom;
    background-size: cover;
}

Any help appreciated, because this is really driving me nuts at this stage... :( Thanks a lot!

Answer 1

缺少doctype类型，请尝试在<html>标记之前添加<!DOCTYPE html>

css doesn't work in firefox, but in all other browser it does

Question

1 answers

solution1
0 ACCPTED 2014-06-23 09:55:12

css doesn't work in firefox, but in all other browser it does

Question

1 answers

solution1 0 ACCPTED 2014-06-23 09:55:12

solution1
0 ACCPTED 2014-06-23 09:55:12