IE und em-Interpretierung

daWonderer · 17. Sep. 2007

Hallo,

ich habe eine Seite erstellt in der ich in einer Tabelle die Zellenbreiten per CSS mit einer Angabe in em formatiere.
FF OK. IE nicht.
Nicht nur, dass die Breiten nicht stimmen, außerdem werden die Angaben für text-align nicht angenommen (und abgesehen davon,dass IE hover in TD nicht kennt).

Ich habe nun versucht das zu reproduzieren in einer einfachen neuen HTML-Seite.

Zu sehen unter: http://www.netzwerk-sachsenring-zwickau.de/tests/em_tst.htm

Seltsam ist, dass die Breite der ersten Spalte stimmt und die der darauf folgenden dann nicht mehr.

Ich habe keinen Fehler im CSS finden können.
Sieht jmd.evtl.etwas was ich übersehen habe und den Fehler verursachen könnte?

Vielen Dank schon mal!

ein schlauer · 17. Sep. 2007

Hast du mal in die Fehlerkonsole im Firefox geschaut?

Dann weiß ich nicht, ob der IE table-layout:fixed; kann, wobei mir hier nicht klar ist, warum du überhaupt eine Tabelle benutzt. Das ganze Konstrukt sieht so aus, als ob dir noch nicht klar ist, was man mit CSS alles machen kann und vor allem wie.

Ich würde das so machen

PHP:

#topleiste {
	border:1px solid #0838B8;
	float:left;
	width:100%;
}
#topleiste ul{
	margin:0;
	list-style-type:none;
	padding:0;
	margin-left:12.5em;
}
#topleiste li{
	float:left;
	background-color:#D7E7FB;
	text-align:center;
	border:1px solid #D7E7FB;
	font-size:0.7em;
	margin:2px;
	padding:2px 1em;
	
}
#topleiste li.right{
	float:right;
}
#topleiste li.aktiv{
	border:1px solid #000000;
}
#topleiste li:hover{
	border:1px solid #000000;
}

und der HTML Code sieht dann so aus:

PHP:

<div id='topleiste'>
<ul>
<li class="aktiv">News</li>
<li>Registrierung</li>
<li class="right">Impressum</li>
<li class="right">AGBs</li>
<li class="right">Kontakt</li>
</ul>
</div>

daWonderer · 17. Sep. 2007

Erst einmal danke für den Code!

ein schlauer schrieb:
Hast du mal in die Fehlerkonsole im Firefox geschaut?

Eine der width-Angaben wird nicht richtig angenommen.
Diese Angabe von '%' kann ich auch weglassen.

ein schlauer schrieb:
Das ganze Konstrukt sieht so aus, als ob dir noch nicht klar ist, was man mit CSS alles machen kann und vor allem wie.

Du hast Recht, im Moment lerne ich nur was ich momentan brauche. Bei Gelegenheit werde ich mir mal ein Standardwerk dazu vornehmen.

Aber entschuldige bitte:
Wieso sollte ich eine Liste so umfunktionieren, dass die Elemente hintereinander angezeigt werden wenn ich mit einer Standard-Tabelle eine strukturierte Ansicht erzeugen kann?
Mein CSS ist dann dazu da diese Tabelle zu formatieren.
Meine Frage war ja: Wieso interpretiert der IE meine CSS Angaben nicht(richtig)?

Verstehe mich nicht falsch, ich danke dir für den Workaround, aber irgendwie will mir nicht in den Kopf, dass ich solcherlei Umwege gehen muss nur weil ein Browser die CSS-Styles nicht richtig interpretiert.
Eine Tabelle war IMO von Anfang an in HTML dafür da strukturiert Daten darzustellen. Wenn das über andere Wege auch möglich ist - OK.
Aber der alte herkömmliche Weg sollte doch weiterhin unterstützt werden?

Da die Ansicht im FF so ist wie ich das möchte denke ich, dass mein Layout/CSS auch nicht falsch ist!? (bis auf die eine %-Angabe, aber auch ohne diese ist die Darstellung im IE die gleiche)

dkdenz · 17. Sep. 2007

Hier etwas Lesestoff.

Zum Thema Tabellen: Table vs. No-Table
Zum Thema Listen für Navigation: Cascading Style Sheets { Tutorials : Site-Navigation mit Listen }

ein schlauer · 17. Sep. 2007

