Odd centering CSS problem in modern non-Chrome browsers?_问答_开发者

For some reason, I have this one webpage which renders something great in Chrome, but completely different on FireFox and IE.

The effect may be seen here.

The other browsers appear to remove my margin centering of my header and footer elements.

Is there a particular reason this is only working in Chrome?

Here is my HTML:

<!DOCTYPE html>

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

    <link rel="shortcut icon" type="image/x-icon" href="images/favicon/favicon.ico">
    <link rel="stylesheet" href="css/v2.css" type="text/css">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.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="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
    <script src="js/tile_interaction.js"></script>
</head>
<body>
    <header>
        <img src="images/logo/logo_v3.png" alt="logo" />
    </header>

    <div id="content">
        <ul>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div class="tile">
                </div>
            </li>
            <li>
                <div clas开发者_如何学Pythons="tile">
                </div>
            </li>
        </ul>
    </div>

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

CSS:

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

a:link, a:visited, a:hover, a:active {
    color: white;
    text-decoration: none;
}

header {
    width: 920px;
    background: #999;
    margin: 0px auto;
    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: 760px;
    background: #999;
    margin: 0px auto;
}

footer {
    width: 920px;
    background: #999;
    margin: 0px auto;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;

    -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;    
}

li {
    float: left;
    list-style: none;
    padding: 34px;
}

.tile {
    cursor: pointer;
    background: red;
    border: 2px solid #000;
    width: 100px;
    height: 100px;
}

The <header> and <footer> tags are new (HTML5)

For older browsers that don't support HTML5 just use standard divs.

If you want to still use <header> and <footer> you can use the following code to make it work for browsers that don't support the HTML5 tags.

<script>
document.createElement('header');
document.createElement('footer');
</script>

The problem is that IE doesn't fully support (if at all) the <header> and <footer> tags. I'm not sure about Firefox 3.x, but this works fine in the current beta of Firefox 4.

get rid of the header tags

<-- <header> --!>   
<-- </header> --!>

and place the picture inside of the content tag like so, also center the picture with some css

<div id="content">
        <img src="images/logo/logo_v3.png" alt="logo" /> 
        <ul>
           ...

tags are part of HTML5 which are not yet fully supported.

Odd centering CSS problem in modern non-Chrome browsers?

精彩评论

关注公众号

热门标签

图文推荐

Odd centering CSS problem in modern non-Chrome browsers?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：