Probleme mit Tabellenlosen Layout

**wyse** · 11.04.2003 14:41

Hallo erstmal,

ich hab mal versucht ein tabellenloses Grundgerüßt zu erstellen.
Und schon hab ich ein haufen Probleme

1.
Unterm Internet Explorer wird alles richtig angezeigt.
Bis auf eins. Beim ersten start der seite ist der untere teil nicht mit der hintergrund farbe versehen. Sobald ich die Seite ein bischen verkleinere oder vergrössere wird er angezeigt.

2.
Jetzt kommen die schlimmen Fehler alle unter Netscape (6.2).
Das Navigationsmenu:
Wenn ein Link über 2 zeilen geht ist zwischen den zeilen ein ziemlich grosser Abstand. Ich hab die Links auch mit css formatiert, aber es geht nur auf der ersten zeile. Die zweite Ignoriert er.

Listen:
ich benutze für meine Listen den "list-style-image" Befehl.
Unter Netscape ist kein Bild zu sehen, erst nach einer Größenänderung des Browserfenster sind die Bilder da.

Bild:
Das Bild das ich mit "position:relative" angeordnert habe ist irgendwo blos nicht da wo es beim IE ist.

Untere Leiste:
Die untere Leise schliesst beim NS rechts ab, sie sollte wenn möglich aber einen kleinen Abstand rechts haben.

Hier kann man sich das ganze anschauen www.spyrax.de
Nicht erschrecken wegen den Farben die sind da einfach nur so drin damit es nicht leer ist. Mir ging es am Anfang erstmal nur darum das alles richtig angezeigt wird. Was leider nur beim IE so ist.

Ich füge mal meine Dateien hier mit ein da ich glaube das sonst der text hier zu lange ist. Man kann sich die css Datei auch unter

css/
und die html datei unter
html (rechte Maustaste -Quelltext anzeigen) anschauen.

Bitte nicht erschrecken sind zwar ziemlich viel Probleme aber eigentlich ganz wenig Quelltext

Schon mal danke für die Hilfe

**Boris** · 11.04.2003 15:00

Vielleicht solltest Du erstmal Deinen Code aufräumen:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>CONNECTcom</title>
</head>
<body>
    <?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

Und hier ein Linktipp, der Dir gut weiterhelfen wird:

http://www.glish.com/css/

Dort geht es um diverse Varianten einer Tabellenlosen Seite inkl. weiterführender Links.

**wyse** · 11.04.2003 16:07

Danke Adagio für den Link der ist wirklich gut wenn es um solche designs geht.

Leider steht aber da auch nix über zweizeilige Links beim Netscape oder Listen mit Bildern drin.

Ich denke das sind jetzt mal 2 Sachen die die beiden Browser auf jeden Fall unterstützen. Steht zumindesens auf jeder CSS-Seite.
einmal ist das "a:hover,a:link" und einmal "list-style-image"

Es steht aber nirgendwo was geschrieben das man links nicht zweizeillig machen kann oder erst einmal reloaden muss damit die Bilder angezeigt werden.

Ich denke mal hier gibt es eine menge leute die wirklich davon ahnung haben dich eingeschlossen die mir dazu bestimmt was sagen können.

**Boris** · 11.04.2003 16:14

Hm, ich könnte Dir allenfalls noch ein paar mehr Links zu dem Thema geben, da ich mich selbst damit erst frisch geschäftige:

Sehr viele Tutorials und mehr rund um XHTML + CSS2:
http://www.alistapart.com/index.html

Die XHTML + CSS2 Seite vom Guru der StyleSheets *g*
http://www.zeldman.com/

**RBO** · 11.04.2003 16:34

Schau nicht in den Opera! Da sieht es auch ganz mau aus! Ich habe gerade ein riesen Projekt hinter mir mit css ohne Tables. Und ich kann Dir nur sagen: Du kommst nicht dran vorbei, verschiedene css zu schreiben! Für Opera (eigentlich kompatibel zu Mozilla/Netscape) und IE teilweise getrennt. Der Opera interpretiert Zeilenumbrüche, Pixelweiten (was besonders zum negativ ist) anders als der IE. Damit nicht genug, es bestehen sogar Unterschiede zwischen OP6 und 7! Ich kann nur sagen: vieeeeel Gedult und gefummel sind angesagt, Seiten aus DIV Layern zu bauen. Manchmal könnte man die Entwickler der Browser mit dem Kopf vor die Wand hauen!

