✔ Problem mit Background-Image in Chrome

Jan-Frederik Stieler

Jan-Frederik Stieler

Monsterator
Moderator
Hallo,
ich habe ein CSS-Menü erstellt welches unten einen Schatten hat welches ich per Background-image und dem Pseudoelement :after auf einer UL erzeugt habe. Leider macht Chrome und Safari hier rechts einen kleinen Abstand rein und ich verstehe einfach nicht wo der herkommt bzw. wie ich den weg bekomme?
http://jsbin.com/nacaxu/4/edit?html,css,output
Firefox hab z.b. kein Problem damit.

Viele Grüße
 
Zumindest für Chrome(Win) konnte ich das Problem wie folgt fixen. Vielleicht hilft dir der Ansatz weiter, Safari in den Griff zu bekommen.

http://jsbin.com/hopacufasu/1/edit?css,output
CSS: 
#hauptmenue_e1 {
  width: 970px; /* edit by SpiceLab - Rechenfehler: 966px != 6*160px + 5*2px */
  ...
}
.nav, .nav ul {
  ...
  table-layout:fixed /* complete by SpiceLab */
}
.nav li.firstlvl {
   ...
   width: 160px;  /* edit by SpiceLab - feste Breite, da 16.66666666% offensichtlich zu Rundungsfehlern führt */
}
[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
Hi Jan
ich kann dir zumindest sagen woher das Problem kommt:

In Chrome: Ein li ist 160px (incl. padding) -> somit sind 6 li 960px. ul ist aber 966px.
In Firefox ist ein li 161px und somit 6 li 966px, dort geht es also auf.

Das Problem kommt, weil die Browser die Kommas bei width unterschiedlich runden.

Mit width: 16.7% bekommen 5 von 6 li 161px und eins 160px.


Wenn du eine gute Lösung dafür gefunden hast bitte poste diese, interessiert mich auch wie man 1/6, oder auch 1/3 GENAU hinbekommt.
 
Ich glaube was ich oben gesagt habe stimmt nur bedingt, denn beide Browser rechnen 966px * 16,6666667% in diesem Fall gleich.


Aber schau mal hier, so klappts.
http://jsbin.com/kumetaqavo/1/edit?html,css,js,output

#hauptmenue_e1 position: relative;
:after bei nav weg

dafür das dazu:
CSS: 
.moduletable:after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 10px;
    background:url("http://picload.org/image/cwliori/schatten.png") repeat;
    position: absolute;
    bottom: -10px;
    left: 0;
}
 
jeipack hat gesagt.:
Wenn du eine gute Lösung dafür gefunden hast bitte poste diese, interessiert mich auch wie man 1/6, oder auch 1/3 GENAU hinbekommt.
Zum Vergrößern anklicken....
In einer "CSS-Tabelle", wie auch in einem konventionellen HTML-Tabellengerüst, verteilt table-layout:fixed die Breite der Tabelle gleichmäßig auf die enthaltenen Spalten, die wiederum keine Breitenregelung besitzen.

http://jsfiddle.net/spicelab/xt80w83y/ (width:100% - 3 Spalten)

http://jsfiddle.net/spicelab/n9qmsv4r/ (width:700px - 6 Spalten)
[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
Hi,
you make my Day!
Darauf gekommen das es nur an einem Rundungsfehler liegt bin ich gestern nicht gekommen.
Was mich jetzt etwas verwundert ist das Bootstrap auch 16.66666667%; verwendet. Die 7 am Schluss machen da keinen Unterschied.
In dem Fall vergrößere ich jetzt einfach den Container auf 970px bzw. verwende table-layout: fixed.
An table-layout: fixed hab ich jetzt ehrlich gesagt auch nciht gedacht. War wohl mal wieder etwas spät/früh gestern :).

Aber wenn table-layout eine Tabelle automatisch aufteilt funktioniert das mit den 16,66667 % trotzdem nicht. Heißt das Rundungsproblem besteht weiterhin. Außer ich geh auf 17% hoch. Dann wird das auf die maximale Breite verteilt. Heißt ich benutze am besten für width bei li 100%.

.moduletable kann ich nicht bearbeiten. Das ist eine universelle Klasse.

Grüße
 
Zuletzt bearbeitet:
Das hat mir keine Ruhe gelassen, warum in deinem Konstrukt trotz table-layout:fixed eine explizite Breitendefinition (relativ o. absolut) der Spalten erforderlich ist, damit sie sich entsprechend ausbreiten, und nach etwas weiterer praktischer Analyse des CSS-Codes komme ich zu der Erkenntnis, dass das Pseudoelement .nav:after hier der Knackpunkt ist.

http://jsfiddle.net/spicelab/hvck1wxa/ basiert auf meinem zweiten Beispiel (width:700px - 6 Spalten) von vorhin, nur fallen jetzt die Spalten in der Summe auf 602px zusammen, die "Tabelle" ist aber weiterhin 700px breit - zu erkennen an den Rändern u. der Hintergrundfarbe (gilt für alle gängigen Browser unter Win7). Fragt mich jetzt aber bitte blos nicht warum :D

In deiner Ur-Fassung habe ich daraufhin statt dem Pseudoelement das Hintergrundbild direkt der Klasse .nav zugewiesen, und siehe da, es steht in Chrome u. Safari nicht mehr über: http://jsbin.com/povidagahu/1/edit?css,output

Das alles ohne table-layout:fixed, und weiterhin mit width:16.66666666% :)

Und hier das entsprechende Gegenstück mit table-layout:fixed und ohne width:16.66666666% falls mal keine rechnerische Ermittlung der Spaltenbreite vorgenommen werden soll: http://jsbin.com/qopejukaku/1/edit?css,output

Edit: Falls auch .nav und .menu eine universelle Klasse repräsentieren, die nicht immer dieses Hintergrundbild besitzen soll, wird eben fix eine neue definiert ;)
CSS: 
.bgImg {background:url(...) repeat-x left bottom}
HTML: 
<ul class="nav menu bgImg">
[edit]Tipp-Ex[/edit]​
 
Zuletzt bearbeitet:
Hey,
Thumbs up! Vielen Dank für deine Bemühungen, auch wenn es mich wurmt das nicht selbst gelöst bekommen zu haben :).
Edit: Falls auch .nav und .menu eine universelle Klasse repräsentieren, die nicht immer dieses Hintergrundbild besitzen soll, wird eben fix eine neue definiert ;)
Zum Vergrößern anklicken....
Schon klar das man das eigentlich immer kann. Aber da es sich hier um ein CMS handelt ist es ein wenig mit Kanonen auf Spatzen geschossen ein Override nur wegen einer Klasse anzulegen.

Viele Grüße
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück