Sensei: IE Prob: Text erst bei Markierung sichtbar

SELF-Forum

IE Prob: Text erst bei Markierung sichtbar

Sensei
– Informationen zu den Bewertungsregeln

Hallo!

Ich habe ein (für mich) recht eigenartiges Problem: Der Text einer Seite wird erst sichtbar, wenn man "über die weiße Seite markiert".
Vorher ist eben alles weiß, dann Mausklick und einmal über die Seite gezogen => Text erscheint!?

Ist da wo ein Fehler drin den ich nicht entdeckt habe? Oder hab ich zuviel divs für den IE? Oder liegts an was anderem?

Mit Firefox 1.0.4 klappts wunderbar, IE 6.0 funkt nicht. :(

Hier der Quellcode. Ich weiß ohne Bilder schauts blöd aus, aber der Effekt ist 8zumindest bei mir) auch ohne Bilder gut sichtbar:

-------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta content="de" http-equiv="Content-Language">
<title>Bla</title>
<link href="standard.css" rel="stylesheet" type="text/css">
<style type="text/css">
 a.navi:link { color: #fff; text-decoration:underline; }
 a.navi:active { color: #fff; text-decoration:underline; }
 a.navi:visited { color: #fff; text-decoration:underline; }
 a.navi:hover { color: #fff; text-decoration:underline; }
 a.sub:link { color: #46f; text-decoration:none; }
 a.sub:active { color: #000; text-decoration:none; }
 a.sub:visited { color: #46f; text-decoration:none; }
 a.sub:hover { color: #000; text-decoration:none; }

</style>
<base target="_self">
</head>

<body style="background-image: url(img/bg_left.PNG); margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;">

<img src="img/sonne_150x150t.png" width="150" height="150" border="0" style="position:absolute; left:67px; top:352px; z-index:5;" />
<div style="border:0px; background-image: url(img/bg_top.PNG);"><img style="z-index:20;" src="img/bg_left_r.PNG" alt="" width="111" height="23" /></div>

<div style="margin-left:50px; background-image: url(img/bg_rot.PNG); height:80px; border-left:1px solid #000; border-bottom: 1px solid #fff; font-family:Tahoma,Sans-Serif; font-size:10pt;">
 <!-- NAVIGATION starts -->
 <div style="position:absolute;top:12px;left:260px;text-align:center;">
  <img src="img/header.PNG" width="520" height="60" alt="" border="0"><br>
  <a class="navi" href="index.htm">Home</a> <img src="img/spacer_navi.PNG" width="30" height="21" border="0">
  <a class="navi" href="xxx.htm">Aktuelles</a> <img src="img/spacer_navi.PNG" width="30" height="21" border="0">
  <a class="navi" href="xxx.htm">Einteilung</a> <img src="img/spacer_navi.PNG" width="30" height="21" border="0">
  <a class="navi" href="xxx.htm">Über uns</a> <img src="img/spacer_navi.PNG" width="30" height="21" border="0">
  <a class="navi" href="xxx.htm"><b>Kontakt &amp; GB</b></a>
 </div>
 <!-- NAVIGATION ends -->
</div>

<div style="margin-left:50px; background-color: #fff; border-left: 1px solid #000; border-top: 1px solid #46f;">

<div style="float:left; margin-left:0px; margin-top:0px; width:180px; height:400px; background-image: url(img/bg_hellblau.PNG); border-bottom:1px solid #46f; border-right:1px solid #46f;">
 <!-- SUBMENU starts -->

<p style="margin:5px; margin-top:10px; font-family:Tahoma,Verdana,Sans-Serif; font-size:10pt; line-height: 20px;">&nbsp;<a class="sub" href="xxx.htm">Kontakt</a></p>
 <p style="margin:5px; margin-top:10px; font-family:Tahoma,Verdana,Sans-Serif; font-size:10pt; line-height: 20px;">&nbsp;<a class="sub" href="xxx.htm">Noch ein Kontakt</a></p>
 <p style="margin:5px; margin-top:10px; font-family:Tahoma,Verdana,Sans-Serif; font-size:10pt; line-height: 20px;">&nbsp;<a class="sub" style="color:#000;" href="xxx.htm">G&auml;stebuch</a></p>

<!-- SUBMENU ends -->
 <img src="img/bg_eck.PNG" width="14" height="12" border="0" style="position:absolute; left:218px; top:494px;">
</div>

<div style="margin-left: 190px; padding:10px; font-family:Tahoma,Verdana,Sans-Serif; font-size:10pt; line-height: 20px;">
 <!-- CONTENT starts -->

<h1 style="font-family:'Arial Narrow',Tahoma,Sans-Serif; font-size:22pt; margin-top:6px; margin-bottom:0px;">Willkommen</h1>
 <p style="font-family:Tahoma,Sans-Serif; font-size:8pt; margin-top:0px; margin-bottom:10px;">bei www.bla.at</p>
 <p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>

<!-- INFOBOX starts -->
 <div style="border:1px solid #aaa;background-color:#eee;padding:5px;text-align:right;">
  <img src="img/sonne_150x150t.PNG" width="150" height="150" style="border:1px solid #000;float:right;margin-left:6px;">
  Handbuch!<br>Nicht vergessen!<br style="clear:right;">
 </div>
 <!-- INFOBOX ends -->

<p>bla bla bla bla bla bla bla</p>

</div>

<div style="clear:both;border-top:10px solid #fff; border-bottom:10px solid #fff; margin:10px;">
 <!-- FOOTER starts -->
 <div style="border-top:1px solid #999;text-align:center;color:#999;font-size:8pt; font-family:Tahoma,Sans-Serif;">
  <table width="100%" border="0" padding="0" spacing="0"><tr>
   <td width="30%" style="text-align:left; vertical-align:top;">
    <img src="img/lupe.PNG" width="12" height="12" border="0" />&nbsp; Suche</td>
   <td width="40%" style="text-align:center; vertical-align:top;">
    &copy; Hallo 2001 - 2005<br>
    (last changed 04.07. by <a href="mailto:bla@aon.at" class="f">TB</a>)</td>
   <td width="30%" style="text-align:right; vertical-align:top;">
    <a href="x" class="f">Edit</a> &nbsp;<img src="img/edit.PNG" width="12" height="12" border="0" /></td>
  </tr></table>
 </div>
 <!-- FOOTER ends -->
</div>

</div>

</body>

--------------------

Ich hoffe ihr könnt mir weiterhalfen, Danke, Sensei

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. IE Prob: Text erst bei Markierung sichtbar

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi Sensei,

    Der Text einer Seite wird erst sichtbar, wenn man "über die weiße Seite markiert".
    Vorher ist eben alles weiß, dann Mausklick und einmal über die Seite gezogen => Text erscheint!?

    Du meinst im die Links oben im Hauptmenü? Die sind genauso, wie du sie haben wolltest:

    a.navi:link { color: #fff; text-decoration:underline; }

    Genauso gut sichtbar wie der weiße Adler auf weißem Grund (ostfriesische Nationalflagge). Du bist Ostfriese? Nicht, dass ich jetzt Witze über dich machen will …

    Ansonsten ist dein Code ein heilloses Durcheinander von Struktur und Layout:

    • Du verwendest das unsägliche style-Attribut, anstatt die CSS-Angaben ins zentrale Stylesheet zu packen.

    • Du kochst div-Suppe, anstatt vernünftig[tm] auszuzeichnen: z.B. ul bzw. ol für Listen – auch Navigationslisten

    Gruß,
    Gunnar

    --
    „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. IE Prob: Text erst bei Markierung sichtbar

      Sensei
      – Informationen zu den Bewertungsregeln

      Hallo!

      Also ;)

      1. Das style hab ich da nur verwendet, damit ihr alles gleich seht. Das kommt dann nat. schon in ein stylesheet (externes)

      2. Nationalflagge? Adler? Ostfriesland? Wo? Wenn, dann nur zufall.

      3. Der Text der nicht erscheint im IE 6.0 ist das Willkommen (h1), der "klein geschriebene" Absatz direkt darunter ("bei www.bla.at") und das bla bla bla... darunter (also alles im <!-- CONTENT --> Bereich.

      4. Danke für den Hinweis mit den Listen für die Navi. Das werd ich dann umändern!

      cu, hoffe du kannst mir noch (weiter)helfen, Sensei

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. IE Prob: Text erst bei Markierung sichtbar

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hi Sensei,

        1. Das style hab ich da nur verwendet, damit ihr alles gleich seht. Das kommt dann nat. schon in ein stylesheet (externes)

        ?? Warum nicht gleich?

        1. Nationalflagge? Adler? Ostfriesland?

        Otto.

        Wo? Wenn, dann nur zufall.

        An der von mir aufgezeigten Stelle. Nein, Absicht. Fehlerhafte.

        1. Der Text der nicht erscheint im IE 6.0 ist das Willkommen (h1), der "klein geschriebene" Absatz direkt darunter ("bei www.bla.at") und das bla bla bla... darunter (also alles im <!-- CONTENT --> Bereich.

        Bei mir alles Schwarz auf Weiß.

        Gruß,
        Gunnar

        --
        „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. IE Prob: Text erst bei Markierung sichtbar

          Sensei
          – Informationen zu den Bewertungsregeln

          ?? Warum nicht gleich?

          Ok, wäre im Nachhinein egsehen vielleicht besser. Ich tu mir immer leichter zuerst mal zu schauen, was ich wie mach und es am Schluss ordentlich zu struktuieren, zusammenzufassen, ins stylesheet schreiben,...

          1. Nationalflagge? Adler? Ostfriesland?

          Otto.

          Versteh ich nicht was du meinst (bin aus Ö vielleicht versteh ichs deshalb nicht;))...

          An der von mir aufgezeigten Stelle. Nein, Absicht. Fehlerhafte.

          Versteh ich auch nicht...

          Bei mir alles Schwarz auf Weiß.

          Interessant. Im IE 6.0? Oder welche Browser hast du angeschaut?

          Danke, Sensei

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. IE Prob: Text erst bei Markierung sichtbar

            Gunnar Bittersmann Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hi Sensei,

            Ich tu mir immer leichter zuerst mal zu schauen, was ich wie mach und es am Schluss ordentlich zu struktuieren, zusammenzufassen, ins stylesheet schreiben,...

            Doppelte Arbeit. Und der zwischenzeitlich minderwertige Quelltext erschwert jede Fehlersuche.

            1. Nationalflagge? Adler? Ostfriesland?
              Otto.
              Versteh ich nicht was du meinst (bin aus Ö vielleicht versteh ichs deshalb nicht;))...

            Otto Waalkes (ein weißes Taschentuch schwingend): „Ostfriesische Nationalflagge: weißer Adler auf weißem Grund.“

            An der von mir aufgezeigten Stelle. Nein, Absicht. Fehlerhafte.
            Versteh ich auch nicht...

            Was gibt’s daran nicht zu verstehen? In https://forum.selfhtml.org/?t=111151&m=699036 hatte ich auf
                a.navi:link { color: #fff; text-decoration:underline; }
            hingewiesen, wo du Links weiß färbst. Da jeglich Angabe zum Hintergrund fehlt, gilt die Standardeinstellung des Browsers. Und die ist meistens wie?

            Bei mir alles Schwarz auf Weiß.
            Interessant. Im IE 6.0? Oder welche Browser hast du angeschaut?

            IE 6.0 und Mozilla.

            Gruß,
            Gunnar

            --
            „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

  2. IE Prob: Text erst bei Markierung sichtbar

    Frank Opper Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo,

    Ich habe ein (für mich) recht eigenartiges Problem: Der Text einer Seite wird erst sichtbar, wenn man "über die weiße Seite markiert".
    Vorher ist eben alles weiß, dann Mausklick und einmal über die Seite gezogen => Text erscheint!?

    Ich kann den gleichen Effekt erzielen, indem ich die Größe des Browserfensters ändere.

    Ist da wo ein Fehler drin den ich nicht entdeckt habe? Oder hab ich zuviel divs für den IE? Oder liegts an was anderem?

    Das könnte der sog. Guillotine-Bug im IE sein. Du kannst auf die Schnelle zwei Sachen probieren:
    1. Weise dem <p> explizit eine Zeilenhöhe zu.
    2. Setze eine Hintergrundfarbe für <p>.

    Viele Grüße
    Frank

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. IE Prob: Text erst bei Markierung sichtbar

      Sensei
      – Informationen zu den Bewertungsregeln

      Hallo!

      Danke für deinen Hiwneis.

      1. Weise dem <p> explizit eine Zeilenhöhe zu.
      2. Setze eine Hintergrundfarbe für <p>.

      Funktioniert leider beides nicht. Ich habe auchz schon gegoogelt zum Guillotineeffekt und cih schätze mal der hängt irgendwie mit floats zusammen?

      <div style="clear:both"></div>

      über meiner <h1> funktioniert nicht (und ist auch nicht im Sinne des Layouts).

      Wenn ich selbiges innerhalb vom INFOBOX div schreibe, wird der Text darunter (außerhalb der Infobox) sichtbar.

      das mit dem leeren div wurde auf einer Seite als (nicht schöner) Workaround angegeben.

      Hast du noch andere Vorschläge? Oder handelt es sich evtl. doch nicht um besagten Effekt?

      cu, sensei

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. IE Prob: Text erst bei Markierung sichtbar

        Frank Opper Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo,

        1. Weise dem <p> explizit eine Zeilenhöhe zu.
        2. Setze eine Hintergrundfarbe für <p>.

        Funktioniert leider beides nicht. Ich habe auchz schon gegoogelt zum Guillotineeffekt und cih schätze mal der hängt irgendwie mit floats zusammen?

        Sorry, hab' mich mit den beiden Hinweisen vertan. Trotzem habe ich eine mögliche Lösung:

        In Zeile 43 machst Du ein <div> auf, das sowohl das nach links floatende Submenu als auch den Content-Bereich umfasst. Ich habe diesem <div> mit line-height: 1em eine Zeilenhöhe gegeben. Daraufhin wird der Text dargestellt.

        <div style="clear:both"></div>

        über meiner <h1> funktioniert nicht (und ist auch nicht im Sinne des Layouts).

        Das einzige clear:both, das ich im Quelltext sehe, ist unterhalb von <h1>.

        Viele Grüße
        Frank

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. IE Prob: Text erst bei Markierung sichtbar

          Sensei
          – Informationen zu den Bewertungsregeln

          Danke, das mit der Höhenangabe war tatsächlich der entscheidende Hinweis wie ich in der anderen Antwort auch geschrieben habe!

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

  3. PROBLEM GELÖST

    Sensei
    – Informationen zu den Bewertungsregeln

    Hallo!

    Ich habe die Lösung gefunden, danke vielmals für die Hinweise! Es schien sich tatsächlich um den Guillotine Bug zu handeln. Holly's Hack hat weitergeholfen (<p>, <h1>, <div>,... innerhalb eines Floats bekommen height:1%).

    Der Code im Content der funktioniert (zusäctzlich hab ich auch das Prob mit der Infobox hinbekommen) ist dann:

    -------------------

    <div style="margin-left: 190px; padding:10px; font-family:Tahoma,Verdana,Sans-Serif; font-size:10pt; line-height: 20px;">
     <!-- CONTENT starts -->
     <h1 style="height:1%;font-family:'Arial Narrow',Tahoma,Sans-Serif; font-size:22pt; margin-top:6px; margin-bottom:0px;">Willkommen</h1>
     <p style="height:1%;font-family:Tahoma,Sans-Serif; font-size:8pt; margin-top:0px; margin-bottom:10px;">bei www.bla.at</p>
     <p style="background-color:#fff;height:1%">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>

    <!-- INFOBOX starts -->
     <div style="height:1%; border:1px solid #aaa;background-color:#eee;padding:5px;text-align:right;">
      <img src="img/sonne_150x150t.PNG" width="150" height="150" style="border:1px solid #000;float:right;margin-left:6px;">
      <p style="height:1%">Handbuch!<br>Nicht vergessen!</p>
      <br style="clear:right;">
     </div>
     <!-- INFOBOX ends -->
     <p style="height:1%">bla bla bla bla bla bla bla</p>

    </div>

    ---------------------------

    Danke nochmal, cu, Sensei

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln