Problem mit CSS im IE: falsche darstellung

[Tobias Klein]

Hallo Leute!

Ich bin gerad dabei ein neues Layout für meine Page zu basteln (mit xhtml und css). Das funktioniert so weit auch ganz gut... Aber der IE macht mir im Moment ärger mit meinem Stylesheet.

Meinen Entwurf findet ihr hier: http://www.tklein-home.de/neu/

Hier der Ausschnitt aus dem Stylesheet:

#head
{
background-color:black;
padding-left:1.8em;
padding-top:0.3em;
padding-bottom:0.3em;
vertical-align:middle;
}

#navigation
{
font-weight:bold;
background-color:#005094;
color:white;
padding-left:0.5em;
padding-right:0.5em;
padding-top:0.3em;
padding-bottom:0.3em;
line-height:1.7em;
}

Die Darstellung funktioniert in Opera 7 und in Netscape 7, nur im IE nicht so wie's soll.

Ich habe auf der Seite oben eine Navigationsleiste (in einem <span></span>). Diese ist von einem schwarz gefüllten div "umhüllt". Das div wird mit #head formatiert (siehe oben) und die eigentliche navileiste mit #navigation. Der IE scheint aber Probleme mit padding-top und padding-bottom zu haben, da diese Ränder nicht richtig dargestellt werden...das heißt der obere Rand fehlt im IE komplett

Hat jemand eine Lösung, oder findet jemand den "Fehler" - hab ich was falsch gemacht?

Gruß
  Tobias Klein

PS: Bis jetzt gibts nur die Homepage... somit sind die Links noch tot.

[ulli]

hallo ...

Hallo Leute!

Ich bin gerad dabei ein neues Layout für meine Page zu basteln (mit xhtml und css). Das funktioniert so weit auch ganz gut... Aber der IE macht mir im Moment ärger mit meinem Stylesheet.

... also bei mir (ns 7.01 und ie 6.0) sieht es in beiden browsern gleich aus ...

cu ulli

[MudGuard]

Hi,

Meinen Entwurf findet ihr hier: http://www.tklein-home.de/neu/

Warum setzt Du keinen Link? FAQ nicht gelesen? </faq/>

<span id="trennzeichen">||</span>
<a class="nav" href="/glaube/">Glaube</a>
<span id="trennzeichen">||</span>

Du benutzt die Id 'trennzeichen' mehr als einmal.
Dies ist nicht zulässig.

Bei nicht-validen Seiten ist das Browser-Verhalten noch weniger vorhersehbar als bei validen.
Also erstmal HTML / CSS valide machen.

cu,
Andreas

[Sönke Tesch]

Ich habe auf der Seite oben eine Navigationsleiste (in einem <span></span>). Diese ist von einem schwarz gefüllten div "umhüllt". Das div wird mit #head formatiert (siehe oben) und die eigentliche navileiste mit #navigation. Der IE scheint aber Probleme mit padding-top und padding-bottom zu haben, da diese Ränder nicht richtig dargestellt werden...das heißt der obere Rand fehlt im IE komplett

Kann ich hier mit dem IE 6 nicht nachvollziehen, Mozilla und IE stellen die Seite fast exakt gleich dar. Verwendest Du vielleicht noch den 5er? Wenn ja: Browserfehler mit den entsprechenden Konsequenzen.

Gruß,
  soenk.e

[Peter Kaufmann]

Hallo Tobias,

Ich bin gerad dabei ein neues Layout für meine Page zu basteln (mit xhtml und css). Das funktioniert so weit auch ganz gut... Aber der IE macht mir im Moment ärger mit meinem Stylesheet.

dein Stylesheet ist in Ordnung (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.tklein-home.de%2Fneu%2Fcss%2Fstandard.css&warning=1&profile=css2)
dein XHTML jedoch leider nicht:

• Du verwendest für mehere Elemente die id "trennzeichen". Eine id darf aber nur genau einem Element zugeordnet werden. Was du willst ist class="trennzeichen".
• Du definierst eine Liste innerhalb eines Absatzes. Innerhalb von <p> sind aber nur Inline-Elemente und Text erlaubt. Eine Liste ist jedoch kein Inline-Element.
• Du benutzt deutsche Sonderzeichen ohne einen passenden Zeichensatz an zu geben.

