Nur bei meinem Firefox 1px leere Linie?

norbert-norb · 04.05.2011

Hallo,

ich habe folgendes Problem:

Auf dem Rechner 1 mit Firefox 4 wird auf meiner Webseite mariuszginel.com | Home zwischen der oberen und unteren Navigation, halt auf der hellen Linie in der mitte wird bei mir 1px in der höhe ein abstand gehalten.

Auf Chrome und Opera am Rechner 1 wird dagegen die Seite richtig angezeigt. Auf Rechner 2 zeigt auch der Firefox 4 alles richtig an, da kann ich sogar beobachten das der Hintergrund der unteren Navigation nach links verschoben ist.

Wieso zeigt mir der Firefox 4 auf dem Rechner 1 solch ein falsches Bild? Auf anderen Seiten hat der Firefox 4 auf dem Rechner 1 keine Probleme.

Firefox 4 auf dem Rechner 1

Firefox 4 auf dem Rechner 2, Chrome und Opera auf dem Rechner 1

Wisst Ihr wo das Problem zu finden ist?

GND · 05.05.2011

AW: Nur bei meinem Firefox 1px leere Linie?

Ich denke, wichtiger ist, wie andere deine Seite sehen. Und ich sehe keinen Fullscreen, also kann ich auch nicht sagen, was es sein könnte. Und welche Firefox-Plugins du drauf hast, weiß ich auch nicht. Installiere doch mal auf dem 1. Rechner eine jüngere Firefox-Version. Dann weißt du zumindest, dass es an Firefox liegt. Und auf welchem Rechner du die Seite aufgebaut hast, weiß ich auch nicht.

itstumpp · 05.05.2011

AW: Nur bei meinem Firefox 1px leere Linie?

Hallo,

mir fällt dieses Problem des öfteren auf, wenn ich eine Seite im Browser zoome. Das Problem liegt dann wohl eher am Browser, wie der die Seite beim zoomen umrechnet und rendert.

Gib beim Stylesheet für #nav noch das Attribut "height:17px;" mit an, damit die Höhe dieses Div-Bereichs festgelegt ist. Dein nav.png ist zwar 36px hoch, aber durch das padding das du angegeben hast ist die Gesamthöhe dann 36px (17px+7px+12px). Die Linie sollte nun nicht mehr erscheinen.

Übrigens, der IE8 kennt HTML5-Tags wie <header> nicht. Deine Seite sieht daher im IE8 anders aus. Ein Workaround wäre das Element per JavaScript zur Laufzeit zu erzeugen. Dazu einfach document.createElement('header'); im Script-Bereich einfügen.

Viel Spaß mit deiner Seite

Myhar · 05.05.2011

AW: Nur bei meinem Firefox 1px leere Linie?

Ehrlich gesagt tue ich mir schwer, dein Problem zu erkennen.
Was mir nur aufgefallen ist bei deiner Seite: Warum verwendest du ein extra div mit einer Hintergrundgrafik zum erzeugen der Linie? Da machen manche Browser manchmal Probleme, wenn man 1px Höhe angibt, soweit ich weiß. Aber du brauchst das div für die Linie gar nicht, du brauchst doch nur einer Liste (bzw. dem übergeordneten div) einen Border zuweisen. zB {border-bottom:1px solid #fff}
Ich wage sogar zu behaupten, dass die divs um die zwei ul für die Navigation unnötig sind, aber das habe ich jetzt nicht ausgetestet.
Weil ich es gerade gesehen habe: Auch die Trennstriche zwischen der Navigation hast du in die Hintergrundgrafik eingebaut. Das kannst du auch viel eleganter lösen, indem du den einzelnen li einen border zuweist. Außerdem wäre deine Seite dann zumindest etwas flexibler was die Skalierung angeht. Textgrößen werden bei dir ja auch fest vorgeschrieben...
Deinen Elementen würde ich auch keine fixe Größe zuweisen, da skalierter Text dann unweigerlich abgeschnitten wird, da du ja fixe Breitenangaben verwendest.

L. G.

PS: Hat jetzt nichts mit dem Thema zu tun, aber du hast noch einen Validierungsfehler in deiner Seite, der aber sehr leicht zu beheben sein sollte.

Doitsu · 05.05.2011

AW: Nur bei meinem Firefox 1px leere Linie?

In einer Horizontalen Navigation kann man keinen Rahmen vergeben, da Firefox & der IE diesen unterschiedlich darstellt und somit die Breiten der einzelnen Menuepunkte (der IE setzt den Rahmen in das Element, der Firefox nach aussen > Element Breite von 150px + 1px border [auf beiden Seiten] ergibt im IE eine Gesamtbreite von 150px, im Firefox sind es 152px .. oder andersherum, ganz scher bin ich mir da nicht.) unterschiedlich ist, was zum verschieben des letzten Menuepunktes fuehrt (er rutscht auf die naechste Zeile, da der Platz nicht mehr reicht).

Zum Problem: Wurde so irgendwie schon fast gesagt, die Hoehe von deiner Navigation bringt da einen Fehler rein. Gib der Navigation entweder eine feste Hoehe mit und passe die Schrfgroesse dementsprechend an, oder gib ihr eine schwarze Hintergrundfarbe mit.
Warum es auf deinen 1. PC nicht geht, aber auf dem 2.: Liegt vermutlich daran, dass du unterschiedliche Standardschriftgroessen (und/oder -arten) vergeben hast. Die einen brauchen halt mehr platz als die anderen.

Gruesse, Doitsu.

norbert-norb · 06.05.2011

AW: Nur bei meinem Firefox 1px leere Linie?

Super!

Vielen Dank Ihr habt mir echt weitergeholfen und neues habe auch noch dabei gelernt ^^

Habe jetzt alle eure verbesserungen eingefügt, auch das mit dem boarder. Nur habe ich jetzt ein anderes Problem und zwar werden die Trennlinien etwas nach rechts verschoben angezeigt, könnt Ihr mich da auch beraten wie ich sie wieder in die Mitte bekomme?

CSS-Border

Code:

#nav  li {
    display: inline;
    padding-right: 7px;
    padding-left: 7px;
}

#nav li+li {
    border-Left:1px solid #bbbbbb;
}

Außerdem gibt es eine möglichkeit die höhe des borders zu verringern?

Meine Seite: mariuszginel.com | Home

NiAlMa · 09.05.2011

AW: Nur bei meinem Firefox 1px leere Linie?

Offtopic

was mir sofort aufgefallen ist:

- Impressum zwar vorhanden aber nicht sofort als solches erkennbar
- Im Impressum fehlt eine Postanschrift und eine Telefonnummer

Empfehlung:
Impressum Generator

Grüße