css image div help

Question

J'ai le code CSS ci-dessous avec une image pour montrer sa sortie. J'ai besoin d'aide si 2 choses.

1. Ce code fonctionne assez bien pour montrer le nom d'utilisateur sur la photo, mais je remarqué aujourd'hui tout en utilisant Chrome toute la journée souvent quand je cliquer sur un lien qui me mènera à la page qui a des images avec ce code, il ne montrerait pas le nom sur l'image, il montrerait juste le nom au-dessous de l'image et le div noir transparent ne serait pas visible du tout et le nom ne serait même pas sur l'image, je régénérerais alors la page et il fonctionne bien, qu'est-ce qui pourrait causer ça, c'était pendant que mon PC agissait comme si c'était trop court, ça pourrait faire partie du problème?

2. Je voudrais faire un spectacle de bar à le haut de l'image qui est la largeur de l'image et comme peut-être 2-3 pixels de haut et ont une couleur de fond de comme le bleu. Qu'est-ce que Je veux accomplir est pour les utilisateurs femail il y aura une barre rose là-bas image et une couleur différente pour les mâles. Quelqu'un peut-il qui sait aider css me modifier cela pour faire que la meilleure s'il vous plaît

alt text http://i25.tinypic.com/2isxqoz.jpg

<style type="text/css"> 
div.imageSub { position: relative; } 
div.imageSub img { z-index: 1; } 
div.imageSub div { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0; 
    padding: 5px; 
    height: 5px; 
    line-height: 4px; 
    text-align: center; 
    overflow: hidden; 
} 
div.imageSub div.blackbg { 
    z-index: 2; 
    background-color: #000; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
    filter: alpha(opacity=70); 
    opacity: 0.5; 
} 
div.imageSub div.label { 
    z-index: 3; 
    color: white; 
} 
</style> 

<div class="imageSub" style="width: 90px;"> <!-- Put Your Image Width --> 
    <img src="http://cache2.mycrib.net/images/image_group66/0/43/t_6871399b0962b5fb4e29ce477541e165950078.jpg" alt="Something" width="90"/> 
    <div class="blackbg"></div> 
    <div class="label">Sara</div> 
</div> 

Answer 1

Depuis que j'ai écrit ce code pour vous, semble logique que j'essaie aussi de fixer il ...

Il semble que Chrome a du mal car il ne connaît pas la hauteur de l'élément. Utilisons marges au lieu de positionnement

En outre, puisque vous utilisez une hauteur de jeu, vous pouvez déposer le positionnement tous ensemble et utiliser le CSS suivant (Dans ce cas, vous ne devriez pas avoir le code ci-dessus):

div.imageSub img { z-index: 1; margin: 0; display: block; } 
div.imageSub div { 
    position: relative; 
    margin: -15px 0 0; 
    padding: 5px; 
    height: 5px; 
    line-height: 4px; 
    text-align: center; 
    overflow: hidden; 
} 
div.imageSub div.blackbg { 
    z-index: 2; 
    background-color: #000; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
    filter: alpha(opacity=70); 
    opacity: 0.5; 
} 
div.imageSub div.label { 
    z-index: 3; 
    color: white; 
} 

EDIT: Vous avez demandé une barre de couleur supérieure pour le sexe. Vous pouvez utiliser le code HTML suivant:

<div class="imageSub" style="width: 90px;"> <!-- Put Your Image Width --> 
    <img class="female" src="http://cache2.mycrib.net/images/image_group66/0/43/t_6871399b0962b5fb4e29ce477541e165950078.jpg" alt="Something" width="90"/> 
    <div class="blackbg"></div> 
    <div class="label">Sara</div> 
</div> 

Avec le CSS suivant:

div.imageSub img.female { border-top: 10px solid red; } 
div.imageSub img.male { border-top: 10px solid blue; }