zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Unterschied zwischen Chrome & Firefox - Wo ist der Fehler

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.11.2013, 19:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.12.2010
Beiträge: 11
RingoD befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.11.2013, 19:35
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.11.2013, 20:10
Benutzer
neuer user
 
Registriert seit: 07.10.2011
Ort: Berlin
Beiträge: 32
v217.89 befindet sich auf einem aufstrebenden Ast
Standard

Das sollte helfen: CSS clearfix

:=)
__________________
PHP-Code:
<?phahap

     
echo 'haha';

?>
Mit Zitat antworten
  #4 (permalink)  
Alt 11.11.2013, 20:22
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von v217.89 Beitrag anzeigen
Das sollte helfen: CSS clearfix

:=)
Inwiefern sollte das bei ihm helfen?
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 11.11.2013, 20:53
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
Inwiefern sollte das bei ihm helfen?
Damit ließen sich die gefloateten img in den Absätzen einschließen.
Würde ich vorziehen, falls die Bilder auch mal etwas höher werden könnten.
__________________
MfG
Jens
Mit Zitat antworten
  #6 (permalink)  
Alt 12.11.2013, 11:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.12.2010
Beiträge: 11
RingoD befindet sich auf einem aufstrebenden Ast
Standard

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ä?
Mit Zitat antworten
  #7 (permalink)  
Alt 12.11.2013, 11:58
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von RingoD Beitrag anzeigen
Aber mir fällt gerade auf, dass die Klasse "credits" in der CSS-Datei gar nicht existiert.
Stimmt, die musst du hinzufügen.
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.
Mit Zitat antworten
  #8 (permalink)  
Alt 12.11.2013, 12:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.12.2010
Beiträge: 11
RingoD befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 12.11.2013, 12:54
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 12.11.2013, 13:20
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

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.)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:23 Uhr.