CSS div-Breite im IE8

Ich bin sehr neu in html und css-so fühlen sich frei, um Kritik keine schlechten Praktiken, die Sie im code sehen Sie im folgenden...

Ich versuche, erstellen Sie eine zentrierte Spalte, die 800 Pixel und das banner verkleinert, um 800 Pixel an. Beim anzeigen dieser Seite in chrome oder firefox, es sieht gut aus. Wenn ich im IE8 die Schrift ist riesig, es ist ein riesiger leerer Fleck auf der rechten Seite der banner den ganzen Weg hinunter auf den Boden, und die Größe des "Containers" nicht ändern, egal, was ich in der css-Datei.

CSS:

body {
    font-family: Arial;
    font-size: small;
    background-color: #FFFFFF;
    background-image: url(../images/victorianBackground.jpg);
    background-position: top;
    background-repeat: repeat;
    color: #000000;
}
#container {
    margin: -10 auto;
    background-color: #D3CDBA;
    text-align: left;

}

html>body #container {
    width: 800px;
    min-height:800px;
    padding: 0 0px;
}

#banner {
    width:800px;
}

#banner img {   
    width:800px;    
    padding:45 0px;
}

#content {
    width:500px;
    padding: 15px;
    background-color: transparent;
}

/* Navigation */
#navigation ul {
    list-style-type: none;
    width: 800px;
    margin: 0;
    padding: 0;
}
#navigation li {
    float: left;    
    background-color: #D3CDBA;
}
#navigation li:hover {
    float: left;    
    color: #4676A4;
    background-color: #D3CDBA;
}
#navigation a {
    font-weight: bold;
    text-decoration: none;
    color: #000000;
    display: block;
    padding: 5px;
}
#navigation a:hover {
    font-weight: bold;
    text-decoration: none;  
    color: #992332;
}

#content a {    
    color:teal;
}

HTML:

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Park Avenue Neighborhood Association</title>
        <meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
        <link rel="stylesheet" type="text/css" href="../styles/style1.css">
    </head>

    <body>

<div id="container">

        <div id="banner">
            <img src="../images/banner.jpg" id="banner">
            <br/>
        </div>

        <div id="navigation">
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="History.html">History</a></li>
                <li><a href="Houses.html">Houses</a></li>
                <li><a href="LocalBusiness.html">Local Business</a></li>
                <li><a href="events.html">Events</a></li>
                <li><a href="Contacts.html">Contacts</a></li>
            </ul>
        </div>

<div id="content">

<h2>Content Header 1 </h2>

<p>Awesome Content </p>

<h2>Content Header 2 </h2>

<p>Awesome Content </p>

</div>

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

InformationsquelleAutor Orestes72 | 2009-07-27

Schreibe einen Kommentar