Gaby: Text klappt auf im Firefox aber nicht im IE

SELF-Forum

Text klappt auf im Firefox aber nicht im IE

Gaby
– Informationen zu den Bewertungsregeln

Hallo,
zu dem folgenden Beispiel habe ich 2 Fragen.
1. Wie kann ich erreichen, dass z.B. im Firefox der Text nicht nach oben rutscht, wenn ich auf "Nähere Informationen" klicke, und dann der Text angezeigt wird. Es sollte weiterhin die Überschrift "Sonderveranstaltung" sichtbar sein.
2. Das Beispiel funktioniert nicht in den IE-Versionen. Wie schaffe ich dies auch für den IE?

<html>  
<title>Test</title>  
<style type="text/css">  
p.versteckt {  
	display: none;  
}  
p:target {  
	display: block;  
}  
</style>  
</head>  
<body>  
<b>Sonderveranstaltung</b><br>  
<b>Termin:</b> 14.3.2012<br>  
Ort: Stadthalle<br>  
<a href="#ID01B" id="ID01A">Nähere Informationen &nbsp;&nbsp;&nbsp;»</a>  
  
<p id="ID01B" class="versteckt">  
<a href="#ID01A"  style="padding-left:0;">« Zurück</a><br>  
Die Veranstaltung ...<br>  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
Eintritt frei.<br>  
  
<a href="#ID01A"  style="padding-left:0;">« Zurück</a><br>  
  
  
<div>       <!--    Nur damit das Problem 2 entsteht    -->  
<b>Noch etwas</b><br>  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
.....................<br>  
</div>  
</body>  
</html>

Schönen Gruß
Gaby

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Text klappt auf im Firefox aber nicht im IE

    Matthias Apsel Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    Om nah hoo pez nyeetz, Gaby!

    * fehlender Doctype schickt die Browser in den Quirksmodus

    * möglicherweise ist dir der Unterschied zwischen display: none; und visibility: hidden; nicht bewusst.

    * <br> sind selten notwendig. Verwende Blockelemente für einen Zeilenumbruch, hier vielleicht

    <h4>Sonderbveranstaltung</h4>  
<dl>  
  <dt>Termin</dt>  
  <dd>14.3.2012</dd>  
  <dt>Ort</dt>  
  <dd>Stadthalle</dd>  
</dl>

    * Sämtliche Formatierungen ins CSS für Hardcore-Semantiker sogar die Doppelpunkte
    dt::after {content: ": ";}

    <a href="#ID01B" id="ID01A">Nähere Informationen &nbsp;&nbsp;&nbsp;»</a>

    * seitliche Innenabstände mit padding umsetzen

    <p id="ID01B" class="versteckt">

    * versteckt soll ja nicht immer versteckt sein, vielleicht ist "details" die bessere Klassenbezeichnung

    <a href="#ID01A"  style="padding-left:0;">« Zurück</a><br>

    * Vermeide inline-stil-Angaben, verwende ein externes style-sheet.

    * Umbrüche kann man durch Breitenangaben steuern.

    Schau dich im selfhtml-wiki um. Da findest du jedem der angesprochenen Punkte weiteres Material.

    Matthias

    --
    1/z ist kein Blatt Papier.

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. Text klappt auf im Firefox aber nicht im IE

      Gaby
      – Informationen zu den Bewertungsregeln

      Om nah hoo pez nyeetz, Gaby!

      * fehlender Doctype schickt die Browser in den Quirksmodus

      * möglicherweise ist dir der Unterschied zwischen display: none; und visibility: hidden; nicht bewusst.

      * <br> sind selten notwendig. Verwende Blockelemente für einen Zeilenumbruch, hier vielleicht

      <h4>Sonderbveranstaltung</h4>

      <dl>
        <dt>Termin</dt>
        <dd>14.3.2012</dd>
        <dt>Ort</dt>
        <dd>Stadthalle</dd>
      </dl>

      
