Opera macht eine seltsame Darstellung eines "komplexen" Links

[SelfDog]

Hallo,

"komplexer" Link bedeutet etwa folgender Aufbau:

<a id="ID" href="HREF">
        <div class="box"></div><div class="text">LINKTEXT</div>
        <div class="info">LINKBESCHREIBUNG</div>
      </a>

Das ganze wird dann wunderbar mittels CSS formatiert und das Ergebnis
habe ich mal zur Freude aller Code-in-SelfHTML-Poster-Hasser einfach
mal online gestellt:

http://sveni.dnsalias.net/forum/cssproblem.htm

Mozilla, IE und Opera stellen es bei mir wie erwünscht dar. Auch das
korrekte Verhalten beim Hovern eines Links kann man bei Mozilla und
IE wie gewünscht betrachten. Ganz anders handelt Opera: Er legt ein
höchst seltenes Verhalten an den Tag.

Ich glaube, wenn ich es jetzt ausführlichst beschreibe, bringt es
keinem was. Ich habe es mit Opera7.x getestet, und er handelt immer
gleich.

Kann mir jemand helfen? Hat jemand eine Idee, was ich machen muss,
damit die Links beim Hovern im Opera so aussehen, wie bei Mozilla und
IE?

Vielen Dank,

SelfDog

[Tobias Kloth]

Hallo WauWau,

<a id="ID" href="HREF">
        <div class="box"></div><div class="text">LINKTEXT</div>
        <div class="info">LINKBESCHREIBUNG</div>
      </a>

das ist kein gültiges html - a darf nur inline-Elemente enthalten, div ist aber ein block-level-Element.

Mozilla, IE und Opera stellen es bei mir wie erwünscht dar. [...] Ganz anders handelt Opera:

was denn jetzt :-)

Er legt ein höchst seltenes Verhalten an den Tag.

definierte "höchst seltenes Verhalten".

Grüße aus Nürnberg
Tobias

[Selfdog]

Hallo Tobias,

<a id="ID" href="HREF">
        <div class="box"></div><div class="text">LINKTEXT</div>
        <div class="info">LINKBESCHREIBUNG</div>
      </a>
das ist kein gültiges html - a darf nur inline-Elemente enthalten, div ist aber ein block-level-Element.

Stimmt, du hast recht...

Nun, bezüglich blockelement in inline: Wenn ich jetzt statt den <div>'s <span>'s hinschreiben würde, und diese im CSS auf display: block; setzten würde, wäre es zwar höchstwahrscheinlich so, wie ich es gerne hätte, aber andererseits.... wäre es 100%ig-logisch auch nicht "korrektes HTML", da das Inline-element <span> ja im CSS zu einem Block-Element "umgewandelt" wurde, was wiederum kein korrekter Code ist.

Mozilla, IE und Opera stellen es bei mir wie erwünscht dar. [...] Ganz anders handelt Opera:
was denn jetzt :-)

...Was schreibe ich denn da für einen Mist? Also, ich meine:

- Mozilla, IE und Opera stellen die Seite richtig dar.
  - Beim Hovern der Links verhalten sich Mozilla und IE wie gewünscht.
  - Opera verhält sich beim hovern der Links _nicht_ wie gewünscht.

Er legt ein höchst seltenes Verhalten an den Tag.
definierte "höchst seltenes Verhalten".

Damit meine ich folgendes:

+----------------------------------------------------+
  |             |  LINKTEXT                            |
  | BILD        |  Linkbeschreibung                    |
  +----------------------------------------------------+

so wird ja ein Link dann dargestellt.

Beim "Normal"-State des Links (:link, :visited) wird _nur_ der LINKTEXT dargestellt, perfekt in allen Browsern.

Beim "Hover"-State des Links (:hover; :active, :focus) _soll_ die Linkbeschreibung angezeigt werden, darüberhinaus das Bild links (als background-image) sowie ein rahmen rechts, ein anderes hintergrundbild, usw. usw. (siehe datei). Mozilla und IE machen das _richtig_.

Opera nicht. Denn wenn man bei Opera den Mauszeiger auf "LINKTEXT" setzt, dann wird nur dass nach der im CSS eingestellten Formatierung formatiert. Beim Hovern von "Linkbeschreibung" wird es auch so formatiert (also eingeblendet), beim Verlassen wird es nicht ausgeblendet. Das Bild links sowie der Rahmen wird nur eingeblendet, wenn man den Mauszeiger darauf hält.

Opera unterscheided anscheinend zwischen den einzelnen elemten da drin (wo man seine maus drauf hat), IE und Mozilla tun das nicht. Wie muss ich mein CSS verändern, damit opera sich wie gewünscht - und zwar wie Mozilla und IE - verhalten?

Vielen Dank,

SelfDog|WauWau

[MudGuard]

Hi,

