Maria Magdalena: IE Darstellungsfehler bei Hintergrundgrafik

Hallo!

Nachdem ich vor einigen Tagen geklärt habe, wie man Überschriften nur über die Länge der Überschrift andersfarbig unterstreichen kann, stehe ich vor einem Darstellungsproblem im IE.

Nach Aufruf der Seite im IE sind die Überschriften NICHT unterstrichen bzw. NICHT mit der Hintergrundgrafik hinterlegt. Erst, wenn man ein mal eine andere Bildschirmaplikation oder ein anderes Fenster aktiviert hat und somit die IE-Seite verdeckt ist, sieht man die Hintergrundgrafik, sobald man wieder auf die IE-Seite zurückkommt. Im Firefox und im Opera sind die Hintergrundgrafiken natürlich sofort sichtbar. ( Die Seite ist auch xhtml 1.0 strict valide! )

Kann mir bitte jemand sagen, was ich tun muß, damit auch beim Aufruf der Seite mit dem IE die Hintergrundgrafiken bei Überschriften SOFORT sichtbar sind und die Überschriften somit unterstrichen sind, OHNE, daß ich vorher zu einem anderen Fenster wechseln muß?

Danke

Maria

Hier das entsprechende CSS:

  
h1  
{  
display:inline;  
font-size:0.9em;  
background:transparent url(h1.png) bottom repeat-x;  
padding-bottom:3px;  
margin:10px 0;  
}  
  
h2  
{  
display:inline;  
font-size:0.8em;  
background:transparent url(h2.png) bottom repeat-x;  
padding:50px 0 3px 0;  
margin:10px 0;  
}  

  1. Hallo zusammen,

    ohne es probiert zu haben: gib mal height:1%;; bei den Überschriften an. Wenn es klappt, sag ich Dir was das macht - Du solltest solche Dinge, die Du nur für den IE dem CSS hinzufügst übrigens in eine entsprechende Datei auslagen, die Du stylesIE.css oder stylesIE6.css oder ähnlich nennst...

    Viele Grüße,
    Marc.

    --
    Und immer schön
    validieren (http://validator.w3.org/)
    1. Hi Marc!

      ohne es probiert zu haben

      Das dachte ich mir.

      gib mal height:1%;; bei den Überschriften an.

      Das hat NULL Effekt. Danke trotzdem.

      Maria

      PS : Anderer Vorschlag vielleicht?

      1. Hallo zusammen,

        ohne es probiert zu haben

        Das dachte ich mir.

        :-)

        gib mal height:1%;; bei den Überschriften an.

        Das hat NULL Effekt. Danke trotzdem.

        PS : Anderer Vorschlag vielleicht?

        Kannst Du die Seite mal online stellen, damit man sehen kann, welche anderen Elemente Du so verwendest und wie Du die ausrichtest (wahrscheinlich mittels float)?

        Viele Grüße,
        Marc.

        --
        Und immer schön
        validieren (http://validator.w3.org/)
      2. Hallo zusammen,

        noch eine Frage (weil ich es noch nicht verstanden habe):

        Wozu überhaupt dieses komplizierte Konstrukt? Wenn ich eine Linie haben möchte, die so lang ist, wie der Text, benutze ich text-decoration:underline - gibt es einen Grund, warum das nicht funkioniert?

        Viele Grüße,
        Marc.

        --
        Und immer schön
        validieren (http://validator.w3.org/)
        1. Hi Marc!

          noch eine Frage (weil ich es noch nicht verstanden habe):
          Wozu überhaupt dieses komplizierte Konstrukt? Wenn ich eine Linie haben möchte, die so lang ist, wie der Text, benutze ich text-decoration:underline - gibt es einen Grund, warum das nicht funkioniert?

          Das funktioniert natürlich. Nur muß meine Linie eine ANDERE Farbe haben als die Buchstaben der Überschrift, deshalb fällt text-decoration aus.

          Übrigens bin ich jetzt auf etwas draufgekommen : Sobald ich das "padding-bottom:5px" weggebe, zeigt auch der IE die Hintergrundgrafik beim ersten Aufruf der Seite an. Nur klebt sie halt dann so am Text, da das Ganze unbrauchbar ist.

          Es ist zum Verzweifeln. :-(

          Maria

          PS : Und das schlimmste : wenn man den Quelltext mit Überschriften aus der ( validen!!! ) seite rausnimmt und daraus eine neue valide Seite macht, DANN gehts. :-(

          PPS : Ja, die Seite, auf der das Ganze abläuft, hat floats, da es ein tabellenfreies Layout ist.

          1. Hallo zusammen,

            noch eine Frage (weil ich es noch nicht verstanden habe):
            Wozu überhaupt dieses komplizierte Konstrukt? Wenn ich eine Linie haben möchte, die so lang ist, wie der Text, benutze ich text-decoration:underline - gibt es einen Grund, warum das nicht funkioniert?

            Das funktioniert natürlich. Nur muß meine Linie eine ANDERE Farbe haben als die Buchstaben der Überschrift, deshalb fällt text-decoration aus.

            Ein Trick (zwar nicht die feine englische Art, aber besser als die Reisen-CSS-Konstrukte):

            Gib für die Überschrift eine Farbe an, die Du in der Linie haben möchtest (zum Beispiel blau). Gib der Überschrift text-decoration:underline mit und setze in die Überschrift ein span. Gib diesem span eine andere Farbe (jeweils mit color). Habe das auch nicht ausprobiert...

            Versuch mal obs klappt (im FF gehts z. B. mit strong, hab gerade keinen IE zur Hand) :-)

            Übrigens bin ich jetzt auf etwas draufgekommen : Sobald ich das "padding-bottom:5px" weggebe, zeigt auch der IE die Hintergrundgrafik beim ersten Aufruf der Seite an. Nur klebt sie halt dann so am Text, da das Ganze unbrauchbar ist.

            Es ist zum Verzweifeln. :-(

            Das ist normal - es dauert, bis man brauchbare Lösungen für den IE hat - vor allem wenn man floats einsetzt (und das braucht man heutzutage, wie du schon richtig gesagt hast)...

            PS : Und das schlimmste : wenn man den Quelltext mit Überschriften aus der ( validen!!! ) seite rausnimmt und daraus eine neue valide Seite macht, DANN gehts. :-(

            Aber sicher ohne floats...

            PPS : Ja, die Seite, auf der das Ganze abläuft, hat floats, da es ein tabellenfreies Layout ist.

            Sehr schön. :-)

            Wenn der trick mit dem span hilft, ist die Sache unter Umständen ja jetzt erledigt. Melde Dich auf jeden fall noch einmal hier und gib den Nutzern der Suche und des Archivs einen Hinweis, ob die Lösung brauchbar ist.

            Wenn es mit dem Trick nciht klappt, suchen wir eben weiter. :-)

            Noch gibt es keinen Grund zum verzweifeln. ;-)

            Viele Grüße,
            Marc.

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