Problem mit IE6

[Compiwurstel]

Hallo zusammen,
meine Navigation sieht im Prinzip so aus:

<img class="pix" src="layout/pics/pix/dorange.gif" alt="Startseite" />

<a class="mnav" href="index.php">STARTSEITE</a><br style="clear:left" />

<a class="link" href="?section=browser">Unsere Webseite</a><br style="clear:left" />

Die Hauptnavigationspunkte sind also jeweils durch eine kleine (Einpixel-)Grafik markiert, die Unternavigation soll in gleicher Flucht mit dem Text der Hauptnavigation stehen. Dazu sind die einzelnen CSS-Klassen wie folgt definiert:

.pix {width:12px; height:12px; border-width:0.75pt; border-style:solid; border-color:#111111; text-align:left; margin:5px 5px 10px 5px; display:block; float:left}

a.mnav {font-family: Verdana, Arial, sans-serif; color:#400080; font-size:8pt; font-weight:bold; text-decoration:none; margin:5px 5px 10px 5px; display:block; float:left; white-space:nowrap}

.link {font-family: Arial, Verdana, sans-serif; font-size:7pt; display:block; float:left; margin:0px 0px 3px 22px}

Mit IE7, Firefox und Opera wird das auch sauber angezeigt, IE6 jedoch berechnet die margin-Angabe der Klasse ".link" offenbar nicht vom linken Rand aus, sondern von dem Hauptnavigationstext, jedenfalls ist die Unternavigation viel zu weit eingerückt. Gibt es da eine Abhilfe (die Logfiles unserer Seite zeigen, dass - leider - die meisten BesucherInnen - 60% - mit dem IE6 unterwegs sind)!

Viele Grüße
Compiwurstel

[Gunnar Bittersmann]

Hello out there!

<img class="pix" src="layout/pics/pix/dorange.gif" alt="Startseite" />

Warum ist das nicht auch verlinkt? Der Alternativtext "Startseite" (nicht das 'alt'-Attribut!) ist hier wohl überflüssig ...

<a class="mnav" href="index.php">STARTSEITE</a>

... da dieses ja als Text ohnehin folgt.

<br style="clear:left" />

Was soll das 'style'-Attribut hier?

br {clear: left} ins Stylesheet und im HTML steht nur <br />.

Aber halt! „Ich möchte furchtbar gern eine Liste sein, bitte bitte lass mich doch ...!!!1“ (frei nach [wahsaga])

Die Hauptnavigationspunkte sind also jeweils durch eine kleine (Einpixel-)Grafik markiert,

Das Hintergrundbild der Listitems also.

die Unternavigation

Ich möchte also furchtbar gern eine verschachtelte Liste sein:

<ul>  
  <li><a href="foo">foo</a>  
    <ul>  
      <li><a href="bar">bar</a></li>  
      <li><a href="baz">baz</a></li>  
    </ul>  
  </li>  
  <li><a href="quz">quz</a></li>  
</ul>

Dann kannst du dich daran machen, der Navigations_liste_ mit CSS das gewünschte Aussehen zu geben.

See ya up the road,
Gunnar

[Compiwurstel]

Hallo Gunnar,
danke für die Rückmeldung.

Aber halt! „Ich möchte furchtbar gern eine Liste sein, bitte bitte lass mich doch ...!!!1“ (frei nach [wahsaga])

Die Hauptnavigationspunkte sind also jeweils durch eine kleine (Einpixel-)Grafik markiert,

Das Hintergrundbild der Listitems also.

die Unternavigation

Ich möchte also furchtbar gern eine verschachtelte Liste sein:

<ul>

<li><a href="foo">foo</a>
    <ul>
      <li><a href="bar">bar</a></li>
      <li><a href="baz">baz</a></li>
    </ul>
  </li>
  <li><a href="quz">quz</a></li>
</ul>

  
Ja, so ungefähr hatte ich das auch schon mal. Das problem ist nur, dass sich die lieben Browserlein bei der Darstellung von Listen, insbesondere bei verschachtelten Listen, noch mehr unterscheiden, da kannst du soviel css-definieren, wie du willst, du kriegst keine einigermaßen identische Einrückung hin - ist jedenfalls meine Erfahrung!  
  
Gruß  
Compiwurstel

[Powl]

Hallo,

Ja, so ungefähr hatte ich das auch schon mal. Das problem ist nur, dass sich die lieben Browserlein bei der Darstellung von Listen, insbesondere bei verschachtelten Listen, noch mehr unterscheiden, da kannst du soviel css-definieren, wie du willst, du kriegst keine einigermaßen identische Einrückung hin - ist jedenfalls meine Erfahrung!

Da habe ich eine andere Erfahrung. Das kann man sehr wohl mit css analog darstellen.
Zu Deinem op-Problem:
IE hat den double-margin-bug bei gefloateten Elementen. Denn kannst Du aber killen, indem Du dem gefloateten Element zusätzlich ein diplay:inline; verpasst. Das ist zwar totaler Schwachsinn, an dem stören sich aber _Browser_ nicht und der IE rechnet wieder den Abstand einfach.

netten Tag
^da Powl

[Compiwurstel]

Hallo Powl,
danke für den Tipp!

IE hat den double-margin-bug bei gefloateten Elementen. Denn kannst Du aber killen, indem Du dem gefloateten Element zusätzlich ein diplay:inline; verpasst. Das ist zwar totaler Schwachsinn, an dem stören sich aber _Browser_ nicht und der IE rechnet wieder den Abstand einfach.

Es stimmt, logisch ist das nicht, aber es funktioniert!
Viele Grüße
Compiwurstel

[Powl]

Hallo,

Es stimmt, logisch ist das nicht, aber es funktioniert!
Viele Grüße

if logic($browser['IE'] == true) {
  echo "Riesen Jubel";
} else {
 download($browser['standardkonform'];
}

*scnr*

netten Tag
^da Powl

[Compiwurstel]

Hallo Powl,

if logic($browser['IE'] == true) {
  echo "Riesen Jubel";
} else {
download($browser['standardkonform'];
}

Vielleicht solltest du das Skript mal an Herrn Gates mailen, dass er es in alle künftigen IE-Generationen gleich mit einbaut. Das erspart uns viel Ärger und Arbeit!
;-)

Viele Grüße
Compiwurstel