zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Layout-Fehler im IE 6

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.04.2007, 03:20
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.04.2007
Beiträge: 100
Marlin befindet sich auf einem aufstrebenden Ast
Standard Layout-Fehler im IE 6

Hallo,

ich habe ein Problem mit dem Layout im IE.

Problem: Ich möchte zu Einträgen Infos per JS anzeigen lassen, sobald die Maus über einem Eintrag steht. Dazu habe ich die Zusatzinfos absolut positioniert. In Variante 1 habe die Zusatzinfos per display: none ausgeblendet, in Variante 2 mit visibility: hidden. Im Firefox funktioniert beides erwartungsgemäß richtig. Im IE springt bei Variante 1 nachfolgender Inhalt, sobald die Zusatzbox eingeblendet wird. Bei der zweiten Variante springt zwar nichts, dafür wird der angegebene Abstand (im Beispiel margin-top: 20px) ignoriert. Ich habe keine Ahnung, woran das liegt. Ich meine, der Code ist soweit korrekt.

Ein kleiner Beispielcode:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>

 <script>

 function block(id){
   document.getElementById(id).style.display = "block";
 }

 function disblock(id){
   document.getElementById(id).style.display = "none";
 }

 function visible(id){
   document.getElementById(id).style.visibility = "visible";
 }

 function disvisible(id){
   document.getElementById(id).style.visibility = "hidden";
 }

 </script>


</head>

<body>

<p>Layer mit display:block</p>

<div style="width:160px;background-color:yellow; margin-top:20px">

<span onmouseover="block('sp1a')" onmouseout="disblock('sp1a')">Eintrag 1</span><br />
<span onmouseover="block('sp2a')" onmouseout="disblock('sp2a')">Eintrag 2</span><br />

</div>

<div id="sp1a" style="width:160px;background-color:red; margin-top:24px; position:absolute;display:none">Info zu Eintrag 1a</div>
<div id="sp2a" style="width:160px;background-color:red; margin-top:27px; position:absolute;display:none">Info zu Eintrag 2a</div>


<div style="width:260px;background-color:aqua; margin-top:20px">

Eintrag a nach Info mit margin-top:20px<br />
Eintrag b nach Info mit margin-top:20px<br />

</div>



<p>Layer mit visibility:visible</p>

<div style="width:160px;background-color:yellow; margin-top:20px">

<span onmouseover="visible('sp1b')" onmouseout="disvisible('sp1b')">Eintrag 1b</span><br />
<span onmouseover="visible('sp2b')" onmouseout="disvisible('sp2b')">Eintrag 2b</span><br />

</div>

<div id="sp1b" style="width:160px;background-color:red; margin-top:24px; position:absolute;visibility:hidden">Info zu Eintrag 1b</div>
<div id="sp2b" style="width:160px;background-color:red; margin-top:27px; position:absolute;visibility:hidden">Info zu Eintrag 2b</div>


<div style="width:260px;background-color:aqua; margin-top:20px">

Eintrag a nach Info mit margin-top:20px<br />
Eintrag b nach Info mit margin-top:20px<br />

</div>

</body>

</html>

Interpretiert der IE den Code falsch? Wie kann ich das Problem umgehen?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.04.2007, 03:31
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Bei display:none; scheint der Internet Explorer die Elemente nur nicht anzuzeigen, sie sind aber wohl noch unsichtbar verfügbar..(?) Und sobald das JS sie auf display:block; setzt, scheinen sie dann erst durch die absolute positionierung aus dem Elemente-Fluss gerissen zu werden.

Sehr merkwürdig, wie ich finde.. O.o
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.04.2007, 10:00
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.11.2005
Beiträge: 139
schubidu befindet sich auf einem aufstrebenden Ast
Standard

Tausch doch per JS CSS-Klassen aus. Das macht die Sache flexibler.
__________________
Puls hoch. Preis runter. Auktionen bei TeleBid. Anmelden lohnt sich und kostet nichts.
Hol\' Dir unbedingt noch den 25 Euro Gutschein auf www.telebid.de!
Jetzt anmelden und im Feld Gutscheincode eingeben: Schubidu
Mit Zitat antworten
  #4 (permalink)  
Alt 10.04.2007, 11:40
Neuer Benutzer
neuer user
 
Registriert seit: 21.12.2006
Beiträge: 20
jakobm befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ArcVieh Beitrag anzeigen
Bei display:none; scheint der Internet Explorer die Elemente nur nicht anzuzeigen, sie sind aber wohl noch unsichtbar verfügbar..(?)
display: none zeigt die Elemente erst gar nicht an, während visibility: hidden die Elemente nur komplett dursichtig macht.
Ich bin mir sicher, dass dies schon der Internet Explorer in Version 6 beherrscht hat.
__________________
Jakob
Mit Zitat antworten
  #5 (permalink)  
Alt 10.04.2007, 16:53
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.04.2007
Beiträge: 100
Marlin befindet sich auf einem aufstrebenden Ast
Standard

@schubidu:

Meinst Du in etwa sowas:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>

 <script>

 function block(id){
   document.getElementsByTagName("div")[id].className = "info-display1 info-display-block1";
 }

 function disblock(id){
   document.getElementsByTagName("div")[id].className = "info-display1";
 }

 function visible(id){
   document.getElementsByTagName("div")[id].className = "info-display2 info-display-block2";
 }

 function disvisible(id){
   document.getElementsByTagName("div")[id].className = "info-display2";
 }

 </script>

  <style type="text/css">

  .info-display1 { width:160px;
                  background-color:red;
                  margin-top:24px;
                  position:absolute;
                  display:none; }

  .info-display-block1 {display:block; }

  .info-display2 { width:160px;
                  background-color:red;
                  margin-top:24px;
                  position:absolute;
                  visibility:hidden; }

  .info-display-block2 {visibility:visible; }

  </style>
</head>

<body>

<p>Layer mit display:block</p>

<div style="width:160px;background-color:yellow; margin-top:20px">

<span onmouseover="block('1')" onmouseout="disblock('1')">Eintrag 1a</span><br />
<span onmouseover="block('2')" onmouseout="disblock('2')">Eintrag 2a</span><br />

</div>

<div class="info-display1">Info zu Eintrag 1a</div>
<div class="info-display1">Info zu Eintrag 2a</div>


<div style="width:260px;background-color:aqua; margin-top:20px">

Eintrag a nach Info mit margin-top:20px<br />
Eintrag b nach Info mit margin-top:20px<br />

</div>



<p>Layer mit visibility:visible</p>

<div style="width:160px;background-color:yellow; margin-top:20px">

<span onmouseover="visible('5')" onmouseout="disvisible('5')">Eintrag 1b</span><br />
<span onmouseover="visible('6')" onmouseout="disvisible('6')">Eintrag 2b</span><br />

</div>

<div class="info-display2">Info zu Eintrag 1b</div>
<div class="info-display2">Info zu Eintrag 2b</div>


<div style="width:260px;background-color:aqua; margin-top:20px">

Eintrag a nach Info mit margin-top:20px<br />
Eintrag b nach Info mit margin-top:20px<br />

</div>

</body>

</html>
Das ändert gar nichts an den Fehlern im IE. Das Beispiel war mit Absicht möglichst einfach gewählt, damit es besser nachvollziehbar ist.

@jakobm:

Ja, er kann beides, aber nicht richtig!?
Mit Zitat antworten
  #6 (permalink)  
Alt 10.04.2007, 17:19
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von jakobm Beitrag anzeigen
display: none zeigt die Elemente erst gar nicht an, während visibility: hidden die Elemente nur komplett dursichtig macht.
Ich bin mir sicher, dass dies schon der Internet Explorer in Version 6 beherrscht hat.
Ich weiß..
Allerdings schien das Verhalten nicht grade auszusagen, das er es beherrscht... Und da mich das verwunderte, eben das "(?)".
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #7 (permalink)  
Alt 10.04.2007, 23:00
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Du wirst wahrscheinlich nicht drum herum kommen, auf margin-top zur Positionierung eines absolut positionierten Blocks zu verzichten und stattdessen top: y; left: x; zu benutzen. Dazu musst du mit position:relative + Dimension noch einen Containing Block definieren. Ich würde dabei gleich von px auf em umsteigen. Die absolute Positinierung ohne Offset ist im IE sehr fehlerbehaftet.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #8 (permalink)  
Alt 11.04.2007, 01:05
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.04.2007
Beiträge: 100
Marlin befindet sich auf einem aufstrebenden Ast
Standard Workaround

Ich habe einen Workaround gefunden, mit dem es absolut geht. Das Verhalten des IE ist allerdings ärgerlich, weil bei dem Workaround nachfolgende Elemente ebenfalls absolut positioniert werden müssen, die von der Logik her statisch sind. Ich habe die Lösung jetzt mal nur für die Variante display:block notiert:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>

 <script>

 function block(id){
   document.getElementsByTagName("div")[id].className = "info-display1 info-display-block1";
 }

 function disblock(id){
   document.getElementsByTagName("div")[id].className = "info-display1";
 }

 function visible(id){
   document.getElementsByTagName("div")[id].className = "info-display2 info-display-block2";
 }

 function disvisible(id){
   document.getElementsByTagName("div")[id].className = "info-display2";
 }

 </script>

  <style type="text/css">

  .info-display1 { width:160px;
                  background-color:red;
                  margin-top:24px;
                  position:absolute;
                  display:none; z-index:2}

  .info-display-block1 {display:block; }

  .info-display2 { width:160px;
                  background-color:red;
                  margin-top:24px;
                  position:absolute;
                  visibility:hidden;}

  .info-display-block2 {visibility:visible; }

  </style>
