nicht angemeldet
IE 8 seltsam
MudGuardHallo!
Ich habe folgende HTML Konstruktion:
<a href="./some.htm" class="doExpand"><div>Mehr</div>
<form action="">Some Text:
<ul>
<li>bla1</li>
<li>bla2</li>
</ul>
</form>
</a>
und folgende CSS Definitionen:
form {
display:none;
}
.doExpand:hover form {
font-size:1em;
font-weight:normal;
padding:1px;
margin:0;
color:#808080;
display:block;
}
Soweit funktioniert das auch (wenn der link gehovert wird, wird das eingebettete Formular sichtbar).
Leider gibt es beim IE im Folgenden einen Problem, da (falls das Formular mit mehr Inhalt befüllt ist und scrolling notwendig wird) mögliches Scrolling stets zurück zum Anker (a tag) zurückspringt. Ich vermute, dass dieses Buggy ist, weil ein reload der Seite im IE das Problem behebt (FF 2/3, Opera 9, Safari und Iron funktionieren sofort...)
Ist aber kein Scrolling erforderlich (kleine form), so tritt der Fehler auch nicht auf.
Nun wollte ich folgendes machen, um das Problem zu lösen:
Definition für kleine Formulare, die kein Scrolling erzeugen:
<a href="./some.htm" class="doExpand"><div>Mehr</div>
<form action="">Some Text:
<ul>
<li>bla1</li>
<li>bla2</li>
</ul>
</form>
</a>
Große Formulare (mit scrolling) erhalten ein title Attribut:
<a href="./some.htm" class="doExpand"><div>Mehr</div>
<form title="IEspec" action="">Some Text:
<ul>
<li>bla1</li>
<li>bla2</li>
<li>....<</li>
</ul>
</form>
</a>
Generelles CSS bleibt gleich:
form {
display:none;
}
.doExpand:hover form {
font-size:1em;
font-weight:normal;
padding:1px;
margin:0;
color:#808080;
display:block;
}
Hinzugefügt wird conditional CSS (nur wenn IE):
.doExpand:hover form[title=IEspec] {
display:none;
}
Dieses sollte doch nach meiner Meinung dann im IE die Anzeige des Formulars verhindern, wenn title="IEspec" gesetzt ist, oder?
Laut http://www.css3.info/selectors-test/test.html funktioniert E[Attribut=wert] in IE 8. Aber leider nicht in dieser Achse?
Muß ich jetzt wirklich zwei CSS Klassen (es hängt mehr dran, als im Beispiel ersichtlich) definieren, oder kriegt man das Problem anders umschifft?
Bitte helft mir weiter,
Richard
-
Hi!
Ich habe folgende HTML Konstruktion:
<a href="./some.htm" class="doExpand"><div>Mehr</div>
<form action="">Some Text:
<ul>
<li>bla1</li>
<li>bla2</li>
</ul>
</form>
</a>Die solltest Du überarbeiten, denn das <a>-Element darf keine Blockelemente enthalten. off:PP -- "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell) -
Hi,
Hallo!
<a href="./some.htm" class="doExpand"><div>
Das ist schon falsch. a-Elemente (die inline-Elemente sind) dürfen keine block-Elemente (z.B. div, form, ul ...) enthalten.
Leider gibt es beim IE im Folgenden einen Problem,
Garbage In, Garbage Out
Du gibst dem Browser fehlerhaften Code und erwartest ein spezifisches Fehlverhalten - dummerweise hat sich der Browserentwickler für ein anderes Fehlverhalten entschieden.
Korrekt wäre es, wenn der Browser die Seite gar nicht erst rendert - verständlich wäre auch, wenn er das a-Element vor dem div schließt.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Hi Andreas
Das ist schon falsch. a-Elemente (die inline-Elemente sind) dürfen keine block-Elemente (z.B. div, form, ul ...) enthalten.
Kommt natürlich auf den Doctype an. Mit HTML5 wäre es legitim.
Gruß
Ole--
Das Wort Vegetarier kommt aus dem Indianischen und bedeutet: Zu dumm zum Jagen.-
Das ist schon falsch. a-Elemente (die inline-Elemente sind) dürfen keine block-Elemente (z.B. div, form, ul ...) enthalten.
Kommt natürlich auf den Doctype an. Mit HTML5 wäre es legitim.
Richtig, prinzipiell darf a in HTML 5 Blockelemente enthalten, auch form. Allerdings sind Eingabefelder nicht als Nachfahrenelemente von a erlaubt. Sobald das Formular inputs, buttons usw. enthält, ist der Code invalide. Formulare in a-Elementen machen eben keinen Sinn.
Mathias
-
-
-
Hallo,
diese abenteuerliche Verschachtelung brauchst du eigentlich nur für den IE 6, weil der :hover nur bei a kennt. Ich verstehe nicht recht, was du damit bezweckst? Wieso verschachtelst du ein Formular in ein a-Element? Sind da überhaupt Formularelemente drin? Kann man die überhaupt anklicken und das Formular absenden, oder wird da direkt der Link ausgeführt?
Mathias
-
Hallo!
Den Tips folgend habe ich nun das Ganze umgearbeitet und verwende nur noch gestylte inline Elemente. Folgendes ist nun Sachstand:
Ich habe folgende HTML Konstruktion:
<a href="./some.htm" class="doExpand"><span class="button">Mehr</span> <samp>Some Text: <tt class="ul"> <tt class="li">bla1</tt> <tt class="li">bla2</tt> </tt> </samp> </a>und folgende CSS Definitionen:
samp { display:none; } .doExpand:hover samp { font-size:1em; font-weight:normal; padding:1px; margin:0; color:#808080; display:block; }Soweit funktioniert das auch (wenn der link gehovert wird, wird das eingebettete sample sichtbar).
Leider gibt es beim IE im Folgenden einen Problem, da (falls das sample mit mehr Inhalt befüllt ist und scrolling notwendig wird) mögliches Scrolling stets zurück zum Anker (a tag) zurückspringt. Ich vermute, dass dieses Buggy ist, weil ein reload der Seite im IE das Problem behebt (FF 2/3, Opera 9, Safari und Iron funktionieren sofort...)
Ist aber kein Scrolling erforderlich (kleines sample), so tritt der Fehler auch nicht auf.Nun wollte ich folgendes machen, um das Problem zu lösen:
Definition für kleine samples, die kein Scrolling erzeugen:<a href="./some.htm" class="doExpand"><span class="button">Mehr</span> <samp>Some Text: <tt class="ul"> <tt class="li">bla1</tt> <tt class="li">bla2</tt> </tt> </samp> </a>Große samples (mit scrolling) erhalten ein title Attribut:
<a href="./some.htm" class="doExpand"><span class="button">Mehr</span> <samp title="IEspec">Some Text: <tt class="ul"> <tt class="li">bla1</tt> <tt class="li">bla2</tt> <tt class="li">...</tt> </tt> </samp> </a>Generelles CSS bleibt gleich:
samp { display:none; } .doExpand:hover samp { font-size:1em; font-weight:normal; padding:1px; margin:0; color:#808080; display:block; }Hinzugefügt wird conditional CSS (nur wenn IE):
.doExpand:hover samp[title=IEspec] { display:none; }Dieses sollte doch nach meiner Meinung dann im IE die Anzeige des samples verhindern, wenn title="IEspec" gesetzt ist, oder?
Laut http://www.css3.info/selectors-test/test.html funktioniert E[Attribut=wert] in IE 8. Aber leider nicht in dieser Achse?Muß ich jetzt wirklich zwei CSS Klassen (es hängt mehr dran, als im Beispiel ersichtlich) definieren, oder kriegt man das Problem anders umschifft?
Bitte helft mir weiter,
Richard-
Yerf!
Dieses sollte doch nach meiner Meinung dann im IE die Anzeige des samples verhindern, wenn title="IEspec" gesetzt ist, oder?
Laut http://www.css3.info/selectors-test/test.html funktioniert E[Attribut=wert] in IE 8. Aber leider nicht in dieser Achse?Hast du einen vollständigen Doctype definiert oder läuft der IE im Quirksmode?
Gruß,
Harlequin
--
RIP --- XHTML 2
nur die Besten sterben jung-
Hi Harlequin!
Hast du einen vollständigen Doctype definiert oder läuft der IE im Quirksmode?
Du bist mein Held (hast mir echt schon oft weitergeholfen, vielen Dank!)
Die Seite ist Ergebnis einer xml transformation mittels xsl.
Vorher:xml header:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="../xsl/transform.xsl"?>xsl header:
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">Jetzt +xsl:
<xsl:output method="html" encoding="iso-8859-1" doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN" doctype-system="http://www.w3.org/TR/html4/loose.dtd"/>Ich habe zwar jetzt ein paar andere, kleine Probleme, aber ich denke, jetzt wird es, denn zumindest kommt das sytlesheet nun durch.
Nochmals Danke,
Richard
-
-