css image div help

Question

У меня есть код css ниже вместе с изображением, чтобы показать его вывод. Мне нужна помощь, хотя 2 вещи.

1. Этот код работает довольно хорошо, чтобы показать имя пользователя на фото, однако я заметил сегодня, используя хром весь день часто, когда я нажать на ссылку, что бы взять меня на страницу, которая имеет изображение с этим кодом, он не будет показывать имя на изображении, он просто покажет имя под изображением, и прозрачный черный div не будет вообще виден, и имя даже не будет на изображении, я бы обновил страницу, и это будет отлично работает, что может быть причиной этого, это было, когда мой компьютер действовал так, как будто это было мало по памяти, может ли это быть частью проблемы?

2. Я хотел бы сделать бар шоу в верхней части изображения, которая является ширина изображения и т.п., может быть 2-3 пикселов в высоту и имеют цвет фона, как синий цвет. Что Я хочу сделать для Пользователи женского пола будут розовые бар там и другое цвет для мужчин. Может кто-то, кто знает 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

Так как я написал этот код для вас, кажется логичным, что я и пытаюсь исправить это ...

Кажется, что Chrome борется, так как он не знает высоты элемента. Давайте использовать поля вместо позиционирования

Кроме того, поскольку вы используете набор высоты, вы можете упасть позиционирование все вместе и использовать следующий 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: Вы попросили верхнюю цветную полосу для пола. Вы можете использовать следующий HTML:

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

Со следующим CSS:

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