A-Link umfasst nicht vollständiges IMG

[MBStef]

Also nochmal, da der Beitrag ja wegen der Server-Probleme weg war.

Ich habe ein <a href="."><img src=".." class="bild"></a> in einem Dokument, in dem Thumbs aufgelistet werden. In der CSS wird nirgends dem A oder IMG ein display verpasst oder so und dennoch wird der Link nicht über das 150x150px Bild komplett drüber gelegt sondern nur stellenweise.

Wie kann ich dem beikommen?

groß Grüß,
der Stefan

[Gunnar Bittersmann]

@@MBStef:

nuqneH

In der CSS wird nirgends dem A oder IMG ein display verpasst oder so

Sondern?

Wie kann ich dem beikommen?

Obige Frage beantworten, am besten indem du die betreffende Seite zeigst.

Qapla'

[MBStef]

@@MBStef:

nuqneH

In der CSS wird nirgends dem A oder IMG ein display verpasst oder so

Sondern?

Ja es wird eben kein display bei beiden Elementen gesetzt, lediglich farben etc. (also in der css mein ich).

Wie kann ich dem beikommen?

Obige Frage beantworten, am besten indem du die betreffende Seite zeigst.

Schlecht möglich, da ich die nur Lokal vorliegen habe und nicht Online ist.
Einfach erklärt: Bild 150x150 Pixel und nur im untersten 35-45 Pixel ist der Link vorhanden, beim Rest des Bilder scheint kein Link vorhanden zu sein.

groß Grüß,
der Stefan

[JürgenB]

Hallo MBStef,

da du wohl nicht den 35-45-Pixel-Bug entdeckt hast, vermute ich, dass du was falsch machst. Etwas mehr Quelltext wäre jetzt nicht schlecht.

Gruß, Jürgen

[MBStef]

Hallo MBStef,

da du wohl nicht den 35-45-Pixel-Bug entdeckt hast, vermute ich, dass du was falsch machst. Etwas mehr Quelltext wäre jetzt nicht schlecht.

Verständlich.. habe ich gerade auch noch als Antwort gemacht

groß Grüß,
der Stefan

[MBStef]

@@MBStef:

nuqneH

In der CSS wird nirgends dem A oder IMG ein display verpasst oder so

Sondern?

Also hier mal der komplette HTML und CSS Code vom Element:

HTML:

<article class="post">  
<div class="post-thumb"><a href="." title="."><img src="." alt="."></a></div>  
<header>  
  <h2 class="post-title">Der Titel</h2>  
</header>  
<div class="post-meta">  
  <span>Meta Angaben....</span>  
</div>  
</article>

CSS:

article.post {  
  position:relative;  
  clear:both;  
  display:block;  
  height:auto;  
  padding:10px 0px;  
}  
article.post .post-thumb {  
  float:left;  
  margin-right:5px;  
  border:1px solid #ddd;  
  background: #efefef;  
  padding: 3px;  
  border-radius:3px;  
}  
article.post .post-thumb a {  
  display:block;  
  overflow:visible;  
}  
/* Die letzte Formatierung für das a hab ich gerade eingefügt, ändert aber nichts an der Tatsache */  

groß Grüß,
der Stefan

[Encoder]

img schließen wär das erste was mir auffällt.

[MBStef]

img schließen wär das erste was mir auffällt.

Ich habe das Ganze in HTML5 umgesetzt, was so auch valide ist (auch ohne /> im img). Dennoch ist tatsächlich bei der Ausgabe das img mit /> geschlossen.

groß Grüß,
der Stefan

[Der Martin]

Hallo,

img schließen wär das erste was mir auffällt.

nur wenn wir von XHTML ausgehen. Da Stefan aber nur einen Auszug zeigt und uns der DOCTYPE verborgen bleibt, könnte es ebensogut Plain HTML sein, angesichts der Elemente article und header offensichtlich HTML 5. Und dann gibt es beim img-Element nichts zu schließen bzw. es ist nicht nötig.

Ciao,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, MBStef!

<div class="post-thumb"><a href="." title="."><img src="." alt="."></a></div>

Hilft dir wahrscheinlich auch nicht, aber:

wozu das div?

Ich habs mal nachgebaut: die komplette Bildfläche ist verweissensitiv.

Möglicherweise liegt ein margin eines anderen Elementes oder ein anderes Element selbst drüber.

Verwende ein Entwicklertool wie z.B. firebug und für den Fall, dass meine Vermutung zutrifft z-index. Beachte, dass z-index nur auf Elemente wirkt, deren positionwert ungleich static ist.

Matthias

[MBStef]

Om nah hoo pez nyeetz, MBStef!

<div class="post-thumb"><a href="." title="."><img src="." alt="."></a></div>

Hilft dir wahrscheinlich auch nicht, aber:

wozu das div?

Ich habs mal nachgebaut: die komplette Bildfläche ist verweissensitiv.

Möglicherweise liegt ein margin eines anderen Elementes oder ein anderes Element selbst drüber.

Verwende ein Entwicklertool wie z.B. firebug und für den Fall, dass meine Vermutung zutrifft z-index. Beachte, dass z-index nur auf Elemente wirkt, deren positionwert ungleich static ist.

Tatsächlich hat das weitergeholen. Nachdem ich dem IMG Element ein

position:relative;  
z-index:1;

gegeben habe, funktioniert es.

groß Grüß,
der Stefan