Pseudoelement :before weist Lücke auf

[Quabbe]

Hallo,

ich habe eine ul#id, der ich mit ul#id:before { content:url(blabla.jpg); } eine Grafik vorangestellt habe. Die Breite der Grafik entspricht der ul#id und passt auch soweit. Nur: zwischen oben und unten klafft eine etwa 5 Pixel große Lücke.

Wenn ich dasselbe mit :after mache, passt sich die Grafik nahtlos an meine ul#id an. Wäre schön, wenn mir jemand sagen kann, woran das liegen könnte. Hier mal Code + Screenshot:

#content ul.brick { width:216px; float:right; margin:0 14px; }

#content ul.brick:before { content:url(../images/bg-bricktop.jpg); }

#content ul.brick:after { content:url(../images/bg-brickbottom.jpg); }

#content ul.brick li { width:216px; float:right; background:url(../images/bg-brick.jpg) no-repeat 0 0; }

#content ul.brick li a { width:216px; display:block; background:url(../images/bg-brick.jpg) no-repeat -216px bottom; padding:13px 20px; font-weight:bold; font-size:15pt; color:#a31; }

#content ul.brick li a em { display:none; }

#content ul.brick li a:before { content:url(../images/bg-adot.jpg)" "; }

#content ul.brick li a:hover, #content ul.brick li a:focus { color:#d53; }

#content ul.brick li a:hover em, #content ul.brick li a:focus em { display:block; font-size:9pt; color:#a31; font-weight:normal; margin:0 18px; }

Danke!


Grüße,
Quabbe

 

[Commodore]

Installier dir mal Firebug, damit kannst du dann über die entsprechende Stelle hovern und schauen, zu welchem Teil des Border-Box-Modells dieser Abstand gehört.


Oder lad deine Seite mal hoch und stell hier nen Link zur Verfügung, dann können wir mal schauen worans liegt, so auf Anhieb erkenne zumindest ich nichts Verdächtiges.

 

[Quabbe]

Hochgeladen auf www.unperfektdesign.de

Dabei hat sich auch noch ein weiteres Problem ergeben ... der brick Hintergrund ist völlig aus der Spur geraten. Meine Vermutung ist die, dass es an den ul / li liegt. Wenn ich die Links ohne ul und nur mit div#containern aufbaue, ergibt sich das Problem nicht (wohl aber das Problem mit der Lücke ....). :(


Grüße,
Quabbe

 

[two-bee]

moin,

ich würd dir erstmal empfehlen, deinen Code prinzipell etwas übersichtlicher zu gestalten, so machst du dir die Sache insgesamt einfacher!
Dein gewünschtes Styling ließe sich bestimmt mit der weniger Zeilen erreichen einfach durch strukturierten Code mit jeweils passenden Selektoren....

Die Lücke ergibt sich wohl durch den vom Browser automatisch gesetzten Abstände einzelner Elemente zu einander.
siehe: http://www.html.de/css/14581-faq-woher-kommen-die-abstaende.html
Setze mal mal ein

* {
margin: 0;
padding: 0;
/* ueberschreibt die Defaultwerte vom Browser */
}

und gib dann einfach für Elemente die eben ein padding oder margin haben sollen, das entsprechend an...
>> Wie du es ja für die ul schon gemacht hast...

Berichte mal was bei rumgekommen ist...


Gruß

two-bee

 

[two-bee]

habs grad mal getestet, also daran liegts nicht.

woran? keine Ahnung.
Ich würde sagen: an der Art und Weise wie du die Eigenschaften anwedest auf die einzelnen Selektoren.
Würde den Code einmal frisch tippen. Erst die Navi generell aufbauen, dann die Bilder rein und zum Schluß hoover und active setzen. Geht sicherlich schneller als x Zeit darauf zu verwenden wo der Fehler sitzt....

 

[Quabbe]

Huhu,

ja, das Sternchen hab ich bei meiner eigentlichen Seite auch schon gesetzt gehabt.

Aber ich hab nach ein bisschen rumprobieren herausgefunden, dass es klappt, wenn ich die ul mit padding:0 (für den Hintergrund) und line-height:12px (für die Pseudoelemente) versehe. Die line-height vom ul a hab ich dann wieder auf 18px gesetzt und alles schaut so aus wie es aussehen soll.

Was allerdings line-height mit :before und :after zu tun hat, ist mir ein Rätsel. Bin auch nur auf die Idee gekommen, dass mal zu versuchen, weil ich mich dunkel daran erinnern konnte, dass sich die Grafiken mit :before und :after bei einem anderen Projekt immer verschoben haben, als ich die line-height der Überschrift änderte.

Trotzdem lieben Dank fürs Antworten! :)


Grüße,
Quabbe