</head>

<body>

<p>Layer mit display:block</p>

<div style="width:160px;background-color:yellow; margin-top:20px">

<span onmouseover="block('1')" onmouseout="disblock('1')">Eintrag 1a</span><br />
<span onmouseover="block('2')" onmouseout="disblock('2')">Eintrag 2a</span><br />

</div>

<div class="info-display1">Info zu Eintrag 1a</div>
<div class="info-display1">Info zu Eintrag 2a</div>


<div style="width:260px;background-color:aqua; margin-top:20px;position:absolute;z-index:1">

Eintrag a nach Info mit margin-top:20px<br />
Eintrag b nach Info mit margin-top:20px<br />

</div>


<!-- Workaround, um <p>Layer mit visibility:visible</p> anzuzeigen
<p style="margin-top:80px;">Layer mit visibility:visible</p>
-->
<p>Layer mit visibility:visible</p>

<div style="width:160px;background-color:yellow; margin-top:20px">

<span onmouseover="visible('5')" onmouseout="disvisible('5')">Eintrag 1b</span><br />
<span onmouseover="visible('6')" onmouseout="disvisible('6')">Eintrag 2b</span><br />

</div>

<div class="info-display2">Info zu Eintrag 1b</div>
<div class="info-display2">Info zu Eintrag 2b</div>


<div style="width:260px;background-color:aqua; margin-top:20px;">

Eintrag a nach Info mit margin-top:20px<br />
Eintrag b nach Info mit margin-top:20px<br />

</div>

</body>

</html>
Indem die Info-Boxen und die nachfolgenden Inhalte, die immer angezeigt werden sollen, absolut positioniert werden, überlappen sie sich. Ohne weitere "Spezialbehandlung" würden die Info-Einträge von dem nachfolgenden Inhalt überdeckt. Durch verschiedene z-Ebenen kann man die Infos in den Vordergrund holen.

Die Zeile <p>Layer mit visibility:visible</p> wird mit dem angegebenen Code nicht (sichtbar) dargestellt. Durch Verschiebung (siehe auskommentierte Zeile) wird sie sichtbar.

Der Fehler ist nervig, weil er die ganze Struktur des HTML-Codes zerstört. Eigentlich sollen den Eintragsboxen Klassen mit statischer Positionierung zugewiesen werden, die, damit sie einen Abstand zueinander haben, mit margin-top formatiert werden sollen. Jetzt muß ich diese Klassen umstellen. Ich hoffe, dann funktioniert es noch einwandfrei. Leider kann ich die Website nicht live demonstrieren, weil ich sie zur Zeit nur lokal auf der HD habe.

Hat jemand die Möglichkeit, den von mir als erstes geposteten Code mit dem IE 7 zu testen? Ist das Verhalten hier dasselbe, daß bei den ersten Einträgen die erste türkise Box zurückspringt und bei den zweiten der Abstand nach oben ignoriert wird? Das wäre sehr hilfreich zu wissen, weil ich im Moment keinen IE 7 installiert habe.
Mit Zitat antworten
  #9 (permalink)  
Alt 13.04.2007, 01:33
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 10.04.2007
Beiträge: 100
Marlin befindet sich auf einem aufstrebenden Ast
Standard Wer kann den Code mit IE 7 testen?

Hallo,

gibt es denn hier keinen, der den IE 7 installiert hat und bereit ist, mal kurz durchzuprobieren!?

Ich selber möchte den IE 7 nicht installieren, weil ich den IE 6 virensicher konfiguriert habe und nicht wieder von vorne anfangen möchte, die Schotten abzudichten.

Schon mal danke, falls sich jemand findet, mir ein kurzes Testergebnis mitzuteilen!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 13.04.2007, 01:54
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Ach huch, tut mir leid, ganz großes Edit. ^^"
Im Thread vertan..

http://img443.imageshack.us/img443/4655/ie7lv4.jpg
Hier ein Screen, so verhält es sich überall. Wenn ich über den zweiten Link fahre, blendet sich das sp1 aus und stattdessen erscheint genau da der sp2 und oben genauso, er scheint sich an das margin zu halten.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe

Geändert von ArcVieh (13.04.2007 um 02:21 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
css layout, wo könnte der fehler sein christine CSS 17 27.10.2009 14:12
fehler in meinen css layout - hoffe jmd kann helfen newbie2k7 CSS 9 07.09.2007 18:09
Noch ein paar kleine Fehler im Layout... silvia CSS 5 29.12.2006 21:13
Rätselhafter Layout multiplikator Fehler mit IE im dedi Philippp Offtopic 0 06.01.2005 15:07


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:47 Uhr.