Aber wenn man es einmal raus hat, und weis, wo die Unterschiede der Browser liegen, dann gewöhnt man sich an haarsträubende Situationen

Ich habe selbst 4x die Seite begonnen und Fehler im Style korrigiert. Jetzt, wo ich die Seite fertig habe, könnte ich vieles schon wieder anders machen.

**Boris** · 11.04.2003 16:43

RBO:

Das ist blanker Unsinn. Auf zeldman.com wird sehr genau beschrieben, was man bei jedem Browser beachten muss und wie man mit nur einem CSS auskommt.

**RBO** · 12.04.2003 09:21

sorry, wenn Du der Meinung bist, das es Blödsinn ist! Aber ich kann aus meiner Erfahrung nur sagen, das ich nicht nur über Unterschiede im line-height gestoßen bin. Besonders seit der Neue OP7 raus ist, der nichts mehr mit dem OP6 gemein hat!
Gerade in der blockelement Gestaltung mit Border z.B. wie soll man das lösen?? der IE macht einen 1px Border bei einer width:750 (center der Seite) den Border innerhalb dieser750 px. Der Opera hängt außerhalb an jeder Seite 1px zusätzlich dran! Dies ist besonders lecker, wenn man 2 Blöcke mit á 350 float:left nebeneinander platziert und wegen der zusätzlichen 4 px insgesamt der 2. Block umbricht!

Mag sein, das ich noch nicht so weit bin wie Du, aber ich habe noch kein probates Mittel gefunden, dieses mit einer css zu lösen!
Man kann sicher abstriche machen und einiges unter einen Hut bringen, aber warum soll ich meine Gestaltung der Unkonformheit der Browser anpassen?

Und das Line-height Modell von Zeldmann hilft da auch nicht weiter. Besonder schön ist seine Ausführung am Schluss:
-------Zitat---------------------------------
We could force all browsers to display the same amount of leading by specifying the line-height value in px rather than as a percentage of the font size, but doing so might create problems in browsers that let users scale font sizes.
----------------------------------------------
Und wenn man seine Seite genau anschaut, so wird jeder sofort erkennen, das es Unterschiede im Layout beim Betrachten mit verschiedenen Browsern gibt (Man beachte den Menueblock)!

meine Meinung zu Tabellenlosen Layout:

Es ist eine haarige fummlige Angelegenheit. Die Wege, die zum Ziel führen sind unerschöpflich. Und die Lösung, 2 CSS zu includieren als Blödsinn abzutun, finde ich übertrieben. Keiner ist perfekt, aber auf dem Weg dorthin, muß man alles mal durchgespielt haben.

**Boris** · 12.04.2003 11:07

Du vergisst aber auch eine Sache - Du bist anscheinend immer noch der (alten) Webdesignermeinung, Design geht vor Funktion. Muss eine Seite unbedingt zwingend auf jedem Browser 100% gleich aussehen? Wen stören kleine Unterschiede? Allenfalls Dich, aber nicht den Besucher.

Der Besucher macht den Font größer und Dein Design geht kaputt? Tja, dann war Dein Design mit dem falschen Hintergrund / Idee gebaut.

Der Trent geht weg von statischen, festen Seiten. Eine ordentliche XHTML + CSS2 Seite soll auf jedem Medium darstellbar sein - egal ob PC, PDA, Handy oder auf einem Drucker.

Aber das ist nur meine Meinung und die von Webdesignern, die diesen Trend (mit Grund) verfolgen

**RBO** · 12.04.2003 12:55

Es stimmt schon, wenn Du sagst, weg vom Statischen. Das Prob liegt nur daran, zwischen Aufträgen, neuen php, mysql, xml ...... Versionen die Zeit zu finden, sich neuen Sachen zu widmen. Man lernt also immer nur dazu. Ich werde mich demnächst mal stärker damit auseinander setzen. Aber die Entwicklung geht immer schneller, das man als "Opa" kaum hinterher kommt.

zur Startseite vom TP

Thema: Probleme mit Tabellenlosen Layout

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Probleme mit Tabellenlosen Layout

Aktive Benutzer

Aktive Benutzer