Help finding CSS problem in FireFox_问答_开发者

开发者 https://www.devze.com 2023-02-03 23:29 出处：网络

I have a page that I\'m working on that has the following HTML markup: <!DOCTYPE html> <html lang=\"en\">

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" 开发者_JAVA百科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!

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