PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Der IE macht mich wahnsinnig... bräuchte mal Hilfe mit CSS

Pompos
2006-05-04, 14:28:40
Ich schaffe es einfach nicht dem IE beizubringen die Seite (auch bei anderem Code) so anzuzeigen wie es sich gehört, bzw. so wie es halt Firefox, Opera und Konqueror darstellen. Ich habe meiner Meinung schon alles erdenkliche ausprobiert, aber da ich nicht so viel Ahnung vom IE habe, kann ich da auch was übersehen haben. Wäre für Hilfe sehr dankbar....

Der Code:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lama?</title>
<meta name="robots" content="index; follow" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css"><!--
/* BODY */
body {
background-color: silver;
}

/* BOX blue print */
.box {
border: #336699 1px solid;
background-color: #4b4b4b;
}
.box:hover {
border: #4b4b4b 1px solid;
}
.boxtitle {
padding: 5px;
background: #3b77b3 url(header.gif) repeat-x;
color: #ffffff;
font: bold 14px sans-serif;
}
.boxcontent {
margin-top: 1px;
padding: 0px;
background: #ffffff url(shadow.gif) repeat-x;
font-size: 12px;
}
.boxfooter {
margin-top: 1px;
height: 12px;
background: green url(footer.gif) repeat-x;

}
.menulink a{
display: block;
padding: 2px 2px 2px 4px;
color: #4b4b4b;
font: bold 12px sans-serif;
text-decoration: none;
}
.menulink a:hover{
display: block;
background-color: #3b77b3;
color: #ffffff;
text-decoration: none;
}
.menulink a:visited {
display: block;
background-color: transparent;
color: #3b77b3;
text-decoration: none;
}
.menulink a:active {
display: block;
background-color: #3b77b3;
color: #4b4b4b;
text-decoration: none;
} //-->
</style>
</head>
<body>

<div class="box">
<div class="boxtitle">dalli</div>
<div class="boxcontent">
<div class="menulink"><a href="einfuehrung.htm">Auto und Verkehr</a></div>
<div class="menulink"><a href="mehrspaltige.htm">Staat und Buerger</a></div>
<div class="menulink"><a href="fixbereiche.htm">Fun und Spiele</a></div>
<div class="menulink"><a href="navigationsleisten.htm">Haus und Garten</a></div>
<div class="menulink"><a href="browserweichen.htm">Tier und Essen</a></div>
</div>
<div class="boxfooter"></div>
</div>

</body>
</html>

So siehts im Firefox aus:
http://img374.imageshack.us/img374/3020/firefox5pz.jpg (http://imageshack.us)

und so im Internet Explorer:
http://img374.imageshack.us/img374/1480/ie1ua.jpg (http://imageshack.us)
Wenn ich jetzt statt den Links einfach nur Text anzeigen lassen möchte, dann schafft der IE auch unten die blaue Linie der Border zu zeichnen, aber weiterhin mit dem weißen Sicherheitsabstand.
DanMan
2006-05-04, 17:54:57
Des englischen mächtig? -> http://www.positioniseverything.net/explorer.html

Kurz gesagt: Möglichst kein padding benutzen, wenns im IE richtig aussehen soll (in diesem Fall also für .menulink a).

Semantisch schlechter Code übrigens. Für Listen nimmt man Listen, und für Überschriften Überschriften (anstatt den divs).
Tommes
2006-05-04, 20:38:54
Wobei das denn ein wenig problematisch wird, mit den Hintergründe. Das wird mit CSS3 besser (was dann irgendwan 2018 auch vom IE unterstützt werden wird): Dort kann man einem Element mehrere Hintergründe zuweisen. ALso zB. den "header" und "footer" der Box, einmal als top und ein mal als bottom background.

Jedoch gehören die Links in eine Liste, ohne Frage!
Grinsekatze
2006-05-05, 10:30:00
Die erste Zeile, also "<?xml version="1.0" encoding="utf-8" ?>" wird vom IE falsch interpretiert und löst dann unglücklicherweise den Quirks Mode aus. Traurig aber wahr, probiers mal ohne, evtl liegt es daran.
Pompos
2006-05-11, 12:10:40
Vielen Dank.... ich glaube dem IE hat die height: Eigentschaft gefehlt, um alles anständig zu rendern. Ich weiß es leider aber nicht genau, da ich den Code, dank eurer Hinweise jetzt semantischer gemacht habe und sich so folglich auch viel geändert hat.
Kabelsalat
2006-05-11, 13:27:38
Die Erfahrung mit der Höhe habe ich bei meinen Projekte auch gemacht: height:0px für den IE zugewiesen und alles wird korrekt angezeigt (Das Element wird entsprechend gedehnt).