|
|||
Unterschied zwischen Chrome & Firefox - Wo ist der Fehler
Hallo Forum,
ihr habt mir schon das eine oder andere mal bei Problemen geholfen und ich würde mich freuen wenn es auch diesmal wieder so gut klappt. Es geht um Heimwerkertricks für Heimwerker Das ist eine statische Website. Kein CMS, kein Wordpress oder ähnliches. Problem: Auf der Startseite werden Artikel in DIV-Containern angeteasert. Im Chrome-Browser wreden diese sauber voneinander getrennt dargestellt. Im FF werden alle Boxen jedoch direkt "aneinandergeheftet" und mangels ausreichend Text, unsauber dargestellt. Wo ist da der Fehler? Ich hoffe ihr könnt helfen. Gruß, Ringo |
Sponsored Links |
|
|||
Deine Bilder haben eine Höhe von 80px. Gib mal dem umgebenden div.credits auch eine min-height von 80px.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
|||
__________________
PHP-Code:
|
|
|||
Zitat:
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Danke Jungs!
Aber mir fällt gerade auf, dass die Klasse "credits" in der CSS-Datei gar nicht existiert. Nur in Bezug auf den Footer Und in der "#footer .credits" ist die Höhe auf 32 Pixel definiert. Aber selbst wenn ich die Höhe verändere (habe ich jetzt mal gemacht) ändert sich rein gar nichts. Weder bei den Teasern, noch im Footer. Hä? |
|
|||
Zitat:
Und - du solltest auch die Fehler beseitigen, bevor du weitermachst. siehe http://validator.w3.org/unicorn/chec...sk=conformance
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
|
|||
Ich habe jetzt die Klasse "credits" der CSS-Datei hinzugefügt. Das hat's auch gebracht (Danke!)...aber nun habe ich schon wieder neue Probleme ... siehe Startseite von Heimwerkertricks.net
|
|
|||
Von height hatte ich nichts erwähnt, aber min-height.
Bitte nicht vergessen auch die anderen Fehler vom Validator zu beheben.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..." Aus einem Forum. |
Sponsored Links |
|
||||
Leider muss ich mal kurz anmerken, dass min-height nicht der richtige Weg ist, um Floats einzuschließen Man müsste für alle vorkommenden Bild-Höhen eigene Klassen vergeben (sowohl im HTML als auch im CSS) und spätestens mit Bildunterschriften haut es nicht mehr hin, denn dann ist die Höhe nicht mehr bekannt bzw. zuverlässig berechenbar (abgesehen davon wäre das ein enormer Aufwand und bei einem CMS gar nicht mehr realisierbar, denn da muss alles so automatisiert wie möglich sein, d.h. der Redakteur kann nicht nach dem Einfügen von Bild & Unterschrift noch die Höhe der ganzen Konstruktion checken und dann eine passende CSS-Klasse auswählen).
Der Hinweis auf Clearfix kam bereits, und außerdem gibt es noch die Möglichkeit eines neuen Block Formatting Context für den Floatholder, was allerdings etwas mühsam ist, denn per float braucht er eine Breite und das nachfolgende Element sollte clearen, und (das leider weit verbreitete) overflow: hidden ist im Prinzip auch etwas heikel, auch wenn es in den meisten Konstellationen wie gewünscht funktioniert. Clearfix dürfte also die einfachste Lösung sein - einfach zuweisen und alles weitere passiert automatisch, d.h. egal wie hoch das Bild ist oder wie ewig lang seine Bildunterschrift, das mit Clearfix versehene Element schließt jegliche Floats exakt ein. In FAQ 2 ist alles nochmal aufgeführt.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Umsetzung von Design in css in Chrome, Firefox | icebreakerpm | CSS | 10 | 04.03.2013 00:15 |
Chrome geht, IE + Firefox + Android darstellungsfehler | Xpressme | (X)HTML | 1 | 22.11.2012 09:27 |
Firefox interpretiert background-position anders als IE und Chrome | darton | CSS | 3 | 03.03.2012 10:22 |
Was ist der Unterschied zwischen html und Xhtml??? | 18inch | (X)HTML | 1 | 01.04.2005 10:18 |
padding-left... Unterschied IE und Firefox? | doozer | CSS | 3 | 16.03.2005 17:42 |