Nun, bezüglich blockelement in inline: Wenn ich jetzt statt den <div>'s <span>'s hinschreiben würde, und diese im CSS auf display: block; setzten würde, wäre es zwar höchstwahrscheinlich so, wie ich es gerne hätte, aber andererseits.... wäre es 100%ig-logisch auch nicht "korrektes HTML", da das Inline-element <span> ja im CSS zu einem Block-Element "umgewandelt" wurde, was wiederum kein korrekter Code ist.

Nein.

Es muß hier klar zwischen HTML und CSS unterschieden werden.

Bei HTML gibt es Verschachtelungsregeln, die festlegen, welche Elemente in welchen anderen Elementen benutzt werden dürfen.

Um nicht jedesmal alle Elemente einzeln aufzählen zu müssen, gibt es in der HTML 4.01-DTD die Parameter-Entities %inline; und %block;
Diese "definieren", was in HTML als inline- und was als block-Element gilt.

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">

(wie man sieht, enthalten die beiden Parameter-Entities weitere Parameter-Entities, aber auch einige Elementnamen direkt)

Komplett aufgelöst ergibt sich für inline:
#PCDATA | TT | I | B | BIG | SMALL | EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM| A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO | INPUT | SELECT | TEXTAREA | LABEL | BUTTON

und für block:
P | H1|H2|H3|H4|H5|H6 | UL | OL | PRE | DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS

Wie diese Elemente letztendlich (per CSS) dargestellt werden, hat keinerlei Einfluß darauf, ob es sich um valides HTML handelt.
HTML beschreibt ja auch (im Idealfall) nur die Struktur des Dokumentes, nicht sein Aussehen.

Daß die inline-Elemente von HTML per Browservoreinstellung meist (hab jetzt keine Lust, das nachzuprüfen, daher vorsichtshalber "meist") auch die CSS-Eigenschaft display:inline besitzen und die block-Elemente aus HTML meist  auch eine der für CSS-blocklevel-Elemente notwendige display-Eigenschaft (block, table, list-item, run-in, compact), ist mehr oder weniger geplanter Zufall ;-)

cu,
Andreas

[WauWau]

Hallo MudGuard,

Nun, bezüglich blockelement in inline: Wenn ich jetzt statt den <div>'s <span>'s hinschreiben würde, und diese im CSS auf display: block; setzten würde, wäre es zwar höchstwahrscheinlich so, wie ich es gerne hätte, aber andererseits.... wäre es 100%ig-logisch auch nicht "korrektes HTML", da das Inline-element <span> ja im CSS zu einem Block-Element "umgewandelt" wurde, was wiederum kein korrekter Code ist.

Nein.

Jep. War auch nur so eine .... stumpfsinnige Idee ;-) - schon klar.

Es muß hier klar zwischen HTML und CSS unterschieden werden.

hmmm.... genau. UNd ich habe da oben einfach mal alles zusammengeworfen und sozusagen ein resultierendes "modell" überlegt, bei dem ja letztenendes wieder ein blockelement in einem inlineelement wäre. ist aber auch egal.

Um nicht jedesmal alle Elemente einzeln aufzählen zu müssen, gibt es in der HTML 4.01-DTD die Parameter-Entities %inline; und %block;
Diese "definieren", was in HTML als inline- und was als block-Element gilt.

Das DTD ist schön, nicht wahr? Habe ich auch schon mal durchgestöbert (Nicht genau "das", sondern ein anderes)

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % block
     "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
Komplett aufgelöst ergibt sich für inline:
#PCDATA | TT | I | B | BIG | SMALL | EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM| A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO | INPUT | SELECT | TEXTAREA | LABEL | BUTTON
P | H1|H2|H3|H4|H5|H6 | UL | OL | PRE | DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS

Wie schön, dass es copy'n'paste gibt ;-) *bg*

Wie diese Elemente letztendlich (per CSS) dargestellt werden, hat keinerlei Einfluß darauf, ob es sich um valides HTML handelt.
HTML beschreibt ja auch (im Idealfall) nur die Struktur des Dokumentes, nicht sein Aussehen.

jep.

Daß die inline-Elemente von HTML per Browservoreinstellung meist (hab jetzt keine Lust, das nachzuprüfen, daher vorsichtshalber "meist") auch die CSS-Eigenschaft display:inline besitzen und die block-Elemente aus HTML meist  auch eine der für CSS-blocklevel-Elemente notwendige display-Eigenschaft (block, table, list-item, run-in, compact), ist mehr oder weniger geplanter Zufall ;-)

Vielleicht auch absichtlich geplanter Zufall!? ;-).... es wird wohl so sein - bzw. es müsste wohl so sein.

WauWau

[Maxx]

Hallo,

<a id="ID" href="HREF">
        <div class="box"></div><div class="text">LINKTEXT</div>
        <div class="info">LINKBESCHREIBUNG</div>
      </a>

<a> als inline-Element darf keine blocklevel-elemente <div> enthalten. Valider Code wird sich dann auch so verhalten wie du es erwartest.

Grüße,

Jochen

[WauWau]

Hallo Maxx,

<a> als inline-Element darf keine blocklevel-elemente <div> enthalten. Valider Code wird sich dann auch so verhalten wie du es erwartest.

So, jetzt habe ich die <div>'s alle zu <span>'s gemacht und sie anschließend im CSS mittels

a span {
  display: block;
}

wieder zu <div>'s transformiert ;-) [....]

Also, es geht immer noch nicht.

Hat sonst nochjemand eine Idee?

WauWau

[Maxx]

Hallo ...

So, jetzt habe ich die <div>'s alle zu <span>'s gemacht und sie anschließend im CSS mittels

a span {
  display: block;
}
wieder zu <div>'s transformiert ;-) [....]

Folgendes aus [pref:t=79396&m=459911] stammt doch von dir?

Wenn ich jetzt statt den <div>'s <span>'s hinschreiben würde,
  und diese im CSS auf display: block; setzten würde, wäre es
  zwar höchstwahrscheinlich so, wie ich es gerne hätte, aber
  andererseits.... wäre es 100%ig-logisch auch nicht "korrektes
  HTML", da das Inline-element <span> ja im CSS zu einem Block-
  Element "umgewandelt" wurde, was wiederum kein korrekter Code
  ist.

Also, es geht immer noch nicht.

Wie du selbst sagst ... es ist kein korrektes Markup.

Hat sonst nochjemand eine Idee?

Ein anderes Design?

Grüße,

Jochen

[WauWau]

Hallo Maxx,

Folgendes aus [pref:t=79396&m=459911] stammt doch von dir?

ja.

Wenn ich jetzt statt den <div>'s <span>'s hinschreiben würde,
  ....

Also, es geht immer noch nicht.
Wie du selbst sagst ... es ist kein korrektes Markup.

Hmm... Ausschnitt aus dem CSS:

a {
        display: block;
        .... }

Doch, ist es dann wieder doch ;-) <a> habe ich ja zum Blockelement gemacht, dann wäre es in sich nicht falsch, würde ich <span> genauso zu einem solchen machen [...].

Hat sonst nochjemand eine Idee?
Ein anderes Design?

Wie stellst du dir das vor? Das gleiche mit einer anderen Lösung...!?

Soll das heißen, man kann dieses Verhalten des Operas nicht irgendwie ... umgehen!?

WauWau

[at]

Hallo.

<a> habe ich ja zum Blockelement gemacht, [...]

Nein, das hast du nicht, weil dies nicht möglich ist.

Soll das heißen, man kann dieses Verhalten des Operas nicht irgendwie ... umgehen!?

Versuche es mit korrektem HTML.
MfG, at

[WauWau]

Hallo at,

<a> habe ich ja zum Blockelement gemacht, [...]
Nein, das hast du nicht, weil dies nicht möglich ist.

Es war so "übertragen" gemeint. Natürlich habe ich das nicht, sondern ich wollte lediglich ausdrücken, dass ich a { display: block; } angegeben habe.

Soll das heißen, man kann dieses Verhalten des Operas nicht irgendwie ... umgehen!?

Versuche es mit korrektem HTML.

In den <a>'s befinden sich jetzt nur noch <span>'s, es ist also korrektes HTML. Das Stylesheet habe ich dementsprechend umgeschrieben, trotzdem funktioniert es nicht in Opera.

WauWau

[at]

Hallo.

In den <a>'s befinden sich jetzt nur noch <span>'s, es ist also korrektes HTML.

Prima.

Das Stylesheet habe ich dementsprechend umgeschrieben, trotzdem funktioniert es nicht in Opera.

Das tut mir leid, kann ich aber so nicht nachvollziehen.
MfG, at

[WauWau]

Hallo at,

In den <a>'s befinden sich jetzt nur noch <span>'s, es ist also korrektes HTML.

Prima.

Habe ich doch auch an anderer Stelle schon geschrieben, oder? DAs Ding müsste jetzt XHTML-Strict sein (ich glaube, auf einen Doctype habe ich verzichtet...): http://sveni.dnsalias.net/forum/cssproblem.htm[1]

Das Stylesheet habe ich dementsprechend umgeschrieben, trotzdem funktioniert es nicht in Opera.

Das tut mir leid, kann ich aber so nicht nachvollziehen.

Tja, und ich nämlich auch nicht 8[. Dummes Opera :( - aber ansonsten ein toller Browser ;-)

naja, trotzdem vielen Dank für deine Hilfe :)

WauWau

[1] Zugriff auf http://sveni.dnsalias.net ist nur gewährt, wenn mein Comp. an ist--- und das ist er nicht immer ;-)