✔ CSS wird nicht richtig angezeigt/gelesen in FF und IE

Status
Nicht offen für weitere Antworten.
A

anbis

Mitglied
So, guten Abend ersteinmal.
Also ich habe schon eine mittlere Odysee hinter mir und jetzt habe ich die Website langsam so weit, dass wenigstens die Startseite fast fehlerlos ist.

Nun ist es so, ich arbeite hauptsächlich auf meinem Macbook, weshalb sich das "klappt es auf dem IE"-Gucken schwierig fällt.
Das mit dem Mac ist insofern wichtig, da ich auf meinem Mac wie auf meinem PC die neuste Version von Firefox laufen hab.
Nun Fehler Nummer 1: Auf meinem Firefox auf dem PC wird die Seite falsch dargestellt (nämlich die Breite überbreit, sodass ein Querscrollbalken nötig wird) und zudem wird der Overflow (ich hab overflow:visible eingestellt) nicht angezeigt, sondern das Bild "abgehackt".
Komischerweise zeigt es der IE auf dem PC, der Firefox auf dem Mac, sowie Opera auf dem Mac richtig an.

Fehler Nummer 2: der IE auf meinem PC zeigt die Seite vollkommen falsch an, er interpretiert das margin der Menübox nicht richtig und das padding/margin der mit CSS näher definierten Tabelle stellt er gar nicht dar.

Die Seite, soweit wie sie jetzt ist, lässt sich hier "bestaunen"^^: http://alqq.al.funpic.de

Wäre wirklich nett, wenn einer von euch wüsste, wieso die CSS nicht richtig geladen/dargestellt wird, wenn ihr die CSS oder HTML braucht, sagt einfach bescheid.

Im übrigen ist mein Problem fast so wie in dem Thread hier: http://www.tutorials.de/forum/html/262182-css-datei-wird-nicht-ausgelesen-ie.html

allerdings hab ich es mit den Tipps schon versucht und es hat nicht geklappt :(

Also schönen Abend noch und schonmal danke.
 
Hi,

vielleicht solltest du besser erstmal den HTML-Code validieren, denn 137 Fehlermeldungen bei gerade mal 103 Code-Zeilen besitzen ein hohes Potential für eine diskrepante bzw. fehlerhafte Darstellung der Seite in den unterschiedlichen Browsern.

Siehe hierzu das w3c-Validator-Resultat deiner Seite: [Invalid] Markup Validation of http://alqq.al.funpic.de/ - W3C Markup Validator.

Wenn die Fehler behoben sind, und die Seite noch immer falsch angezeigt wird, kann man sich gezielt dem Stylesheet zuwenden.

Und noch zwei grundsätzliche Tipps:

  1. Eine ID muss im HTML-Dokument eindeutig sein, also darf darin nur einmal vergeben werden. Die IDs #spacer2 und #wrapper tauchen da aber mehrmals auf. Für diesen Fall sind die Klassen vorgesehen.

  2. Der von dir verwendete "Star-HTML-Hack" macht nur Sinn, wenn er nach dem "normalen" Selektor notiert wird, um die vorangegangenen Eigenschaftswerte zu überschreiben, ansonsten lädt der IE die nachfolgenden Regeln und überschreibt die aus dem * html #ID-Name-Selektor.
 
super danke, das hilft mir echt weiter. Ich bin noch ein relativer Neuling deswegen kannte ich die Seite noch nicht...ich mach es dann erstmal wie du gesagt hast, und geh die Fehler durch, nochmal danke und schönen Abend noch :-)
 
Nun ich tat wie geheissen und die vom W3C angezeigten Fehler sind alle korrigiert, die Seite damit "valid". Dennoch sind alle Anzeigefehler geblieben, eben besonders der beim IE wo alles falsch dargestellt wird, sowie der beim FF, dass der overflow:visible nicht dargestellt wird.

Hat jemand eine Ahnung, wie ich diese Fehler beheben kann? Webspace ist immernoch bei http://alqq.al.funpic.de.

PS: Star-HTML hab ich rausgeschmissen/auskommentiert, sollte also nicht mehr das Problem sein.

Für Hilfe wäre ich wirklich sehr dankbar, danke, danke.

PPS: Sorry für Doppelpost, hab es zu spät gemerkt
 
Hi,

das DIV #wrapper, respektive sein Hintergrundbild, wird derzeit nur so hoch angezeigt, wie es der Elementinhalt von ihm abverlangt, da nützt overflow:visible auch nichts.

Abhilfe schaffen da folgende Ergänzungen im Stylesheet, um das Element auf die vollständige Fensterhöhe zu strecken:

Code: 
html,body {
height:100%;
}

/* Alles umschlieszender Container */
#wrapper {
position:relative;
min-height:100%;
height:auto !important;
height:100%;
width: 1000px;
margin: 0 auto;
padding: 0px;
text-align: left;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background-image: url(../images/test6.jpg);
background-repeat: no-repeat;
background-color:transparent;
overflow:visible;
}
Für die Tabelle #Kontakt wäre noch die clear:both-Angabe erforderlich, damit der IE sie an der gewünschten Stelle ausrichtet.
 
danke vielmals erstmal, funktioniert nun alles so weit. Nun frage ich mich nur noch, wie ich die Kontakt-Tabelle am besten positioniere, hast du da einen Vorschlag? An sich hab ichs mit margin: 5% ; versucht aber irgendwie funktionierte das auch nicht recht. Sie soll eben bei allen Browsern und Darstellungsgrößen relativ die gleiche Position haben...

und dann wäre da eben noch dieses allgemeine Darstellungsproblem des IEs, zumindest beim 6.0 (beim 7er kann ich es gerade nicht prüfen), werden die Tabellen immernoch falsch angezeigt, eben padding, margin und so, alles sehr wüst :/

Wenn ich bloß wüste, woran das liegt...im Moment komm ich nicht recht darauf.
 
Der Auslöser ist die zu groß gewählte Breitenangabe für die Tabelle #Bilder2, aufgrund dessen streckt der IE 6 + 7 nämlich die Tabellenzellen in der Breite. Rechnerisch dürfte sie bei vier Tabellenzellen à 150px Breite nur 600px breit sein.

Im übrigen wird in den HTML-Attributen width= und height= keine Einheit angegeben.

Die "Kontakt"-Tabelle wird in allen mir zur Verfügung stehenden Browser an derselben Stelle am unteren Fensterrand ausgerichtet.
 
Hmm aber wieso? die Tabelle sollte ja nicht so dargestellt werden, dass alle Zellen volldargestellt werden, sondern mit Seitenabstand/margin. Ich habs gerade mal mit 600px probiert, und du hast recht, er stellt sie dann in korrekter Größe da. Allerdings immernoch ohne margin und dazu ist die Positionierung dann auch bei Firefox und Opera falsch, da die Tabelle ja kleiner ist und so nicht mehr alle Zellen in eine Spalte passen, was zum Zeilenumbruch führt. Also das grundegend falsche bzw das Problem ist immernoch das margin, was er nicht darstellt, und dass er die Zellen nicht gemäß der CSS-Größe darstellt (oder ist das nur beim 6.0er so?)
 
Der IE 6 + 7 unterstützt nicht für das td-Element die von dir eingesetzte margin-Eigenschaft.
 
Ist das keine Standardeigenschaft? Hm und wie könnte ich es sonst machen? Also ich hätte es gerne in der CSS stehen, oder muss ich wirklich auf cell spacing/padding ausweichen?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück