[SOLVED] NAV_LIST_UL: Anzeigeprobleme im IE6+7

[Manuel-NI]

Auf unserer neuen Band-Homepage habe ich noch ein paar Anzeige-Probleme, die mich zwar nicht von der Veröffentlichung abgehalten haben, die ich aber gerne noch beseitigen möchte. Die Seite um die es geht findet Ihr unter http://www.guyzndollz.de.

1. Im Internet Explorer 6+7 wird das linke Menu (unterhalb der Seite "Über uns" und "Kontakt") zu klein angezeigt.
2. Im Internet Explorer 6+7 ist zwischen dem Titelbild und dem horizontalen Menu ein Abstand, der da nicht hingehört, den ich aber auch nicht verstehe, auf manchen Seiten ist oberhalb der Fußzeile auch ein Abstand, der da genausowenig hingehört.

Getestet habe ich die verschiedenen Versionen mit dem IETester, ich hoffe einfach mal, das der sich genauso wie die anderen IE-Versionen verhält.
Wenn mir jemand bei diesen Problemen weiterhelfen könnte, wäre das ganz super.

Liebe Grüße,
Manuel

[flip-flop]

1. IE zählt die runden CSS Ecken nicht zu seinem Aufgabengebiet. (Lässt sich jedoch per CSS-Hintergrundgrafik oder JS lösen).
2. Gebe der .nlu_horiz1 bitte mal ein padding: 0; und border: 0; mit. Es könnte auch mit der fehlenden Höhenangabe in #header zusammenhängen.
Die Fußzeile wird (bei mir) nur auf "Home" nach unten gedrückt, das macht der Content. In den <p> Tags fehlt noch ein margin-bottom das nicht definiert ist.

IE: Bei Terminen wandert der Content in seiner Spalter unter die Höhe des linken Bildes. Hier ist irgendetwas zu breit. Ich könnte mir vorstellen dass der border für den IE das Problem ist. Ein width=99% würde sicher schnell helfen. Dito bei Gästebuch.

Knut

[Manuel-NI]

Vielen Dank erst mal für die Antworten!
1. Das die runden Ecken im IE nicht gehen, ist mir klar. Was mich stört ist, das das Menu nicht linksbündig anfängt (wie im FF) sondern ca. 50 Pixel in die Mitte geschoben ist. Das führt dann dazu, das die Menüpunkte eigentlich zu klein sind.
2. Den Freiraum unter dem Header habe ich im IE7 mit der Angabe der Höhe des Feldes wegbekommen, im IE 6 ist er immer noch da...
Den Freiraum über dem Footer bei "Über Uns" habe ich mir wahrscheinlich bei einer Kopieraktion vom Open Office in den Whysiwyg-Editor eingefangen:

Code: Select all

<p>
<meta content="text/html; charset=utf-8" http-equiv="CONTENT-TYPE">
<title></title>
<meta content="OpenOffice.org 3.0  (Win32)" name="GENERATOR"><style type="text/css">
	<!--
		@page { margin: 2cm }
		P { margin-bottom: 0.21cm }
	--></style>                                      </meta>
</meta>
</p>

Beim Gästebuch war in einem DIV noch ein

Code: Select all

margin-bottom: 1.0em;

drin. Der Tip mit den 99% bei Terminplan und Gästebuch war goldrichtig und hat perfekt zum Erfolg geführt!

Liebe Grüße,
Manuel

[flip-flop]

Auch hier ist der IE6 wieder völlig aus dem Häuschen und kann endlich mal machen was er will. Es wir sicherheitshalber ein - margin-left: 30pt; - generiert oder so.

Code: Select all

.nlu_navi1 ul {
   margin: 0;

sollte Abhilfe schaffen.


Die Lücke unterhalb der Kopfgrafik wird nicht durch eine schlecht Programmierung generiert, sondern lediglich durch die ab und zu auftretende Schwäche des IE6, den Quelltext richtig zu interpretieren.

Wenn du

Code: Select all

<div ...><img src= .... /></div> 

anstatt

Code: Select all

<div ...>
<img src= .... />
</div>

schreibst, wird es mit 99% Wahrscheinlichkeit funktionieren.

Bitte nicht hinterfragen weshalb das so ist ....


Knut

[Manuel-NI]

Hallo Knut,
Auf so einen Mist kommt man auch nur durch viel selbsterfahrenes Leid mit diesen "Browsern", oder?
Auf jeden Fall sieht die Seite im Internet Explorer 6+7 jetzt auch annähernd so aus, wie in richtigen Browsern - die runden Ecken baue ich vielleicht später noch ein (da hab ich hier im Forum schon ein bißchen was zu gefunden).
Jetzt genieße ich erstmal das (durchweg positive) Feedback unserer Besucher
Vielen, Vielen Dank für Deine super-guten Tips!

Liebe Grüße,
Manuel

[flip-flop]

Runde Ecken und IE, das war doch schon vorher klar. Du kannst doch bei deiner Konstruktion feste Hintergrundgrafiken verwenden. Schon ist auch diese Problem gelöst. (Keine PNGs).
Ganz elegant geht das dann mit der "sliding door" Technik. Etwa so: Horizontaler Schiebetüreffekt

Knut