nicht angemeldet
CSS Layout wird im IE nicht richtig angezeigt.
Hi,
also ich habe ein Problem, ich habe mir jetzt ein CSS Layout erstellt, oder besser gesagt zumsammengeschnitten. Das Problem, im Mozilla habe ich keine Probleme damit, aber im IE wird es nicht richtig angezeigt und auch viel größer als im Mozilla.
Vielleicht könnt ihr mir helfen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Zweispaltiges Layout mit fester Breite</title>
<style type="text/css">
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em 0;
text-align: center; /* Zentrierung im Internet Explorer */
}
div#Seite {
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 85%;
height:500px;
padding: 0.5em;
border: 2px ridge silver;
}
html>body div#Seite {
border-color: gray; /* Farbangleichung an den Internet Explorer */
}
ul {
list-style: none;
width: 25%;
border-bottom: 1px solid #ccc;
font-size:5px;
font-size: 0.91em;
float: left;
width: 10em;
margin: 0; padding: 0;
border-right: 1px groove black;
}
ul li {
position: relative;
}
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
font-size:10px;
}
ul li a:hover { color: #E2144A; background: #f9f9f9; }
li ul li a { padding: 2px 5px; }
li:hover ul, li.over ul { display: block; }
div#Inhalt {
margin-left: 12em;
padding: 0 1em;
height:500px;
border-left: 1px groove silver;
}
div#Inhalt h1 {
font-size: 1.5em;
margin: 0 0 1em;
}
div#Inhalt h2 {
font-size: 1.2em;
margin: 0 0 1em;
}
div#Inhalt p {
font-size:1em;
margin: 1em 0;
}
</style>
</head>
<body>
<div id="Seite">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div id="Inhalt">
<h1>CSS-basierte Layouts</h1>
<h2>Seite mit fester Breite</h2>
<p>Diese Seite ist hat eine feste Breite von 760px und ist zentriert.</p>
<p>Die Breite ist so gewählt, dass in 800px breiten Fenstern nicht horizontal
gescrollt werden muss und auch ein Ausdruck keine Probleme bereiten sollte.</p>
</div>
</div>
</body>
</html>
-
Hi,
im IE wird es nicht richtig angezeigt und auch viel größer als im Mozilla.
IE 5.x? Der kennt nur den Quirks-Mode und beherrscht daher kein korrektes Box-Model. Davon abgesehen wäre eine Definition von "nicht richtig" hilfreich.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
hallo,
» im IE wird es nicht richtig angezeigt und auch viel größer als im Mozilla.
Du solltest dir vielleicht einmal deine Maßangaben anschauen. Und vor allem solltest du eine genauere Problembeschreibung üben. Was du meinst, trifft ja nur auf Listen (<li>) zu, in diesem Fall auf deine Menüführung.
» ~~~css
» ul li a {
» display: block;
» text-decoration: none;
» color: #777;
» background: #fff; /* IE6 Bug */
» padding: 5px;
» border: 1px solid #ccc;
» border-bottom: 0;
» font-size:10px;
» }
» ul li a:hover { color: #E2144A; background: #f9f9f9; }
» li ul li a { padding: 2px 5px; }
» li:hover ul, li.over ul { display: block; }
»So wirklich überzeugend ist das nicht. -
Hi,
also ich habe ein Problem, ich habe mir jetzt ein CSS Layout erstellt, oder besser gesagt zumsammengeschnitten.
genau. Du solltest schon versuchen zu verstehen, was Du da aus den Beispielen zusammensetzt.
width: 85%;
Ich weiß zwar nicht, wieso Du 12.5% Randabstand haben willst, aber hierzu brauchst Du width gar nicht anzugeben.
height:500px;
Und was soll mit den Inhalten werden, die dort nicht hineinpassen?
width: 25%;
Die Breite eines Menüs würde ich nicht von der Fensterbreite abhängig machen.
font-size:5px;
ein Witz, oder?
font-size: 0.91em;
aber zum Glück wieder aufgehoben.
width: 10em;
und auch die Breite wieder vernünftig definiert. Wozu diese Verrenkungen?
ul li {
position: relative;wozu das? Du verwendest keine absoluten Positionierungen...
background: #fff; /* IE6 Bug */
... und keine dynamische Navigation.
font-size:10px;
schade. Nun läßt sich die Schrift im IE nicht mehr skalieren und die Größenanpassungen machen kaum noch einen Sinn.
li ul li a { padding: 2px 5px; }
Du hast doch gar keine verschachtelte Navigation.
freundliche Grüße
Ingo-
Hi,
also ich habe es nochmal überarbeitet:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Zweispaltiges Layout mit fester Breite</title> <style type="text/css"> <!-- body { color: black; background-color: white; font-size: 100.01%; font-family: Helvetica,Arial,sans-serif; margin: 0; padding: 1em 0; text-align: center; /* Zentrierung im Internet Explorer */ } div#Seite { text-align: left; /* Seiteninhalt wieder links ausrichten */ margin: 0 auto; /* standardkonforme horizontale Zentrierung */ width: 85%; height:500px; padding: 0.5em; border: 2px ridge silver; } html>body div#Seite { border-color: gray; /* Farbangleichung an den Internet Explorer */ } ul { list-style: none; border-bottom: 1px solid #ccc; font-size: 0.91em; float: left; width: 10em; margin: 0; padding: 0; border-right: 1px groove black; } ul li a { display: block; text-decoration: none; color: #777; padding: 5px; border: 1px solid #ccc; border-bottom: 0; } div#Inhalt { margin-left: 12em; padding: 0 1em; height:500px; border-left: 1px groove silver; } div#Inhalt h1 { font-size: 1.5em; margin: 0 0 1em; } div#Inhalt h2 { font-size: 1.2em; margin: 0 0 1em; } div#Inhalt p { font-size:1em; margin: 1em 0; } --> </style> </head> <body> <div id="Seite"> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> </ul> <div id="Inhalt"> <h1>CSS-basierte Layouts</h1> <h2>Seite mit fester Breite</h2> <p>Diese Seite ist hat eine feste Breite von 760px und ist zentriert.</p> <p>Die Breite ist so gewählt, dass in 800px breiten Fenstern nicht horizontal gescrollt werden muss und auch ein Ausdruck keine Probleme bereiten sollte.</p> </div> </div> </body> </html>
-