Elément en ligne CSS empêchant le vol stationnaire

Question

En utilisant le balisage suivant, je crée une image avec deux superpositions de texte flottantes, une pour le titre et une pour le texte de résumé. C'est le rendu que je souhaite et je suis capable d'utiliser l'image entière ainsi que le titre & pour accéder au lien sauf pour la zone immédiatement à droite du 'titre' jusqu'à la fin du 'résumé'. Cela se produit dans tous les navigateurs (sauf IE9 et inférieur). Des idées pourquoi et comment je peux le contourner?

HTML:

<div class="image"> 
    <a href="Default.aspx"><img src="Assets/Images/Picture.jpg" alt="Picture" /></a> 
    <div class="overlay"> 
     <a href="Default.aspx" class="headline">Headline</a> 
     <a href="Default.aspx" class="summary">Summo eirmod appareat ex mel. Vim odio error labores ex. Mea alii abhorreant et. Ad has nominati constituam. Sit falli nominati suavitate in.</a> 
    </div> 
</div> 

CSS:

body { 
    border: 0; 
    color: #5B6064; 
    font-family: Helvetica, Arial, Sans-Serif; 
    font-size: .75em; 
    line-height: 1.6em; 
    margin: 0; 
    padding: 0; 
    background-color: #a5a5a5; 
} 
a { 
    text-decoration: none; 
    color: #5B6064; 
} 
a:visited { 
    text-decoration: none; 
} 
img { 
    border: 0; 
} 
.image { 
    position: relative; 
    width: 100%; 
/* For IE6 */ 
    display: block; 
    overflow: hidden; 
} 
.overlay { 
    position: absolute; 
    bottom: 10px; 
    left: 0; 
    display: block; 
} 
.headline { 
    color: #FFF; 
    font: bold 24px/45px Helvetica, Sans-Serif; 
    letter-spacing: -1px; 
    background: #e87b10; 
/* Fallback for older browsers */ 
    background: rgba(232,123,16,0.8); 
    padding: 10px; 
    float: left; 
    clear: left; 
} 
.summary { 
    max-width: 350px; 
    margin-top: 3px; 
    color: #FFF; 
    font: 14px/14px Helvetica, Sans-Serif; 
    letter-spacing: 0; 
    background: #e87b10; 
/* Fallback for older browsers */ 
    background: rgba(232,123,16,0.8); 
    padding: 10px; 
    float: left; 
    clear: left; 
} 
.summary a { 
    color: #FFF; 
} 

Answer 1

Je placerais le tout dans une balise a (code de nettoyage). Vous auriez besoin d'ajuster un peu de votre CSS.

EDIT

J'ai changé les div éléments span il est si syntaxiquement correct (merci pour le rappel Phrogz). Puisque votre css avait déjà display: block pour les éléments div, les changer en span n'est pas un problème.

<a href="Default.aspx"> 
<span class="image">  
    <img src="Assets/Images/Picture.jpg" alt="Picture" /> 
    <span class="overlay">   
    <span class="headline">Headline</span>   
    <span class="summary">Summo eirmod appareat ex mel. Vim odio error labores ex. Mea alii abhorreant et. Ad has nominati constituam. Sit falli nominati suavitate in.</span>  
    </span> 
</span> 
</a> 

Answer 2

Le titre est flottant à gauche. Si vous supprimez le flottant et ajoutez display: block; à l'ancre, il prendra toute la largeur de l'image.