daWonderer schrieb:
Wieso sollte ich eine Liste so umfunktionieren, dass die Elemente hintereinander angezeigt werden wenn ich mit einer Standard-Tabelle eine strukturierte Ansicht erzeugen kann?

Das ist eine falsche Ansicht wozu CSS gut ist, bzw. die Trennung von Inhalt und Layout. Eine Standardtabelle ist für Tabellendaten da und wurde Früher mangels anderer Möglichkeiten für die Strukurierung der Darstellung mißbraucht.

Wenn du mit CSS sinnvoll arbeiten willst (genaues steht wohl in den von dkdenz verlinkten Artikeln), solltest du immer zuerst überlegen was für eine Art von Inhalt du hast und welches HTML Element am sinnvollsten ist, wenn du keinerlei Gestaltungmöglichkeiten hättest. Das was du gezeigt hast deutete auf eine Linkliste hin, also entweder ol oder ul, dann ein paar Anpassungen wenn du die Struktur optisch gliedern möchtest (u.U. noch ein paar DIVs oder SPANs irgendwo hin, aber wie gesagt zuerst sollten normale HTML Tags kommen), danach dann das CSS anpassen, am besten mit Opera und FF, dann kommt das schlimmste, die Bugs in den verschiedenen IE Versionen (über die du auch schon gestolpert bist), das kann sehr müßig werden. Da hilft nur viel google und Foren

anna55 · 18. Sep. 2007

ein schlauer schrieb:
Da hilft nur viel google und Foren

Ich vermute mal, Du hast nicht nur bei der Navi, sondern auf Deine ganzen Seite das Layout mit Tabellen umgesetzt. Wie ein schlauer schon sagte, sind Tabellen in Zeiten von CSS nicht mehr angesagt. Sinnigerweise stellst Du um. Einen Ansatz hast Du unten ja schon bekommen. Zeig uns doch mal die Seite (per Link am besten). Ein Gesamtgerüst auf CSS-Basis bekommst Du sicher hin - wir haben vielleicht auch ne Idee, wenn's haken sollte. Die Einschränkungen, die Du durch Tabellen hast (IE hover z.B.), fallen bei reiner CSS-Nutzung weg. Notfalls musst Du Dich halt mit Workarounds behelfen. Dazu gab's schon was.

daWonderer · 18. Sep. 2007

@dkdenz Danke für die Links! Über das Thema Tabellen oder nicht hatte ich mich schon einmal informiert und ich glaube auch hier im Forum etwas dazu geschrieben. Letztendlich bin ich dann doch bei Tabellen hängengeblieben, da mir der Aufwand wie beim Holy Grail einfach zu groß und undurchsichtig war.
Mit der Linkliste hab ich mich ja ganz schön aus dem Fenster gelehnt

.
Okay, es ist eine Liste und kann also auch für ein Menü verwendet werden...

@einschlauer

Eine Standardtabelle ist für Tabellendaten da...

Ok, darüber lässt sich IMO streiten. Möchte aber jetzt nicht über dieses Thema diskutieren. Ein kurzer Blick in die CSS-Themenseiten zeigt mir, dass meine Ansicht wohl veraltet ist. Zum Thema Textbrowser kann ich nichts sagen, da ich noch keinen verwendet habe und die Anforderungen auch nicht kenne.

@anna55

Ich vermute mal, Du hast nicht nur bei der Navi, sondern auf Deine ganzen Seite das Layout mit Tabellen umgesetzt.

Jein.
Die Seite hat eine große zentrierte Tabelle, erste Zeile Logo, zweite Zeile dieses hier gezeigte Menü.
Dritte Zeile mit floatendem DIV links für weiteres Menü und rechts daneben der Inhalt (mit margin-left) auch in einem DIV.
Der Inhalt in dem DIV ist dann aber auch wieder in einer Tabelle.
Es ist ein Webshop. Sind nun die Artikel "Tabellendaten"

?

Das Problem ist, dass der Shop bald fertig sein muss und ich nicht weiß ob ich eine Umstellung ohne Tabellen zeitlich noch hinbekomme.

Wie ungefähr wäre dann das Layout?

DIV
-DIV-Logo
-DIV-TopMenü
-DIV
--DIV-LeftMenü
--DIV-Content (hier wäre aber die Verwendung von Tabellen günstig, PHP-Code schon fertig

)
-/DIV
-DIV-Footer
/DIV

