Liebe Experten,
ich habe eine Webseite geschrieben und vor einigen Tagen ins Internet gestellt. Bin allerdings Anfänger, und zu meiner unangenehmen Überraschung hat mir ein Bekannter (der IE6 hat) gesagt, bei ihm werden die Bereiche ziemlich durcheinander dargestellt. Er meinte, es gäbe noch genug Leute mit IE6, und nun schlage ich mich damit herum, Workarounds zu finden, damit die Seite auch auf dem IE6 richtig oder zumindest akzeptabel angezeigt wird (hatte vorher nur mit Firefox und IE8 getestet). Die Technik mit Browser-Weichen habe ich schon herausgefunden, trotzdem komme ich nicht wirklich weiter.
Zwei Probleme treten auf:
-
Ich habe drei Bereiche in der CSS-Datei definiert. Hier z. B. der Bereich für den Titel bzw. das Logo:
#header {
position:absolute;
left:1ex; top:1ex; right:1ex;
padding-left:1ex;
padding-right:1ex;
height:12ex;
color:#000000;
background:#66bbee;
border:1px solid #000000;
}
Im Firefox und im IE8 reicht der Bereich über die ganze Breite des Browser-Fensters (abgesehen von einem Rand beidseits von 1ex Breite). Im IE6 hingegen ist die Angabe eines Eckpunktes und explizit der Breite notwendig. Der Bereich wird mit obiger Definition nur so breit wie der darin enthaltene Text (plus padding li. und re.) Leider gehen gemischte Angaben nicht (wie z. B. width:100%-2ex:wink:. Gibt es eine andere Möglichkeit, damit es im IE6 so aussieht wie im FF?
- Links habe ich einen Bereich für ein Navigationsmenu (CSS-Ausschnitt siehe unten) vorgesehen. Problem: mit display:block wird nach jedem Menupunkt eine Leerzeile eingefügt (schaut schlecht aus). Mit display:inline wird das zwar verhindert, dafür sind die Link-Balken (Farbbalken z. B. beim Überqueren mit der Maus, Definition a:hover) nur so lang wie der Menupunkt-Text unter dem Link (z. B. „Startseite“, „Kontakt“ usw), anstatt unabhängig von der Menupunkt-Textlänge über die ganze Breite des Navigationsbereichs zu gehen wie beim FF. Sieht also auch nicht besonders gut aus.
Gibt es auch dafür eine Lösung?
Grüße,
I.
#menu {
position:fixed;
left:1ex; top:15ex;
width:19ex;
padding:1.5ex;
color:#000000;
background:#ffffff;
font-family:Arial, sans-serif;
font-size:1.0em;
font-weight:bold;
line-height:1.5;
float:left;
border:1px solid #000000;
}
#menu ul {
width:19ex;
list-style-type:none;
}
#menu li {
position: relative;
margin-left:0ex;
margin-top:0.5em;
}
#menu a {
text-decoration:none;
display:block;
text-align:left;
background:#ffffff;
color:#003366;
}
#menu a:link {
color:#0000FF;
background:#ffffff;
}
.... (restliche Definitionen für a:hover usw.)
