Firefox stellt mein css nicht richtig dar

[lala]

Hallo,

ich habe ein Problem mit der Seitendarstellung im Firefox. Es geht um die domain in meiner signatur: www.diam***-diam***.de

Diese Seite wird richtig dargestellt. Nun habe ich unter www.diam***-diam***.de/test ein anderes css gemacht: Navi links bleibt stehen und scrollt nicht mit und Text läuft unter das header-Bild. Im IE und im Opera funktioniert das auch, aber nicht im Firefox. Da läuft der Text nicht richtig unter das header-Bild.

Da ich Wert darauf lege, dass die Seite in allen Browsern richtig funktioniert, habe ich die "Test-Version" noch nicht online gesetzt.

Hat jemand einen Tip, woran das liegt? Wäre für Tips sehr dankbar.

Liebe Grüße

lala

[ole1210]

Der Firefox stellt es wahrscheinlich richtig dar. Opera und IE sind fehlertoleranter als der FF.

Du hast im CSS nen paar Fehler drin. Es fehlen nen paar Leerstellen und auch nen doppeltes Semikolon habe ich gefunden.

Daran wird es aber nicht liegen.

Du hast das Bild oben in einen <p>-Tag eingebunden. Wenn du dem ein margin: 0px zuweisst klappt es.

Du kannst an deinem CSS auch noch ne ganze Menge optimieren. So kann man das menü auch ausserhalb vom Text anklicken. etc.

[lala]

@ole1210
Vielen Dank für den Tip!

Was meinst Du mit

So kann man das menü auch ausserhalb vom Text anklicken.

?

Und wo fehlen Leerstellen? Sorry, bin noch nicht so fit im css.

Liebe Grüße

lala

[Graccem]

Ich würde den p-Tag gleich ganz entfernen. Der ist dort total überflüssig. Das text-align:center kann man auch nach #head schreiben.

[MonikaTS]

Tipp
<div id="inhalt">
<center><img src="diamant_kontor.gif" alt="DIAMANT-KONTOR" border="0"></center>

<center> ist "unerwünscht"

Du kannst das ganze lösen indem Du in die formate.css dort wo Du es wiederfindest hineinschreibst.

.imgcenter{margin:0 auto; text-align:center;}

dann im Quelltext:
<img src="diamant_kontor.gif" alt="DIAMANT-KONTOR" border="0" class="imgcenter" >

jedes Bild hat keinen Rahmen, so kann man sich die Angabe border="0" auch im Quelltext ersparen und in die formate.css hineinschreiben

img{border:none;}
hier ist es wichtig , dass vor img kein Punkt kommt.

wenn ein p tag oder ein anderer html tag geöffnet wird, sollte er auch wieder geschlosen werden, wenn die website auch in ein paar Monaten funktionieren sollte
also

<p>blablubsch .......</p>

oder <h3> Ichbinwichtig</h3>


damit der Internet Explorer egal welche Version Bilder wirklich sehr schnell aufbaut braucht der eine Hilfe:
die Breite die Höhe des Bildes

<img src="diamant_kontor.gif" alt="DIAMANT-KONTOR" class="imgcenter" height="123" width="244">
ohne px dazuzuschreiben

<font align="LEFT">

gibt es einfach nicht mehr, einfach vergessen, dass es dies je gab

Lösung: wieder in die formate.css
.textleft{text-align:left;}

dort wo man linksbündigen Text braucht
class="textleft" hinzufügen


um eine Site zu überprüfen nutze ich immer den validator,
https://validator.w3.org/

hilft ungemein, da man nie vor Tippfehlern gefeit ist, selbst wenn man css und xhtml kann

lg

[fw]

.imgcenter{margin:0 auto; text-align:center;}

dann im Quelltext:
<img src="diamant_kontor.gif" alt="DIAMANT-KONTOR" border="0" class="imgcenter" >
..
..
..
Lösung: wieder in die formate.css
.textleft{text-align:left;}

dort wo man linksbündigen Text braucht
class="textleft" hinzufügen

einfach, du hast das Ganze noch nicht so richtig inhaliert.
Klassen nach ihrer augenblicklichen Formatierung zu benennen ist dumm. Wenn du ein gründliches Redesign machst, wirst du erkennen warum: Klassenname und Format passen nicht mehr zusammen. Und nun?? Überall, auch in den html-Dateien den Klassennamen ändern damits wieder passt??
Nein, Klassen sind vorzugsweise nach ihrer Funktion zu benennen: .erklaerung, .signatur etc.

https://www.csszengarden.com/ ist ein brauchbares Beispiel.

[MonikaTS]

fw

danke, dass Du diesen wichtigen Aspekt mit hereingebracht hast,

habe doch glatt vergessen , dies einer blutigen Anfängerin gleich unter die Nase zu reiben,
die als CSS Anfängerin garantiert die cascading style sheets und css hacks von Zengarden verstehen wird!

ich habe auch nicht auf die verschachtelten Bezüge zwischen id und img hingewiesen,

ich werde in mich gehen und mich bessern-versprochen!



ich freue mich über derart konstruktive Kritik

lg

[fw]

habe doch glatt vergessen , dies einer blutigen Anfängerin gleich unter die Nase zu reiben,
die als CSS Anfängerin garantiert die cascading style sheets und css hacks von Zengarden verstehen wird!

Na ja, was ein css-hack ist wird lala schon wissen. Sie verwenden für ihr neues Design selbst einen.

So calm down.

[MonikaTS]

habe doch glatt vergessen , dies einer blutigen Anfängerin gleich unter die Nase zu reiben,
die als CSS Anfängerin garantiert die cascading style sheets und css hacks von Zengarden verstehen wird!

Na ja, was ein css-hack ist wird lala schon wissen. Sie verwenden für ihr neues Design selbst einen.

So calm down.

oh!
wärst Du so freundlich mir diesen zu zeigen?

lg

[fw]

oh!
wärst Du so freundlich mir diesen zu zeigen?

Gerne - Komm´ mal mit in dein Postfach.

[lala]

@all

Vielen Dank für Eure Tips. Hat mir ungemein geholfen! Auf den blöden simplen <p>-Tag bin ich gar nicht gekommen. Habe was viel Komplizierteres vermutet. Naja, manchmal sieht man vor lauter Bäumen den Wald nicht.

Habe angefangen, schon einiges umzusetzen. Musste jetzt auch noch einen Scrollbalken in die linke navi bauen, da sie ja fixiert ist. Habe noch nicht alles umgesetzt, kommt aber noch. Ist ja ne Menge Arbeit, alles auf das neue Design zu ändern. Sind immerhin ca. 70 Seiten, die ich da beackern muss.

Kann mich momentan nur nicht so viel drum kümmern, da ich noch zwei andere Projekte auf die Beine stelle.

Nochmals vielen Dank an ALLE!

Liebe Grüße

lala