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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Gibt es mehrere Probleme sehe ich mit deiner Quelle. Nicht erschöpfende Liste:
1) Sie benötigen ein doctype. Ansonsten, Browser-render-Elemente in einem nicht-standard-Weg.
Beispiel:
2) Sie haben eine
<div>
Ende nach die</body>
tag. Dies ist ungültig.Update:
3) Sie brauchen nicht den zusätzlichen
<br>
im<div id="banner">
.Update:
4) Nun, wenn Sie wollen
<div id="container">
werden zentriert und haben eine Breite von 800px, versuchen Sie die folgenden.Zentrierung code, geht in Ihrem css (ersetzt bestehenden):
5) Für Ihre
font-size
Erklärung, bist du mitsmall
. Dies wird sich unvorhersehbar Verhalten. Erwägen Sie stattdessen, die entwederem
oderpx
für die Schriftgröße.Schriftgröße mit
em
:Schriftgröße mit
px
:InformationsquelleAutor thedz
Erste, was ich sah, müssen Sie fügen Sie diese, um die erste Zeile Ihrer HTML zu zwingen, D. H. zu erbringen, die in den standards-Modus, statt im quirks-Modus:
InformationsquelleAutor Jason Berry
In Bezug auf die Zentrierung der banner, versuchen Sie, die folgenden:
im body-Selektor:
text-align: center;
im banner:
margin-right: auto;
margin-left: auto;
In Bezug auf Schriftgröße versuchen mit em oder % sizing.
Andere als nur die Bewältigung der Probleme ein zu einer Zeit, die Feinabstimmung der details inkrementell. Werfen, in der alles auf einmal wird nur Verwirrung Stiften - Chancen sind es wird nicht funktionieren, wie erwartet, sondern frustrieren Sie.
InformationsquelleAutor vector