CODEWITHSUNDEEP
cssfirefoxgoogle-chrome
Qcom
Qcom

Reputation: 19213

Help finding CSS problem in FireFox

I have a page that I'm working on that has the following HTML markup:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>TileTabs</title>

    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" href="css/veramono.css" type="text/css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="js/element_sequentials.js"></script>
</head>
<body>
    <header>
        <h1>
            TileTabs.com
        </h1>
    </header>

    <div id="content">
        <ul>
            <li>
                <img src="images/sites/truncated/google_trunc.png" />
            </li>
            <li>
                <img src="images/sites/truncated/google_trunc.png" />
            </li>
            <li>
                <img src="images/sites/truncated/google_trunc.png" />
            </li>
            <li>
                <img src="images/sites/truncated/google_trunc.png" />
            </li>
        </ul>
    </div>

    <footer>
        <a href="index.html">Home</a> | <a href="about.html">About</a> | <a href="contact.html">Contact</a>
    </footer>
</body>
</html>

style.css:

body {
    background: #333;
    font-family: 'BitstreamVeraSansMonoRoman', 'Myriad-Pro', 'Myriad', helvetica, arial, sans-serif;
}

h1 {
    font-size: 100px;
    color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    text-shadow: 2px 3px 3px #292929;
    letter-spacing: -1px;
    -webkit-text-stroke: 1px white;
}

a:link, a:visited, a:active, a:hover {
    color: #fff;
    text-shadow: 2px 3px 3px #292929;
    letter-spacing: 2px;
    -webkit-text-stroke: 1px white;
}

header {
    width: 920px;
    background: #666;
    margin: 0px auto;
    margin-top: 0;
    text-align: center;

    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;


}

#content {
    width: 920px;
    height: 600px;
    background: #666;
    margin: 0px auto;
    text-align: center;
}

footer {
    width: 920px;
    background: #666;
    margin: 0px auto;
    text-align: center;

    -webkit-border-bottom-right-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-bottomright: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;    
}

ul {
    padding-top: 20px;
    margin: 0px auto;
}

li {
    float: left;
    list-style: none;
    margin: 0 125px 60px 0;
}

veramano.css:

@font-face {
    font-family: 'BitstreamVeraSansMonoRoman';
    src: url('veramono-webfont.eot');
    src: local('☺'), url('veramono-webfont.woff') format('woff'), url('veramono-webfont.ttf') format('truetype'), url('veramono-webfont.svg#webfonttPkD6dqa') format('svg');
    font-weight: normal;
    font-style: normal;
}

For some reason, everything looks terribly off in FireFox, but not in Chrome. I'm running Mac OS X, I've seen that sometimes that matters.

I'm trying to upload this live for you guys, sorry for the temporary inconvenience.

Thanks!

Upvotes: 0

Views: 443

Answers (1)

Ayaz Malik
Ayaz Malik

Reputation: 138

fixed by adding display:block; in footer's css.

Upvotes: 1

Related Questions