Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2005 Teil von Mai

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

Informationsseite
  1. Seite (CSS) a:link display:block "zerreisst" Layout im IE6/WinXP_SP2 von Felix Riesterer, 31. 05. 2005, 12:39
nach unten

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

Die folgende Nachricht zum Thema stammt von: Felix Riesterer, 31. 05. 2005, 12:39

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.

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Daniel, 31. 05. 2005, 12:43

Hi,
»» Wer kann mir Besseres raten?

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

MfG

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Felix Riesterer, 31. 05. 2005, 12:52

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.

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Struppi, 31. 05. 2005, 12:50

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.
--
Javascript ist toll

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Felix Riesterer, 31. 05. 2005, 12:54

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.

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: MudGuard, 31. 05. 2005, 12:56

Hi,

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

Die Längeneinheit em ist also die richtige.

cu,
Andreas
--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter

Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Struppi, 31. 05. 2005, 13:05

»» »» 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.
--
Javascript ist toll

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Felix Riesterer, 31. 05. 2005, 13:08

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.

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Struppi, 31. 05. 2005, 13:10

»» »» 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.
--
Javascript ist toll

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: at, 02. 06. 2005, 17:46

Hallo.

»» Ich benutze so gut wie nie CC

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

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Martin Hölter, 31. 05. 2005, 12:52

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?
--
Selfcode: ie:{ fl:( br:^ va:) ls:# fo:| rl:( n4:( ss:| de:> js:) ch:? sh:( mo:| zu:)

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Felix Riesterer, 31. 05. 2005, 12:57

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.

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: wahsaga, 31. 05. 2005, 13:08

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


--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Felix Riesterer, 31. 05. 2005, 13:20

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.

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Candid Dauth, 31. 05. 2005, 21:57

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

--
„Jemanden zu lieben bedeutet, ihn nicht zu erdrücken, auch wenn man es gerne wollte – aus Liebe.“ | Mein SelfCode

http://cdauth.de/

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Felix Riesterer, 01. 06. 2005, 00:55

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.

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Martin Hölter, 31. 05. 2005, 13:08

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
--
Selfcode: ie:{ fl:( br:^ va:) ls:# fo:| rl:( n4:( ss:| de:> js:) ch:? sh:( mo:| zu:)

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Felix Riesterer, 31. 05. 2005, 13:17

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 bekomme ich schön das "CSS1Compat" zurück.

»» 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.

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Ingo Turski, 31. 05. 2005, 13:30

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
--
[barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Martin Hölter, 31. 05. 2005, 13:36

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
--
Selfcode: ie:{ fl:( br:^ va:) ls:# fo:| rl:( n4:( ss:| de:> js:) ch:? sh:( mo:| zu:)

nach obennach unten

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

Die folgende Nachricht zum Thema stammt von: Ingo Turski, 31. 05. 2005, 14:03

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
--
[barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)

nach obennach unten

Dankeschön an alle!

Die folgende Nachricht zum Thema stammt von: Felix Riesterer, 31. 05. 2005, 13:45

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.

nach obennach unten

Dankeschön an alle!

Die folgende Nachricht zum Thema stammt von: Struppi, 31. 05. 2005, 13:58


»» 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.
--
Javascript ist toll

nach obennach unten

Dankeschön an alle!

Die folgende Nachricht zum Thema stammt von: Ingo Turski, 31. 05. 2005, 14:12

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
--
[barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Hommingberger Gepardenforelle;-)

nach obennach unten

Dankeschön an alle!

Die folgende Nachricht zum Thema stammt von: Dennis, 31. 05. 2005, 15:55

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.
--
Mein SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:# ss:) de:] js:| ch:{ sh:| mo:} zu:|

Wer die FAQ gelesen hat, ist klüger! ... und weiß wie man Links macht ;-)

nach obennach unten

Dankeschön an alle!

Die folgende Nachricht zum Thema stammt von: Felix Riesterer, 01. 06. 2005, 01:09

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.

nach oben
Teil von SELFHTML Forum Teil von SELFHTML Forumsarchiv Teil von 2005 Teil von Mai

© 1998-2006 Seite Impressum, Software: Classic Forum