Du solltest diese Fehler möglichst korrigieren um keine ungewollten Effekte zu provozieren. Dein konkretes Problem dürfte aber sein, daß der IE nichts mit

| <link rel="stylesheet" type="text/css" href="css/standard.css" media="screen" />

anfangen kann. Das ist AFAIK ein bekannter Bug des IE unter Windoze: Er kommt nicht mit dem medium="screen" zu recht. Ein einfacher workaround ist es, media="screen" raus zu lassen - das bringt aber dann andere Probleme:
z.B. wird dann dieses Stylesheet zusätzlich zu einem eingebundenen speziellen Drucklayout für die Druckausgabe genutzt - Wenn du Elemente mit Hilfe von CSS positionierst wird der Ausdruck dann mit unter vollkommen unbrauchbar.

Grüße,

Peter

[Tobias Klein]

Hallo Peter,

• Du benutzt deutsche Sonderzeichen ohne einen passenden Zeichensatz an zu geben.

Wie müsste ich denn den Zeichensatz angeben?

Du solltest diese Fehler möglichst korrigieren um keine ungewollten Effekte zu provozieren. Dein konkretes Problem dürfte aber sein, daß der IE nichts mit

| <link rel="stylesheet" type="text/css" href="css/standard.css" media="screen" />

anfangen kann. Das ist AFAIK ein bekannter Bug des IE unter Windoze: Er kommt nicht mit dem medium="screen" zu recht. Ein einfacher workaround ist es, media="screen" raus zu lassen - das bringt aber dann andere Probleme:

Wenn ich das rauslasse, gibt es keine optische Änderung bei mir...

Mein Problem im IE ist leider immer noch nicht gelöst...

Danke aber schon mal wegen der Untersuchung meines Codes! ;-)

Nochmal der Link zur Seite (diesmal richtig ;-)):

http://www.tklein-home.de/neu/

Hier mal zwei Screenshots:

Darstellung im IE 6:

<img src="http://tklein-home.de/ie.gif" border="0" alt="">

Darstellung in Opera 7:

<img src="http://tklein-home.de/opera.gif" border="0" alt="">

Falsch ist, dass der IE den schwarzen Rahmen oberhalb der Navi-leiste weglässt...

Gruß
  Tobias

[molily]

Hallo Tobias,

Mein Problem im IE ist leider immer noch nicht gelöst...

Falsch ist, dass der IE den schwarzen Rahmen oberhalb der Navi-leiste weglässt...

Er interpretiert padding-top für #head nicht richtig, daran liegt es. Wenn du ein wenig am Wert herumspielst, ihn bspw. erhöhst, erscheint der Abstand. Vielleicht liegt's am relativen em-Wert.

Ich kann dir nur raten, das Konzept zu ändern, beispielsweise dass du das #head-div herausnimmst und nur das #navigation-div verbleiben lässt, welches dann auch ein p-Element sein könnte. Den schwarze »Rahmen«, welcher momentan lediglich die Hintergrundfarbe des #head-Elements ist, könntest du mit border lösen. Der blaue Hintergrund würde dann natürlich bis zum rechten Rand durchgehen...

Noch etwas anderes: Anstatt Klassen zu vergeben könntest du beispielsweise mit Nachkommensselektoren arbeiten.

<div id="navigation"> ... <a class="nav" href="/uebermich/">Über mich</a> ...</div>
a.nav:link {...}
a.nav:visited {...}
a.nav:hover {...}
a.nav:active {...}

Das ist umständlich, einfacher geht es so:

<div id="navigation"> ... <a href="uebermich/">Über mich</a> ...</div>
#navigation a:link {...}
#navigation a:visited {...}
usw.

Dasselbe gilt für die span-Elemente in der Navigation. Wenn sonst keine span-Element vorkommen und solche nur für die Trennzeichen verwendet werden, kannst du dir die Klassen ebenfalls sparen und einfach alle span-Elemente innerhalb des #navigation-Elements als solche behandelt:

<div id="navigation"> ... <span class="trennzeichen">||</span> .. </div>
.trennzeichen {...}

...wird zu...

<div id="navigation"> ... <span>||</span> ... </div>
#navigation span {...}

Wie oben gesagt würde ich im Falle des Falles ein p-Element einsetzen.

Grüße,
Mathias