|
|||
display:block und drei weiße Pixel
Hallo,
kann mir vielleicht jemand verraten, woher die drei weißen Pixel kommen, wenn ein Bild markiert, welches display:block zugeteilt wurde? Ohne display:block erscheinen die Pixel nicht - siehe Bild. HTML-Code:
<div style="height:150px; width:250px"> <a href="#"><img src="bild.jpg" height="80" width="180" alt="" style="border:none; display:block" /></a> </div> <div style="height:150px; width:250px"> <a href="#"><img src="bild.jpg" height="80" width="180" alt="" style="border:none;" /></a> </div> EDIT: Diesen Effekt gibt es nur im Firefox 3. Geändert von greenslot (18.01.2010 um 20:28 Uhr) |
Sponsored Links |
|
|||
Habe eben noch mal rum gespielt und habe den Doctype von Strict auf Transitional gesetzt und nun sind die Pixel in der Markierung.
Siehe rechts oben: Aber woher kommen die? |
Sponsored Links |
|
|||
DOCTYPE-Switch: Unerklärliche Lücken zwischen Elementen
edit: Nein, du redest wohl von was anderem. Drei weiße Punkte? Ich sollte einfach nicht antworten, wenn nur ein paar Codeschnipsel vorliegen.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken Geändert von fricca (18.01.2010 um 23:31 Uhr) |
|
|||
Der komplette Code:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>test.html</title> <style type="text/css"> * { margin:0; padding:0; } body { background-color:#000; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; margin-top:50px; text-align:center; } a { text-decoration:none; } a:link, a:visited, a:hover, a:active { color:#fff; } img { border:none; display:block; } </style> </head> <body> <div style="padding:10px"> <div style="border:1px solid #FFFFFF; padding:20px; margin-bottom:5px; height:250px; width:350px"> <a href="#"><img src="bild.jpg" height="80" width="180" alt="" /></a><br /> <a href="#"><img src="bild.jpg" height="80" width="180" alt="" /></a><br /> Hier steht was </div> <div style="border:1px solid #FFFFFF; padding:20px; height:250px; width:350px"> <a href="#"><img src="bild.jpg" height="80" width="180" alt="" /></a><br /> Hier steht was </div> </div> </body> </html> |
|
|||
Es betrifft beim Anklicken display:block - Bilder in Links, sofern der Link selbst display:inline bleibt. Nervt mich auch. Die drei Pixel sind das Ergebnis eines auf 0x0-pixel zusammengeschnurrten Links, der bei :focus eine Fokus-Outline erhält.
Code:
:-moz-any-link:focus { outline-color:-moz-use-text-color; outline-style:dotted; outline-width:1px; } Nimmst du statt dotted solid, ist das Ergebnis ein 4-pixel-Block, nimmst du noch padding für Links dazu, sieht man eine Art Block-Cursor. Ich würde mal annnehmen, dass der Effekt verschwindet, wenn der Link selbst auf Blocklevel steht. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
:hover-Problem in Navigation | lostrudel | CSS | 17 | 15.01.2011 18:20 |
Hilfe css Menu center | xXcyberXx | CSS | 5 | 28.11.2010 20:51 |
listenmenu im ie6 | albi84 | CSS | 4 | 20.10.2010 22:50 |
Dynamische Navigationsleiste horizontal, vertikal | Faven | CSS | 6 | 28.06.2010 16:06 |
Content Bereich verschiebt sich im IE | Hotbananaoli | CSS | 12 | 26.02.2009 18:33 |