Marc: IE-CSS-BUG No. 6535782986/a-19 ff.

Hallo zusammen,

zwei Bugs des IE kann ich nicht durch Workarounds beheben. Beide zu sehen auf der Seite:

http://www.bildungsserveragrar.de/de/studium/

Ich weiß, es ist kniffelig und benötigt viel Zeit - sicher nur was für Fortgeschrittene und Leute mit Spaß am Experimentieren. Ich kann verstehen, wenn keiner Lust hat, sich durch die Riesen-CSS durchzubeißen. Aber Ihr seid meine letzte Hoffnung.
Unten mache ich noch genaue Angaben zu den CSS-Dateien (Verlinkungen) und zu den Stellen (Zeilenangabe und Suchbegriffe), an denen die Formatierungen, die mich ärgern zu finden sind.

Problem 1:

Dieses tritt in IE6 und IE7 auf (ältere Versionen sicher auch, werden von uns aber nicht mehr unterstützt). FF und Opera zeigen alles wie gewünscht.

Beschreibung: Die Links in der rechten (hellblauen) Marginalspalte bekommen einen Pfeil vorangestellt, der symbolisiert, ob es sich um interne oder externe Links handelt. NUR bei MEHRZEILIGEN Links werden diese als Hintergrund realisierten Icons zur Hälft nach oben "rausgeschoben". Kennt jemand diesen Bug und Abhilfe/Workarounds?

Formate in der Datei
http://www.bildungsserveragrar.de/fileadmin/corporate/templates/css/agrarBildungDef.css
ab Zeile 1297 oder suchen nach "div#marginal ul"

Problem 2:

Beschreibung: Das linke Menu wird von einer doppelten Linie begrenzt. Die Linien habe ich mit allerhand CSS-Tricksereien bis hin zur semantischen Selbstverleugnung so weit hinbekommen, dass sie im FF, IE6 und Opera funktionieren.

Allerdings führt der IE7 die Linien am rechten Rand, die ich mit Hilfe eines Hintergrund-Bildes im ul realisiert habe über die untere Ecke hinaus. Es war eine Eintragung in der Datei http://www.bildungsserveragrar.de/fileadmin/corporate/templates/css/agrarBildungDefIe.css
nötig, um dem IE6 beizubringen, dass er die Linien nicht so weit runterziehen soll.

Ich habe hier einen negativen margin verwendet:

#menu #nav1 ul.level1 {
 margin-bottom:-3px;
}

Den IE7 kriege ich damit offenbar nicht... - weiß jemand, wie ich die Darstellung im neuen achso-bugfreien MS-Browser korrekt hinbekomme?

Hier der Link zur CSS-Datei:
http://www.bildungsserveragrar.de/fileadmin/corporate/templates/css/agrarBildungDef.css

Die entsprechenden Formatierungen finden sich recht weit oben, am besten nach "#menu #nav1 ul.level1" suchen (ohne Anführungsstriche natürlich) oder ab Zeile 84 in der Datei nachsehen.

Achja, der Code ist natürlich valide..

Viele Grüße und danke im Voraus an alle Helfer,

Marc.

--
Und immer schön
validieren (http://validator.w3c.org)
  1. Hallo,

    zwei Bugs des IE kann ich nicht durch Workarounds beheben. Beide zu sehen auf der Seite:

    http://www.bildungsserveragrar.de/de/studium/
    Problem 1:

    Dieses tritt in IE6 und IE7 auf (ältere Versionen sicher auch, werden von uns aber nicht mehr unterstützt). FF und Opera zeigen alles wie gewünscht.

    Beschreibung: Die Links in der rechten (hellblauen) Marginalspalte bekommen einen Pfeil vorangestellt, der symbolisiert, ob es sich um interne oder externe Links handelt. NUR bei MEHRZEILIGEN Links werden diese als Hintergrund realisierten Icons zur Hälft nach oben "rausgeschoben". Kennt jemand diesen Bug und Abhilfe/Workarounds?

    Das liegt im IE am paddig-top:2px für <li>, verwendest du es stattdessen für das <a>, zeigt der IE die Bilderchen richtig. Also muss du da ansetzen.

    Problem 2:

    Beschreibung: Das linke Menu wird von einer doppelten Linie begrenzt. Die Linien habe ich mit allerhand CSS-Tricksereien bis hin zur semantischen Selbstverleugnung so weit hinbekommen, dass sie im FF, IE6 und Opera funktionieren.

    Allerdings führt der IE7 die Linien am rechten Rand, die ich mit Hilfe eines Hintergrund-Bildes im ul realisiert habe über die untere Ecke hinaus.

    Drei Alternativen:

    1: gebe dem letzen <li> ein background-color:#fff; dann siehst du einiges mehr und von da an kannst du versuchen das Hintergrundbild richtig zu positionieren, oder ein anderes erstellen.

    2. Alternative: Ich würde die Rahmenlinien anders realisieren:
    Im 1. und letzen <li> mit gerundeten Ecken und horizontaler Linie das Hintergrundbild einfügen und in den anderen dann es entsprechendes Hg.Bild rechts posionieren.

    3. Alternative: du separierst das CSS der Navigation, und für den IE x. fügst du sie als separate Datei mit conditional comments ein.

    Grüße
    Thomas

    1. Nachtrag:

      Du kannst du für den IE den DevToolBar installieren
      http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

      Damit kannst du auch CSS eigenschaften direkt ändern (wie im WebDeveloperToolBar in FF)

      http://www.meta-text.net/etc/iedevtoolbar.gif (mittlere Spalte. PS: rechts oben im Bild siehst du im 2. Link, dass ich dort das Padding im <li> und <a> geändert habe!)

      Grüße
      Thomas

      1. Hallo Thomas

        Du kannst du für den IE den DevToolBar installieren
        http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

        Damit kannst du auch CSS eigenschaften direkt ändern (wie im WebDeveloperToolBar in FF)

        Das werde ich mal machen!

        http://www.meta-text.net/etc/iedevtoolbar.gif (mittlere Spalte. PS: rechts oben im Bild siehst du im 2. Link, dass ich dort das Padding im <li> und <a> geändert habe!)

        Vielen Dank für die hilfreichen, sinnvollen Tipps! Da weiß ich ja, was ich heute zu tun habe. ;-)

        Viele Grüße,
        Marc.

        --
        Und immer schön
        validieren (http://validator.w3c.org)