zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden display:block und drei weiße Pixel

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.01.2010, 17:58
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2008
Beiträge: 36
greenslot befindet sich auf einem aufstrebenden Ast
Unglücklich 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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.01.2010, 23:13
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2008
Beiträge: 36
greenslot befindet sich auf einem aufstrebenden Ast
Standard

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?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.01.2010, 23:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.

Geändert von fricca (18.01.2010 um 23:31 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 19.01.2010, 00:49
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2008
Beiträge: 36
greenslot befindet sich auf einem aufstrebenden Ast
Standard

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>
Mehr ist das nicht.
Mit Zitat antworten
  #5 (permalink)  
Alt 19.01.2010, 01:37
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

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;
}
steht in ua.css. Man kommt da genau einmal ran, wenn man beim geöffneten Firebug auf den Link ohne loszulassen klickt und dann die Maus aus den Link wegzieht.
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.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #6 (permalink)  
Alt 19.01.2010, 17:04
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.12.2008
Beiträge: 36
greenslot befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von IChao Beitrag anzeigen
Ich würde mal annnehmen, dass der Effekt verschwindet, wenn der Link selbst auf Blocklevel steht.
Ah, danke! Das klappt und die weißen Pixel sind weg.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:10 Uhr.