>   
> \* Sämtliche Formatierungen ins CSS für Hardcore-Semantiker sogar die Doppelpunkte  
> dt::after {content: ": ";}  
>   
> > <a href="#ID01B" id="ID01A">Nähere Informationen &nbsp;&nbsp;&nbsp;»</a>  
>   
> \* seitliche Innenabstände mit padding umsetzen  
>   
> > <p id="ID01B" class="versteckt">  
>   
> \* versteckt soll ja nicht immer versteckt sein, vielleicht ist "details" die bessere Klassenbezeichnung  
>   
> > <a href="#ID01A"  style="padding-left:0;">« Zurück</a><br>  
>   
> \* Vermeide inline-stil-Angaben, verwende ein externes style-sheet.  
>   
> \* Umbrüche kann man durch Breitenangaben steuern.  
>   
> Schau dich im [selfhtml-wiki](http://wiki.selfhtml.org) um. Da findest du jedem der angesprochenen Punkte weiteres Material.  
>   
>   
> Matthias  

Hallo Matthias,  
das gezeigte Beispiel entspricht nicht dem Original-HTML.  
Dieses enthält die Doctype-Angabe:  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
 (damit ist der Effekt aber nicht weg, daher habe ich sie hier weggelassen), CSS ist im Original ausgelagert und all die anderen Anmerkungen von Dir sind auch berücksichtigt im Original, das allerdings viel zu groß und damit unübersichtlich ist, um den Effekt zu schildern.  
Deine gut gemeinten Tipps lösen daher leider das Problem nicht.  
Gruß  
Gaby  
 
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Text klappt auf im Firefox aber nicht im IE

        Matthias Apsel Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Om nah hoo pez nyeetz, Gaby!

        Deine gut gemeinten Tipps lösen daher leider das Problem nicht.

        Vermeide TOFU, stelle ein online-Beispiel zur Verfügung (z.B. bplaced.net)

        Matthias

        --
        1/z ist kein Blatt Papier.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. Text klappt auf im Firefox aber nicht im IE

        Beat Homepage des Autors
        – Informationen zu den Bewertungsregeln

        ... und all die anderen Anmerkungen von Dir sind auch berücksichtigt im Original, das allerdings viel zu groß und damit unübersichtlich ist, um den Effekt zu schildern.

        Aber dein Beispiel lässt auf schreckliche Codewüsten schliessen.

        Deine gut gemeinten Tipps lösen daher leider das Problem nicht.

        Wenn du nicht navigieren willst, dann verwende keinen navigierenden Mechanismus.

        Dein Klappfenster lässt sich mit CSS alleine lösen.

        <div class="popup">  
  <span class="label">Ein Label (mehr...)</span>  
  <div class="content">Popup-Inhalt....</div>  
</div>

        .popup .content{display:none}  
.popup:hover .content{display:block}  
/* mit JS */  
.popup label.show .content{display:block}

        Mit Javascript kann man dann noch eine permanenteres Verhalten beibringen.

        var col=querySelectorAll('.popup label');  
for(var i=0;col.length;i++){  
  col[i].onclick=function(){ toggleClass(this,'show') }  
}

        oder ähnlich, je nach Framework

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Text klappt auf im Firefox aber nicht im IE

    Gaby
    – Informationen zu den Bewertungsregeln

    Hallo,
    das Problem, dass es im IE nicht funktioniert, habe ich gelöst mit der sfTarget-Funktion von Suckerfish.
    Offen ist jetzt nur noch:
    Wie kann ich erreichen, dass der Text nicht nach oben rutscht, wenn ich auf "Nähere Informationen" klicke, und dann der Text angezeigt wird? Es sollte weiterhin die Überschrift "Sonderveranstaltung" sichtbar sein.
    Es könnte auch so formuliert werden:
    "Springe zum Ziel (das natürlich auf der aktuellen Seite liegen muss) aber verschiebe die aktuelle Zeile (in die geglickt wir) nicht nach oben.

    Schönen Gruß
    Gaby

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln