a:link display:block "zerreisst" Layout im IE6/WinXP_SP2

[Felix Riesterer]

Liebe Selfer,

für eine Projekt-Webseite habe ich zwei floatende Boxen mit Linklisten definiert, wovon eine große rechts, und eine kleinere links floatet.

Vorhaben:
In diesen Boxen sollen die Links über die ganze verfügbare Breite der Boxen anklickbar sein - im FF kein Problem: "a:link { display: block; width: 100%; }".

Problem:
Im Internet-Explorer6 unter WindowsXP mit SP2 sieht das völlig anders aus als es soll. Die floatenden Boxen selbst erstrecken sich nun über die verfügbare Anzeigebreite, anstatt die in ihnen enthaltenen Links relativ zu ihren Elternelementen. Das zerreisst das komplette bisherige Layout.

vorläufige Lösung:
Mit einem Conditional Comment im Head habe ich die Rule für die Links wieder aufgehoben, so dass sie im IE halt nicht maximal breit sind. Damit sieht es im FF zwar aus wie gewollt, im IE aber nicht. Wer kann mir Besseres raten?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Daniel]

Hi,

Wer kann mir Besseres raten?

hast du die breiter für html, body etc. auch festgelegt? denke mal das es daran liegt.

MfG

[Felix Riesterer]

Lieber Daniel,

danke für Deine Antwort!

hast du die breiter für html, body etc. auch festgelegt? denke mal das es daran liegt.

Mir ist nicht ganz klar, warum das bei einem gefloateten Element etwas zu dessen Breite beiträgt, aber ich habe weder html noch body irgendwelche Breitenangaben gegeben - lediglich dem body habe ich margin und padding verpasst. Das konnte man aber meinem verlinkten Beispiel entnehmen...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Struppi]

Hallo Felix Riesterer

Liebe Selfer,

für eine Projekt-Webseite habe ich zwei floatende Boxen mit Linklisten definiert, wovon eine große rechts, und eine kleinere links floatet.

Vorhaben:
In diesen Boxen sollen die Links über die ganze verfügbare Breite der Boxen anklickbar sein - im FF kein Problem: "a:link { display: block; width: 100%; }".

Du musst der Liste noch eine Breite geben.

Struppi.

[Felix Riesterer]

Lieber Struppi,

danke für Deine Antwort!

Du musst der Liste noch eine Breite geben.

Tue ich das im Conditional Comment? Im FF sieht ja alles so aus, wie es sollte... Je nach Schriftgrößeneinstellung des Browsers soll die Liste ja "mitwachsen" können.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[MudGuard]

Hi,

Je nach Schriftgrößeneinstellung des Browsers soll die Liste ja "mitwachsen" können.

Die Längeneinheit em ist also die richtige.

cu,
Andreas

[Struppi]

Du musst der Liste noch eine Breite geben.
Tue ich das im Conditional Comment? Im FF sieht ja alles so aus, wie es sollte... Je nach Schriftgrößeneinstellung des Browsers soll die Liste ja "mitwachsen" können.

Naja, wenn du einem Element sagst es soll die gesamte Breite einnehmen (display:block und width:100%) dann tut es dies.

wie andreas schon sagt sinnvoll ist eine Breitenangabe in em
Struppi.

[Felix Riesterer]

Lieber Struppi,

Naja, wenn du einem Element sagst es soll die gesamte Breite einnehmen (display:block und width:100%) dann tut es dies.

... der IE-Logik zufolge? *Seufz* Dann werde ich es mal versuchen.

wie andreas schon sagt sinnvoll ist eine Breitenangabe in em

Das war mir schon klar. Jedoch frage ich mich wo genau diese Angabe hin sollte: In die CSS-Datei oder in einen Conditional Comment (weil ja nur für den dämlichen IE)?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Struppi]

wie andreas schon sagt sinnvoll ist eine Breitenangabe in em
Das war mir schon klar. Jedoch frage ich mich wo genau diese Angabe hin sollte: In die CSS-Datei oder in einen Conditional Comment (weil ja nur für den dämlichen IE)?

Ich benutze so gut wie nie CC

Struppi.

[at]

Hallo.

Ich benutze so gut wie nie CC

Sondern nur zum Einblenden von Mozilla-Bannern?
MfG, at

[Martin Hölter]

Hi!

Code? Insbesondere der Doctype und damit zusammenhängend der Rendermodus (Quirks- standards compliance Mode) dürften interessant sein.

Gruß

Martin

P.S.: width:100%; müsste eigentlich doch schon in display:block; "enthalten" sein, oder?

[Felix Riesterer]

Lieber Martin,

Code? Insbesondere der Doctype und damit zusammenhängend der Rendermodus (Quirks- standards compliance Mode) dürften interessant sein.

Die Seite hatte ich angegeben! Aber eben sagt mir der IE was von "BackCompat" :-( Werde da mal was zu drehen versuchen.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[wahsaga]

hi,

Die Seite hatte ich angegeben!

du bist eigentlich lange genug hier dabei, um zu wissen, dass wir von dir den link zur richtigen adresse erwarten, und keinen zu einem auf vanatu beheimateten frameset.

gruß,
wahsaga

[Felix Riesterer]

Lieber wahsaga,

du bist eigentlich lange genug hier dabei, um zu wissen, dass wir von dir den link zur richtigen adresse erwarten, und keinen zu einem auf vanatu beheimateten frameset.

Das ist zum Teil richtig. :-) Um sich diese dämliche Adresse merken zu können, wollte ich eben so eine URL mit de.xy haben. Damit handele ich mir im IE diesen Quirksmodus ein. Das habe ich nicht bedacht. Vielleicht sollte ich eine Seite zwischenschalten, die dann auf die tatsächliche Seite ohne Frameset verweist...

Aber eben um dieser Problematik willen habe ich euch mit der "falschen" Adresse losgeschickt. Jetzt bin ich wieder ein kleines Bisschen schlauer!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Candid Dauth]

Heißa, Felix,

Vielleicht sollte ich eine Seite zwischenschalten, die dann auf die tatsächliche Seite ohne Frameset verweist...

Dazu kannst du doch bei nic.de.vu einstellen, ob weitergeleitet werden soll oder in einem Frameset angezeigt. Ich würde generell die Weiterleite-Methode wählen.

Caramba!
Grüße aus Biberach Riss,
Candid Dauth

[Felix Riesterer]

Lieber Candid Dauth,

Dazu kannst du doch bei nic.de.vu einstellen, ob weitergeleitet werden soll oder in einem Frameset angezeigt. Ich würde generell die Weiterleite-Methode wählen.

Das kannte ich noch nicht, werde mir das aber genau anschauen! Vielen Dank für diesen Hinweis!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Martin Hölter]

Hi!

Hab den Link gerade gefunden, sorry. Allerdings häätest du auch die richtige Adresse angeben können.

zuersteinmal ein paar Sachen, die nix mit deinem Problem zu tun haben:

<a href="http://www.model-un.de/" target="_blank"> <!--passt nicht zu-->  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.  
<!--Verwende kein target oder die transitional-Variante.-->

body { font-size: 100.1%; background: #ffffff; font-family: Verdana, Helvetica, sans-serif; margin: 10px; padding: 0; } /*Hier fehlt die Schriftfarbe*/  
  
table table th { font-size: 100.1%; } /*dieser Selektor wird bei deinen Seiten hoffentlich nie aktiv werden.*/  
  
  
  
a img { border: none; }  
a:link img { border: none; } /*kann ersetzt werden durch*/  
  
img {border:none;}

Ausserdem lässt du die Elemente floaten ohne ihnen eine Breite zu verpassen. Dies ist AFAIR entweder gar nicht erlaubt oder führt zumindest zu Fehldarstellungen.

Des weiteren hast du einige CSS-Selektoren drin, die nicht angesprochen werden. Fürs Debugging (also auch für uns) wäre es übersichtlicher, wenn du wirklich nur die CSS-Angaben reinstellst, die eine Wirkung haben.

Ansonsten kann ich mich nur Mudguard und Struppi anschließen.

Verwende für die ul eine Breitenangabe in em und für die darin enthaltenen Links display:block; evtl in Verbindung mit width:100%; (pass aber auf margin und padding beim Internet Explorer auf, der ja momentan im Quirksmode rendert (BackCompat) und somit noch das alte Box-Model nimmt.

Gruß

Martin

[Felix Riesterer]

Lieber Martin,

zuersteinmal ein paar Sachen, die nix mit deinem Problem zu tun haben:

<a href="http://www.model-un.de/" target="_blank"> <!--passt nicht zu-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.
<!--Verwende kein target oder die transitional-Variante.-->

AHA! Aber diesen Code erzeugt nunmal diese "de.vu"-Adressengeschichte! Daher bekomme ich vom IE dieses "BackCompat" genannt. Stimmt! mit [richtigen Adresse](http://ellmun.el.funpic.de) bekomme ich schön das "CSS1Compat" zurück.  
  

> ~~~css

body { font-size: 100.1%; background: #ffffff; font-family: Verdana, Helvetica, sans-serif; margin: 10px; padding: 0; } /*Hier fehlt die Schriftfarbe*/  
Wird korrigiert.  
  

> table table th { font-size: 100.1%; } /*dieser Selektor wird bei deinen Seiten hoffentlich nie aktiv werden.*/  

Musste leider schon :(  
  

> a img { border: none; }  
> a:link img { border: none; } /*kann ersetzt werden durch*/  
>   
> img {border:none;}

Muss ich nochmal ansehen...

Ausserdem lässt du die Elemente floaten ohne ihnen eine Breite zu verpassen. Dies ist AFAIR entweder gar nicht erlaubt oder führt zumindest zu Fehldarstellungen.

Aha... werde das ändern müssen. Dabei sollten aber die floatenden Boxen so breit werden, wie sie eben müssen! Wenn ich da jetzt eine feste Breitenangabe mache, dann brechen ja die Zeilen um! Obwohl... da könnte man was mit overflow machen. Hmm.

Verwende für die ul eine Breitenangabe in em und für die darin enthaltenen Links display:block; evtl in Verbindung mit width:100%; (pass aber auf margin und padding beim Internet Explorer auf, der ja momentan im Quirksmode rendert (BackCompat) und somit noch das alte Box-Model nimmt.

Das könnte ich vielleicht umgehen, wenn ich ihn per Javascript aus dem Frameset hole. Klappt zwar nur bei aktiviertem JS, aber mal sehen. Es geht ja auch im QuirksMode.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Ingo Turski]

Hi,

table table th { font-size: 100.1%; } /*dieser Selektor wird bei deinen Seiten hoffentlich nie aktiv werden.*/
Musste leider schon :(

dann lösche diese unnütze Zuweisung trotzdem. Die Angabe reicht für body.

Ausserdem lässt du die Elemente floaten ohne ihnen eine Breite zu verpassen. Dies ist AFAIR entweder gar nicht erlaubt oder führt zumindest zu Fehldarstellungen.
Aha... werde das ändern müssen. Dabei sollten aber die floatenden Boxen so breit werden, wie sie eben müssen! Wenn ich da jetzt eine feste Breitenangabe mache, dann brechen ja die Zeilen um! Obwohl... da könnte man was mit overflow machen. Hmm.

Nein; lass' es so. Das ist korrekt und wird in diesem Fall auch nicht zu Problemen führen.

Dein Problem hat damit garnichts zu tun, sondern mit einem ganz anderen Bug des IE (Peekaboo oder so). Dagegen hilft die explizite Angabe von Line-height - sinnvoll natürlich in em passend zur Schriftgröße.

freundliche Grüße
Ingo

[Martin Hölter]

Hi!

Ausserdem lässt du die Elemente floaten ohne ihnen eine Breite zu verpassen. Dies ist AFAIR entweder gar nicht erlaubt oder führt zumindest zu Fehldarstellungen.
Nein; lass' es so. Das ist korrekt und wird in diesem Fall auch nicht zu Problemen führen.

Nur um sicherzugehen: ist es erlaubt, ein float ohne width anzugeben? Und in welchen Fällen führt das dann zu Problemen?

Dein Problem hat damit garnichts zu tun, sondern mit einem ganz anderen Bug des IE (Peekaboo oder so). Dagegen hilft die explizite Angabe von Line-height - sinnvoll natürlich in em passend zur Schriftgröße.

Wir alle lieben den IE - übrigens hat mir der IE Links erst nach nem Hover angezeigt, als ich der entsprechenden Liste eine line-height verpasst habe.

Gruß

Martin

[Ingo Turski]

Hi,

Nur um sicherzugehen: ist es erlaubt, ein float ohne width anzugeben?

in CSS 2.0: nein | in CSS 2.1: ja.

Und in welchen Fällen führt das dann zu Problemen?

ab einer gewissen Breite der Inhalte werden diese unterschiedlich früh umgebrochen bzw. die Box bekommt unterschiedliche Breiten. In Deinem Fall bei begrenzten Zeilenbreiten dürfte sich kein Problem ergeben.

freundliche Grüße
Ingo

[Felix Riesterer]

Vielen Dank Ihr Lieben,

jetzt habe ich so einigermaßen dasselbe Verhalten im IE, wie ich es im FF schon hatte.

Anzuschauen auf dieser Projektseite.

Dass der IE in der großen Box nicht alles wirklich so hovert, wie er sollte, ja noch mehr, dass er Teile der Box unsichtbar werden lässt, wenn man woanders hovert, das ist mir jetzt auch egal.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Struppi]

jetzt habe ich so einigermaßen dasselbe Verhalten im IE, wie ich es im FF schon hatte.

Anzuschauen auf dieser Projektseite.

Dass der IE in der großen Box nicht alles wirklich so hovert, wie er sollte, ja noch mehr, dass er Teile der Box unsichtbar werden lässt, wenn man woanders hovert, das ist mir jetzt auch egal.

Also im IE 4 scheint es tadelos zu funktioneren, was erstaunlich ist.

Struppi.

[Ingo Turski]

Hi,

Also im IE 4 scheint es tadelos zu funktioneren, was erstaunlich ist.

nö. dieser Bug ist einer der im IE 6 neu hinzugekommen. Im quirks mode hat ihn der IE 6 daher auch nicht mehr.
Eine Lösung dafür könnte also ein xml-Prolog sein. (ansonsten würde ich wohl einen kleinen CC zur Info über die Fehldarstellung einfügen.;-)

freundliche Grüße
Ingo

[Dennis]

Hi Felix,

Anzuschauen auf dieser Projektseite.

Ist dir schon das hier (64 KB) aufgefallen? In diesem Fall mit FF unter WinXP, das Verhalten tritt aber auch mit dem IE auf.

MfG, Dennis.

[Felix Riesterer]

Lieber Dennis,

Ist dir schon das hier (64 KB) aufgefallen? In diesem Fall mit FF unter WinXP, das Verhalten tritt aber auch mit dem IE auf.

Nein, mein Browserfenster ist immer sehr groß... Aber danke! Habe noch den margin-Wert angepasst.

Liebe Grüße aus Ellwangen,

Felix Riesterer.