Hmmm... Klingt ja simpel, werd ich wohl doch gleich mal probieren.

ein schlauer · 18. Sep. 2007

daWonderer schrieb:
Wie ungefähr wäre dann das Layout?

DIV
-DIV-Logo
-DIV-TopMenü
-DIV
--DIV-LeftMenü
--DIV-Content (hier wäre aber die Verwendung von Tabellen günstig, PHP-Code schon fertig )
-/DIV
-DIV-Footer
/DIV

Das äußere DIV ist nur bedingt nötig, je nachdem wie das Designkonzept aussieht.
Ist das Logo ein Bild, brauchst du kein DIV dafür reicht ein img-Tag
das Topmenü ist eine Liste.
Das folgende DIV kann auch überflüssig sein.
Das "LeftMenü" ist wieder eine Liste
Der Content enthält vermutlich Blockelemente daher ist das DIV hier sinnvoll und ja eine Auflistung von Daten ist eine Tabelle. Eine Tabelle ist ja nicht per se schlecht oder so, sondern kann halt heutzutage dank CSS vermieden werden um Inhalt anzuordnen
Der footer ist vermutlich ein Absatz (wenn er keine Blockelemente enthält)

also Schematisch sieht das in etwa so aus:

PHP:

<body>
<img id="logo" ...>
<ul id="topmenü"> ... </ul>
<ul id="leftmenü"> ...</ul>
<div id="content"> <hx> überschrift </hx> <table> .... </table></div>
<p id="footer"> ... </p>
</bod>

daWonderer · 18. Sep. 2007

ein schlauer schrieb:
Das äußere DIV ist nur bedingt nötig, je nachdem wie das Designkonzept aussieht.

Da der Shop umrahmt sein soll benötige ich dieses DIV.

Eine Tabelle ist ja nicht per se schlecht oder so, sondern kann halt heutzutage dank CSS vermieden werden um Inhalt anzuordnen

Ok, gar nicht so schwer.

Danke nochmal, mein Layout ist jetzt schon um einige TRs/TDs leichter geworden!
Jetzt mach ich mich mal an das linke Menü und stelle das auf LI um.
Glücklicherweise kann ich die Funktionen für den Content weiter benutzen...

BTW: Wieso muss ich einem DIV eine feste Höhe zuweisen? Es passt sich nicht automatisch an den Content an. Hatte das TopMenu erst ohne DIV, aber da die Zeile ne Hintergrundfarbe braucht dann doch eines herum gesetzt. Als ich keine Höhe angegeben hatte wurde das DIV nur 1px hoch und umschloss nicht die Liste.

ein schlauer · 18. Sep. 2007

daWonderer schrieb:
BTW: Wieso muss ich einem DIV eine feste Höhe zuweisen? Es passt sich nicht automatisch an den Content an. Hatte das TopMenu erst ohne DIV, aber da die Zeile ne Hintergrundfarbe braucht dann doch eines herum gesetzt. Als ich keine Höhe angegeben hatte wurde das DIV nur 1px hoch und umschloss nicht die Liste.

Oh, so was passiert gerne mal bei der Umstellung eines Tabellenlayouts auf CSS. Du hast hier einem konzeptionellen Problem. CSS in Verbindung mit HTML ist dafür entwickelt worden, Inhalt optisch gestalten zu können ohne dass der gestalter sich um die Darstellungsumgebung kümmern muss (mal abgesehen von den Browserbugs), dass ist genau das gegenteil von dem was auf Papier geschieht, wo du ein festes Format hast. Insofern sind Anforderung wie "fülle aus" oder "mache gleich wie" nur bedingt sinnvoll und in dem Konzept so nicht vorgesehen, um eben die Flexibilität zu wahren. D.h. du hast nicht die Möglichkeit, wie bei Tabellen, miteinander in Beziehung stehende Bereiche zu entwerfen.

Jetzt hast du zwei Möglichkeiten, du bleibst bei deinem Tabellenbasierten Layout und versucht einen workaround zu benutzen oder versucht das Layout den Möglichkeiten von CSS anzupassen (Im Prinzip macht man es beim Papierlayout ja auch nicht anders, auch wenn der Zeichentisch DIN A0 gross ist, wird die Fläche auf einem DIN A4 Blatt nicht größer)

und hier mal ein Workaround:

PHP:

#content {}

#content ul {
	float:left;
	width:10em;
	list-style-type:none;
	padding:0;
	margin:0;

}
#content div {
background-color:#fee;
border-left: 10em #ff0 solid;
}
<div id="content">
<ul><li>link 1</li></ul>
<div>
<h1>Titel</h1>
</div>
</div>

daWonderer · 21. Sep. 2007

ein schlauer schrieb:
Jetzt hast du zwei Möglichkeiten, du bleibst bei deinem Tabellenbasierten Layout und versucht einen workaround zu benutzen oder versucht das Layout den Möglichkeiten von CSS anzupassen

Ok. Ich habe nun ein "CSS-DIV-Layout", welches für den Content eine Tabelle bereitstellt.

Danke nochmal für deine Hilfe!

ein schlauer · 21. Sep. 2007

daWonderer schrieb:
Ok. Ich habe nun ein "CSS-DIV-Layout", welches für den Content eine Tabelle bereitstellt.

Danke nochmal für deine Hilfe!

Das ist Quatsch, es gibt kein DIV Layout. Entweder hast du ein CSS Layout oder ein Tabellenlayout, wenn du für den Inhalt Tabellen bereitstellst hast du nach wie vor ein Tabellenlayout (es sei denn du hast auschließlich tabellarische Daten).

dkdenz · 21. Sep. 2007

Tja, böse div's, gute table's...

daWonderer · 21. Sep. 2007

Ein Layout kann aber doch nicht rein aus CSS bestehen. Dazu benötigt man doch HTML-Elemente. Sind das in den meisten Fällen nicht DIVs fürs Grobe Layout?

ein schlauer · 21. Sep. 2007

daWonderer schrieb:
Ein Layout kann aber doch nicht rein aus CSS bestehen. Dazu benötigt man doch HTML-Elemente.

Genau, du strukturierst bzw. zeichnest einen Inhalt mit HTML Elementen aus. Ein DIV hat genau wie SPAN keine Bedeutung um damit etwas auszuzeichnen.
DIVs brauchst du um mehere HTML Blockelemente zu gruppieren und SPANs um Inline Bereiche zu kennzeichnen, denen du keine strukturelle Bedeutung (oder Semantik) zuordnen kannst.

dkdenz · 21. Sep. 2007

daWonderer schrieb:
Ein Layout kann aber doch nicht rein aus CSS bestehen. Dazu benötigt man doch HTML-Elemente. Sind das in den meisten Fällen nicht DIVs fürs Grobe Layout?

Da hast Du Recht!
Ein Layout kann nicht nur aus CSS bestehen, denn CSS ist eine unterstützende Sprache, weswegen sie natürlich (X)HTML-Tags benötigt.
Nur ist die Vergabe dieser (X)HTML-Tags insofern in der Masse geringer, als würde man dies ohne CSS lösen wollen.

daWonderer · 25. Sep. 2007

Ich habe noch eine Frage zu der Liste als Menü:

Kann ich ohne JS den gesamten Listenpunkt anklickbar machen/ verlinken und nicht nur den Text?

ein schlauer · 25. Sep. 2007

Was meinst du mit anklickbar? Ein Listenelement hat keinerlei Funktion wenn man es anklickt.

Du meinst sicher ob ein Link innerhalb auch auf den Punkt (oder wie du die Liste formatierst hast) der zum li-Element gehört klicken kannst. Das geht nicht.

daWonderer · 25. Sep. 2007

ein schlauer schrieb:
Du meinst sicher ob ein Link innerhalb auch auf den Punkt (oder wie du die Liste formatierst hast) der zum li-Element gehört klicken kannst. Das geht nicht.

Ok, danke! Dann haben die 2-10% halt Pech und müssen den Text genau treffen :d

anna55 · 25. Sep. 2007

daWonderer schrieb:
Ich habe noch eine Frage zu der Liste als Menü:

Kann ich ohne JS den gesamten Listenpunkt anklickbar machen/ verlinken und nicht nur den Text?

Na klar geht das. Du gibst Deiner li-Klasse eine Weite und zusätzlich noch ein display:block. Dann ist der ganze Bereich klickbar und nicht nur der Text, wie Du auch an dem Cursor-Symbol sehen kannst.

IE und em-Interpretierung

New member

Lounge-Member

New member

New member

Lounge-Member

Moderator

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

New member

Lounge-Member

New member

New member

Lounge-Member

New member

Moderator