nicht angemeldet
IE Bug, border des dahinterliegenden Elements scheint durch
0 0 0 0
0 Meine "Lösung" des Problems
IE Bug, border des dahinterliegenden Elements scheint durch
Moinsen
ich habe ein Problem mit einem IE Bug und vielleicht hatte das schonmal jemand und hat ihn schon gelöst.
Seitenaufbau: Text und Menus befinden sich in einer gemeinsamen Box (id="box1") welche eine rote border hat. Der Text soll in die Mitte, nach links kommen die internen Links und rechts die externen. Die boxen links und rechts werden auf die Seiten gefloatet und relativ positioniert, wodurch sie dann über der roten border von "box1" liegen.
Auf der linken Seite habe ich die td der Links mit einem simplen background-hover belegt. Leider kommt da dann auch immer ungebeten die rote border mit durch. Sobald man scrollt verschwindet sie wieder, um beim nächsten hover wieder aufzutauchen.
Allerdings (ich habe lange gebraucht um das herauszufinden): Das passiert nur, wenn die <div id="right"> ebenfalls vorhanden ist. Sobald ich die rechte Box herausnehme funktioniert alles normal.
Kennt das jemand?
Gruss,
Troubadix.
<?xml version="1.0" encoding="utf-8" ?>
<!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>
<title>border</title>
<style type="text/css">
#box1 {
border:solid 1px #990000;
position:relative;
margin:0 0 0 5em;
width:500px;
height:200px;
}
#links td {
background-color:#aaa;
width:200px;
border:solid 1px #000;
text-align:left;
}
#links td:hover {
background-color:#bbb;
}
#links a:hover {
color:#fff;
}
.whi {
margin:auto;
margin-top:5px;
padding:5px;
width:210px;
border:solid 1px black;
background-color:#fff;
}
#left {
padding-top:10px;
float:left;
position:relative;
right:20px;
width:210px;
text-align:center;
}
#right {
padding-top:10px;
float:right;
position:relative;
left:20px;
width:210px;
text-align:center;
}
* html .whi {
width:220px;
}
</style>
</head>
<body>
<div id="box1">
<div id="left">
<div class="whi">
<table id="links">
<tr><td><a href="border.html">link1</a></td></tr>
<tr><td><a href="border.html">link2</a></td></tr>
</table>
</div>
</div>
<div id="right">
<div class="whi">
<table id="links">
<tr><td><a href="border.html">link1</a></td></tr>
<tr><td><a href="border.html">link2</a></td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
-
hallo,
Auf der linken Seite habe ich die td der Links mit einem simplen background-hover belegt.
Du hast etwas DIV-Suppe angerührt und deine Links völlig unmotiviert in Tabellen gestopft. Entferne bitte die Tabellen und wenigstens eins deiner verschachtelten DIVs.
Leider kommt da dann auch immer ungebeten die rote border mit durch.
Wenn schon, dann wäre es _der_ border, also der Rand.
Allerdings [...] Das passiert nur, wenn die <div id="right"> ebenfalls vorhanden ist. Sobald ich die rechte Box herausnehme funktioniert alles normal.
Dein Problem ist nicht nachvollziehbar, weder mit IE6 noch mit IE7. Es sieht so aus, wie du es vermutlich gewünscht hast - auch in Opera, Firefox, Safari und Konqueror.
Grüße aus Berlin
Christoph S.
-
hallo,
Auf der linken Seite habe ich die td der Links mit einem simplen background-hover belegt.
Du hast etwas DIV-Suppe angerührt und deine Links völlig unmotiviert in Tabellen gestopft. Entferne bitte die Tabellen und wenigstens eins deiner verschachtelten DIVs.
Leider kommt da dann auch immer ungebeten die rote border mit durch.
Wenn schon, dann wäre es _der_ border, also der Rand.
Allerdings [...] Das passiert nur, wenn die <div id="right"> ebenfalls vorhanden ist. Sobald ich die rechte Box herausnehme funktioniert alles normal.
Dein Problem ist nicht nachvollziehbar, weder mit IE6 noch mit IE7. Es sieht so aus, wie du es vermutlich gewünscht hast - auch in Opera, Firefox, Safari und Konqueror.
Grüße aus Berlin
Christoph S.
Die Divs haben im Layout der entgültigen Seite schon ihre Berechtigung. Unten nochmal dasselbe mit einer Schachtel weniger.
Das mit den Tabellen: Nungut, wenn das die Lösung sein sollte, ... ich find die <td> einfacher zu kontrollieren, als <li>.
Dass Du es nicht nachvollziehen kannst wundert mich. Sowohl im IE6 als auch im IE7 kommt beim überfahren mit der Maus der rote border zum Vorschein (in den linken Links). In Opera und Firefox nicht, Safari und Konqueror hab ich nicht ausprobiert.
Von mir aus auch der border, soll mir recht sein, solange er hinter dem vor ihm liegenden Element bleibt.
Grüsse aus Hamburg
<?xml version="1.0" encoding="utf-8" ?> <!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> <title>border</title> <style type="text/css"> #box1 { border:solid 1px #990000; position:relative; margin:0 0 0 5em; width:500px; height:200px; } #links td { background-color:#aaa; width:200px; border:solid 1px #000; text-align:left; } #links td:hover { background-color:#bbb; } #links a:hover { color:#fff; } #left { padding-top:10px; float:left; position:relative; right:40px; width:210px; text-align:center; } #right { padding-top:10px; float:right; position:relative; left:40px; width:210px; text-align:center; } * html .whi { width:220px; } </style> </head> <body> <div id="box1"> <div id="left"> <table id="links"> <tr><td><a href="border2.html">link1</a></td></tr> <tr><td><a href="border2.html">link2</a></td></tr> </table> </div> <div id="right"> <table id="links"> <tr><td><a href="border2.html">link1</a></td></tr> <tr><td><a href="border2.html">link2</a></td></tr> </table> </div> </div> </body> </html>-
hallo,
Auf der linken Seite habe ich die td der Links mit einem simplen background-hover belegt.
Du hast etwas DIV-Suppe angerührt und deine Links völlig unmotiviert in Tabellen gestopft. Entferne bitte die Tabellen und wenigstens eins deiner verschachtelten DIVs.
Leider kommt da dann auch immer ungebeten die rote border mit durch.
Wenn schon, dann wäre es _der_ border, also der Rand.
Allerdings [...] Das passiert nur, wenn die <div id="right"> ebenfalls vorhanden ist. Sobald ich die rechte Box herausnehme funktioniert alles normal.
Dein Problem ist nicht nachvollziehbar, weder mit IE6 noch mit IE7. Es sieht so aus, wie du es vermutlich gewünscht hast - auch in Opera, Firefox, Safari und Konqueror.
Grüße aus Berlin
Christoph S.
Jou, Du hattest Recht. Der IE hält es nicht aus, dass im <tr>Element nur ein einziges <td> vorkommt.
Tja, dann hab ich wohl erstmal ne Menge Arbeit vor mir :-(.Aber danke, ich hätte gedacht das wäre kein Problem. Tidy mäkelt schliesslich auch nicht rum deswegen.
-
Jou, Du hattest Recht. Der IE hält es nicht aus, dass im <tr>Element nur ein einziges <td> vorkommt.
Tja, dann hab ich wohl erstmal ne Menge Arbeit vor mir :-(.Aber danke, ich hätte gedacht das wäre kein Problem. Tidy mäkelt schliesslich auch nicht rum deswegen.
Tja, zu früh gefreut. Auch wenn ich statt der Tabelle und ihren <td> das Element <div> verwenden (was ja soweit ich das überblicke für ein dynamisches Menu in typo3 notwendig ist) scheint der border beim drüberfahren durch.
Egal für heute, ab ins Bett.
-
-
hallo,
sei bitte so gut, "full quotings" zu unterlassen. Zitiere aus dem posting, auf das du antworten möchtest, bitte immer ausschließlich die Zeilen, die tatsächlich relevante Aussagen enthalten, auf die du reagierst.
Im übrigen kann der IE (6, 7 und 8beta) durchaus mit Tabellen umgehen. Es ist für mich ganz einfach nicht nachvollziehbar, wo du dein "Problem" siehst. Ich habe deinen Code natürlich 1:1 kopiert und auf meinem Rechner durchgespielt, dazu hast du ihn ja korrekterweise angegeben. Ist zwar bissel viel Code, den du gepostet hast, aber das geht in Ordnung.
Ich kann nur wiederholen, daß ich dein "Problem" in keinem meiner Browser zu sehen bekomme. Wenn es bei dir aber so ist, wie du beschreibst, dann mach doch mal einen Screenshot von einer "fehlerhaften" Anzeige.
Ich würde zwar an die Lösung einer solchen Layout-Idee völlig anders herangehen, aber das spielt keine Rolle. _Du_ hast ein Problem festgestellt, das _ich_ aber leider mit dem identischen Code nicht nachgebaut kriege. Daher macht es auch vorerst noch keinen Sinn, ausführlicher in deiner CSS herumzustochern, selbst wenn sich das eigentlich anbietet.
Grüße aus Berlin
Christoph S.
-
Ich kann nur wiederholen, daß ich dein "Problem" in keinem meiner Browser zu sehen bekomme. Wenn es bei dir aber so ist, wie du beschreibst, dann mach doch mal einen Screenshot von einer "fehlerhaften" Anzeige.
Hallo, falls noch jemand anwesend ist und diesen Strang verfolgt, hier die Screenshots:
Die falsche Darstellung während_und_nach_dem_hover:
Im folgenden die Darstellung, wie sie vor hover ist und eigentlich hinterher auch bleiben sollte:
Grüsse aus Hambuich
-
hallo,
falls noch jemand anwesend ist und diesen Strang verfolgt
Vermutlich gibt es eine ganze Reihe Mitleser.
hier die Screenshots
Ja, das macht es deutlicher. Es hilft aber nichts: ich kann das mit deinem Code nicht nachstellen bzw. nachvollziehen, bei mir sieht es immer so aus, wie du es gerne haben möchtest. Allerdings habe ich dein DIV "whi" entfernt und deine Tabellen in Listen umgewandelt.
Ich habe dir bereits geraten, die Tabellen zu entfernen, da sie sowieso zweckentfremdet eingesetzt werden. Es gibt einen zusätzlichen Fehler: du verwendest zwei Tabellen, teilst aber beiden dieselbe ID zu. Das ist invalider Code. IDs sind eben deshalb IDs, weil sie genau ein einzigesmal für ein HTML-Element vergeben werden dürfen.
Grüße aus Berlin
Christoph S.
-
Hey
Ja, das macht es deutlicher. Es hilft aber nichts: ich kann das mit deinem Code nicht nachstellen bzw. nachvollziehen, bei mir sieht es immer so aus, wie du es gerne haben möchtest.
Das hat mich sehr gewundert, deshalb habe ich gedacht es liegt an meinem IE und es auf einem zweiten Computer ausprobiert und hatte denselben Effekt. Der border kommt durch.
Ich habe dir bereits geraten, die Tabellen zu entfernen, da sie sowieso zweckentfremdet eingesetzt werden. Es gibt einen zusätzlichen Fehler: du verwendest zwei Tabellen, teilst aber beiden dieselbe ID zu.
Sorry für das mit den ids, Schlampigkeitsfehler in der Verzweiflung. Ich habe das ganze nochmal in einer zweiten Version mit Listen (Code unten) und in einer dritten mit div für jeden einzelnen link nachgebaut. Ausserdem den CSS-Code ein bisschen entrümpelt. Der Effekt bleibt immer derselbe.
Ausserdem liegt es nicht an dem background-hover (den hab ich inzwischen entfernt), es passiert in dem Moment, in dem die Links überfahren werden.
Wenn man dagegen den a:hover entfernt bleibt der border beim überfahren des Links wo er sein soll und tritt allerdings während des anklickens des Links kurz zum Vorschein.Und nochwas: Wenn man den rechten Teil (div id="right") herausnimmt funktioniert alles wie gewollt.
Grüsse aus Hambuich und Danke für die Mühe,
Nils.
<html> <head> <title>border</title> <style type="text/css"> #box1 { border:solid 1px #900; position:relative; margin:0 0 0 7em; width:500px; height:400px; } .menu1 li { background-color:#aaa; width:200px; border:solid 1px #000; margin-top:5px; } .menu1 a:hover { color:#fff; } #left { float:left; position:relative; right:140px; width:210px; } #right { float:right; position:relative; left:40px; width:210px; } </style> </head> <body> <div id="box1"> <div id="left"> <ul class="menu1"> <li><a href="border4.html">link1</a></li> <li><a href="border4.html">link2</a></li> </ul> </div> <div id="right"> <ul class="menu1"> <li><a href="border4.html">link3</a></li> <li><a href="border4.html">link4</a></li> </ul> </div> </div> </body> </html>-
hallo,
Der Effekt bleibt immer derselbe.
Dann überprüfe deine Hover-Effekte. Du tauschst bei hover lediglich die Schriftfarbe, aber du mußt natürlich auch noch die Hintergrundfarbe neu definieren.
.menu1 a:hover {
color:#fff;background-color:#aaa;
}
Grüße aus Berlin
Christoph S.
-
Dann überprüfe deine Hover-Effekte. Du tauschst bei hover lediglich die Schriftfarbe, aber du mußt natürlich auch noch die Hintergrundfarbe neu definieren.
.menu1 a:hover {
color:#fff;
background-color:#aaa;
}Tja, dieser Tipp bringt wirklich Bewegung in die Sache. Zwar ist das Problem im Layout mit den Tabellen nicht gelöst, aber etwas weniger auffällig.
In dem von Dir empfohlenen Listen-Layout sowie in dem <div> Layout (brauche ich langfristig wegen typo3-Umgebung) kommt der border nicht mehr durch.
Allerdings zeigt der IE (im Gegensatz zu den anderen browsern) in diesen beiden Fällen auch nicht den background-hover. Aber das wird ein anderes Thema.Danke Christoph, Problem (noch) nicht gelöst, aber doch weitergebracht.
Grüsse nach Berlin.
-
-
-
-
-
-
-
-
Ich habe das Problem jetzt gelöst, indem ich den linken (durchbrechenden) border herausgenommen und durch ein 1px breites background-image:repeat-y ersetzt habe. Ich weiss, dass das nicht die eleganteste Lösung ist, aber sie funktioniert erstmal.
Danke Christoph für Deine Mühe.