Tabellenprobleme im Safari und Firefox

[tanja46]

Hallo liebe Dreamweaver Fans,
habe ein kleines Problem mit einer Tabelle. Wenn Texte in verschiedenen Zellen stehen zeigt der IE alles richtig an. Der Safari und Firefox Browser zeigt aber unschöne große Zellenabstände an, er verschiebt die Texte nach unten.
Das gleiche Problem habe ich teilweise auch mal bei Ebenen. Da sitzt die Ebene weiter unten. Habe das Problem schon öfters gelesen, aber noch keine Lösung gefunden.

Seht mal unter www.licht-echt.com, da habe ich die Seite hinterlegt.
Vielleicht weiß jemand Rat.

Grüße
Tanja

[zulujaner]

Hallo tanja46,

wenn du eine Internetseite erstellst dann orientiere dich lieber am Mozilla Firefox. Zu Safari kann ich leider nix sagen. Aber auf jedenfall ist der IE nur dazu da, Wunschdenken umzusetzen. Will heisen, er ignoriert kleine "programmier" Fehler, schlimmer noch er hat seine eigene Interpretation von Vorgaben. Also kurz IE nicht gut.

Bei mir sieht deine Seite so aus. Siehe angehängtes Bild. Ich habe zu Informationszwecken deine verschiedenen Elemente bunt eingefärbt. So kann ich besser sehen was los ist.

Und da gehts auch schon los.

Ich nehme mal an du versuchst deine Webseite in der Mitte des Bildschirm zu zentrieren und arbeitest mit einer Bildschirmauflösung von 1024x768?
Da klappt das auch, aber auf kleineren oder größeren Monitoren sitzt es außer mittig .

Dann gibst du auch wiedersprüchliche Werte an. Du definierst eine Ebene(das rote) mit ner Höhe von 290px, deine Tabelle ragt aber ums doppelte drüber. Wenn du bei der Ebene die Höhe weglöschst, passt die sich automatisch an den Inhalt an.

Das ist wichtig, damit nachfolgende Inhalte den richtigen Anschluß finden.

Wo soll denn das Bild mit dem Kalender hin? Drunter oder neben die Aufzählung in der Tabelle?

Bei dem Bild ist der gleiche Schnitzer mit der Höhe. Ebene(das blaue) ist kleiner als das Bild...

Jetzt überdeckt das Bild ja den Text. Das kommt durch die absolute Positionierung von Layer4, top:524px;
Das ist zuwenig wenn der Text in der Tabelle so lang ist.

Dein Text in der Tabelle verrutscht weil du viel mit <p> und <br> arbeitest. Die Browser interpretieren das unterschiedlich und du hast das problem. Genauso Abstände und Schriftgrößen, nix festgelegt = Zufall in der Darstellung.

Dieser Link:
<link href="staufen.css" rel="stylesheet" type="text/css" />
funktioniert auch nicht <--- mußt du nachbessern.

Tja wie geht es nun richtig?
Hier mal ein paar Infos zum zentrierten Layout. Ganz unten sind 10 Beispiele.

Infos zum positionieren und Boxmodell

Ausserdem ersteinmal die Standards setzen für die Seite. Margin, Padding, Font, Background. Dann wird auch das ander leichter.

Die grundlagen halt... Male mal eine Skizze wie es aussehen soll. Dann kann man auch mehr Aussagen treffen.


Ich hoffe ich hab dir nicht die Laune vermiest?
Aber bis jetzt haben wir alle Seiten hinbekommen ....

Grüße zulujaner

[tanja46]

Hallo Zulujaner,
erstmal Danke für deine Antwort.

Also die Tabelle bzw. die Seite soll nicht mittig platziert werden sondern genau an dieser Stelle, auf das Hintergrundbild und den Rest des Layoutes habe ich verzichtet.
Ich habe die Seite im Deamweaver aufgebaut und nun auch das CSS hinterlegt, aber das Problem ist noch immer vorhanden. Das Bild sollte unter dem Text stehen tut es aber nicht, weil die Zeilenumbrüche br nicht stimmen.
Das ist auch das ganze Problem, im IE paßt es (also bei fast 90% meiner Kunden) und im Firefox und Safari nicht (die beiden zeigen die Seite fast gleich an).
Lasse ich die Umbrüche weg unter http://www.licht-echt.com/index1.html sieht es im Firefox und Safari gut aus, aber im IE nicht mehr. Es ist verflixt, der Text kommt dann zu weit runter und liegt unter dem Bild.

Anbei noch die p Definition aus meinem CSS:
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
line-height: 15px;
font-weight: normal;
color: #000000;
margin-top: 0px;
}

Wenn ich alles in eine Tabellenzelle platziere, also Text und Foto jeweils mit Umbruch paßt es. Es muss irgendwie an der Tabellenzellen liegen, wie wenn automatisch am Anfang einer Zelle erstmal ein Umbruch kommt.

Grüße
Tanja

[Torsten]

Wenn man eine gleiche Darstellung in allen Browsern erreichen möchte, sollte man zuerst alle Ränder auf Null setzen, d.h. im CSS folgendes eingeben:

* {
	border: 0;
	padding: 0;
	margin: 0;
}

Erst jetzt hat man die Möglichkeit, alle Abstände für Überschriften, Absätze, Tabellen, Listen etc. so zu setzen - das ein einheitliches Layout entsteht.

[tanja46]

Hallo Torsten,
vielen Danke für den Tipp. Jetzt sieht es in allen 3 Browsern gut aus. Super
Kleine Ursache mit großer Wirkung. Dachte nicht das ich den Wert angeben muß, da
die Tabelle im Dreamweaver ja schon auf Null stand.

Viele Grüße
Tanja

[Torsten]

Nun es ist so das jeder Browser in den Tiefen seiner eigenen Programmierung auf eigene CSS zurückgreift um Elemente darzustellen.

Es liegt oft nicht an den Tabellen, wenn die Darstellung abweicht, sondern an Absätzen <p> Listen <ul><li> etc.