Hilfe! Firefox frisst meine Seitenabstände

[Lynn]

Hilfe, Leute, ich dreh hier am Rad!

Habe gerade meine Homepage aktualisiert und muss feststellen, dass Firefox meine Seitenabstände frisst. Bisher hab ich alles nur auf dem IE getestet (ja, ich seh's ja ein: schwerer Fehler) und der zeigte alles genau so an, wie es sein sollte, und jetzt mit Firefox DAS! Und ich komm nicht dahinter, woran es liegt.   

Es geht schon direkt auf der Startseite los: Der Text stößt rechts an die Sidebar. Im IE macht er mir brav den vorgegebenen Abstand.

Weiter geht es bei den Büchern und der Leseprobe. Eigentlich sollten da zwischen Coverbild und Text 20px Abstand sein. Beim IE ist er da, beim FF nicht. Und eigentlich sollten bei den Bücher auch die Links zu den Leseproben etc. UNTER dem Coverbild stehen. Tun sie im FF aber nicht! Ich habs mit nem <p>-tag versucht: ohne Erfolg.

Ich krieg hier noch die Kriese!  Sieht einer von euch, woran das liegt - und hat vielleicht auch noch eine Idee, wie ich es für den Firefox lösen kann?

haareraufende Grüße
Lynn

[Maja]

Grundsätzlich gilt beim Umgang mit CSS meistens: Der Firefox macht es richtig, der IE macht es falsch, tut aber so, als ob es richtig wäre.
Du hast das CSS nicht selbstgeschrieben, sondern dich an einer Schablone langgehangelt, sehe ich das richtig? Es ist nämlich etwas schwer, bei diesem Code durchzusteigen - ich finde viele Angaben nicht da, wo ich sie normal suchen würde. Was mir auffällt ist, daß du den Text nicht in Containern hast, nur in Absätzen. Es ist sinnvoll, den Text zusätzlich in Abschnitte aufzuteilen (<span>) - die können dann nämlich wichtige Informationen zur Textformatierung haben. In diesem Fall würde ich einen Span definieren, der so-und-soviel Abstand nach rechts hält, egal ob dann ein Rand kommt oder ein anderes Element:

Ins Stylesheet:

Code Auswählen Erweitern


span { padding-right: 20px; }


Und in den HTML-Dateien sprichst du es dann so an:

Code Auswählen Erweitern


<p><span>Und hierhin kommt der ganze schöne Text</span></p>


[Lynn]

Ja, ich gestehe: Ich hab mich an ner Vorlage entlang gehangelt. Wie gesagt: ich bin kein großer Künstler, was Webseitenbau angeht. 

Dein Tipp mit dem <Span> hat gewirkt! Wahnsinn! Kleine Ursache, große Wirkung! Klasse ! Danke!

Auch die Links bei den Büchern sitzen im FF jetzt da, wo sie sitzen sollen.

Hast du auch noch eine Idee, wie ich den Abstand zwischen dem Coverbild bei Bücher bzw. der Leseprobe und dem Text hinzaubern kann?
Ich hab versucht, das Bild in einen <span> zu setzen, aber das war offenbar der falsche Weg, denn er hat nicht mehr getan, als mir den Text nach unten zu verrücken.

Auf jeden Fall schon mal Super vielen lieben Dank für den Span-tipp

Lynn

[Maja]

Das geht noch einfacher - du definierst für das Bild selbst eine Klasse im Stylesheet, IMG. Dann kannst du sagen, wieviel Abstand das Bild in welche Richtung haben soll - zum Beispiel, wenn die Bilder immer rechts stehen, sieht ja besser aus, wenn sie nur nach links Abstand halten und dafür rechts bündig mit dem Text abschließen.
Du kannst auch verschiedene Klassen definieren, z.B. img.links und img.rechts - die mußt du dann nur gezielt ansprechen, z.B. <img class="links">

[Lynn]

einfacher ? okaaaaayyyyy

also für ein Bild das links steht (sollen sie bei mir derzeit alle tun) würde das dann so aussehen, wenn es linksbündig mit dem Text abschließen soll (der allgemein ein padding-left von 30 px hat) und der Text um es drum herum fließen soll, so wie er es jetzt ja schon tut:

stylesheet:

img.links {width:177px; height:281px; align:left; float:left; margin-right:20px; }

und im html spreche ich es an:

<img src="mein wunderbares bild" img class="img.links">

Korrekt? oder muss width, height, align und float ins html?

Ich geben zu, ich bin mir nicht ganz sicher, was ich da gerade tue.

Lynn

[Maja]

Nein, gib nicht im CSS die Größe des Bildes an. Das Bild weiß schon anhand seiner Datei, wie groß es ist. Align:left kannst du dir sparen, weil das Bild nicht innerhalb seiner selbst ausgerichtet werden kann und mittels float schon so weit nach links fließt, wie es irgend kann.

Im HTML sprichst du es so an:
<img src="mein wunderbares bild" img class="links">
(ohne das img. nochmal zu wiederholen - anhand des ersten img weiß der Browser, daß er eine img-Klasse suchen muß).

Wenn sich dann herausstellen sollte, daß unterhalb des Bildes alle weiteren Elemente auch nach links floaten, bau in die Klasse des Elternelements (also den Bereich, vermutlich einen DIV, in dem sich das Bild aufhält) den Vermerk clear: both; ein - der macht das Float dann wieder zu.

[Lynn]

Ha! Es hat geklappt! - Auch wenn das für mich mehr Knödelei war als das andere.(frag nicht warum) Aber tadaaa *tusch und trommelwirbel* dank Majas Hilfe hab ich es geschafft!

Ganz ganz ganz herzlichen Dank, Maja! Du bist die absolut Größte!

(äh ... ich hab es jetzt zwar nicht gebraucht, aber wo hätte ich dieses clear: both; hinsetzen müssen? ins css oder html - ich tippe mal auf css nach dem Doppelpunkt)

Jetzt muss ich nur noch diesen Blog für Meister Julien da irgendwie reingehebelt kriegen und dann STEHT DIE SEITE ENDGÜLTIG! *freu*

Nochmal ein super liebes Danke für die schnelle und mega kompetente Hilfe!