|
|||
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? |
Sponsored Links |
|
||||
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 |
Sponsored Links |
|
|||
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 |
|
|||
Zitat:
Ich bin mir sicher, dass dies schon der Internet Explorer in Version 6 beherrscht hat.
__________________
Jakob |
|
|||
@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> @jakobm: Ja, er kann beides, aber nicht richtig!? |
|
||||
Zitat:
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 |
|
|||
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.
|
|
|||
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> 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. |
|
|||
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! |
Sponsored Links |
|
||||
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) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |