css image div help

Question

以下のCSSコードを画像とともに表示して出力しています。私は2つのことで助けが必要です。私はこのコードで画像を持っているページに私を取るのリンクをクリックするだろうというとき、すべての日が多いクロムを使用しながら、

1. このコードは、写真の上にユーザー名を表示するにはかなり良い作品は、しかし私は、今日気づきました画像上に名前が表示されない場合は、画像の下に名前が表示され、透明な黒いdivは全く表示されず、画像上に名前が表示されない場合は、ページを更新してこれは私のPCがメモリ不足のように動いている間に起こりました。問題の一部になる可能性がありますか？

2. 私は で 画像の幅など多分 2-3ピクセル背が高い画像の上にバーショーを作るなど、青の 背景色を持っていると思います。私が達成したいのは、 femailユーザーの場合、そこには灰色の灰色の バーがあり、男性用の色は です。 は、CSSの助けを知っている誰かが私には

私はあなたのためにこのコードを書いているので

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

、私も修正しようという論理らしいください最高という を行うには、これを変更することができますそれ...

要素の高さがわからないのでクロムが苦労しているようです。 （その場合、あなたは上記のコードは必要ありません）あなたが設定した高さを使用しているので、あなたはすべて一緒にポジショニングをドロップすると、次のCSSを使用することができ、の代わりポジショニング

のマージンを使用してみましょう：

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：あなたは性別のトップカラーバーをリクエストしました。以下のCSSで

<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> 

：あなたは、次のHTMLを使用することができます

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