Site works in Safari but not in Firefox

StackOverflow https://stackoverflow.com/questions/22951147

Вопрос

Relatively newbie here. I have pulled my hair out trying to figure out why my site works in Safari but not in Firefox. My firefox browser is up to date. It is as if Firefox is totally ignoring the CSS style settings. I am sure the solution is SO very simple but since I have been staring at this for so long I'm sure I'm overlooking it.

Here is the HTML:

        <body>
        <div class="container">
            <article>
                <h1>//Onagus</h1>
                <p>Hallo and welcome to my site which is always a work in progress. I am using this site to showcase my web development skills as well as my other creative projects. Feel free to poke around and get a feel for what falls into my range of interest and experience.</p>
            </article>
            <div class="windowContainer">
                <div class="windowLine1"</div>
                    <div class="content">
                        <h3>News</h3>
                        <p>Sample Text</p>
                        <p><a class="cta" href="">Visit our blog</a></p>
                    </div>
                <div class="windowLine1"</div>  
                    <div class="content">
                        <h3>Visuals Blog</h3>
                        <p>Sample Text</p>
                        <p><a class="cta" href="">Read the article</a></p>
                    </div>  
                <div class="windowLine1"</div>  
                    <div class="content">
                        <h3>Media: Sound</h3>
                        <p>Sample Text</p>
                        <p><a class="cta" href="">Learn more</a></p>
                    </div>  
                <div class="windowLine2"</div>  
                    <div class="content">
                    <h3>Media: Video</h3>
                    <p>Sample Text</p>
                    <p><a class="cta" href="">Learn more</a></p>
                    </div>  
            </div>
            <nav>
                <a href="#">About</a>
                <a href="#">Music</a>
                <a href="#">Portfolio</a>
                <a href="#">Gallery</a>
            </nav>

            <footer>
                &copy; Onagus 2014
            </footer>

        </div>
    </body>
</html>

And here is the CSS :

    @charset "UTF-8";

body {
    background: #fceecb;
    color: #e6eed9;
}

.container {
    max-width: 1000px;
    height: 800px;
    margin: 0px, auto, 0px, auto;
    border: none;
    padding: 0px;
    background: url(../images/cabbitHouse1.jpg) #381f1a;
}
Это было полезно?

Решение

Your HTML is malformed. Browsers will attempt to fix it for you but may do this in different ways, resulting in different output. You should make sure that you site conforms to the W3C standard to ensure the most consistent and future prof output.

Here is a parser that may help you.

See this <div class="windowLine2"</div>. the div tag is not closed properly

<div class="windowLine2"</div>  
    <div class="content">
        <h3>Media: Video</h3>
        <p>Sample Text</p>
        <p>
            <a class="cta" href="">
                Learn more
            </a>
        </p>
    </div>

you probably want this:

<div class="windowLine2">  
    <div class="content">
        <h3>Media: Video</h3>
        <p>Sample Text</p>
        <p>
            <a class="cta" href="">
                Learn more
            </a>
        </p>
    </div>
</div>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top