Publicado em 6 de jun.

DIV errada no Firefox e IE.

Fala galera, tudo bom?

Criei uma DIV que, quando passa o mouse, ela aparece dentro de uma imagem. No Chrome, Opera e outros deu tudo certo, mas no Firefox e Internet Explorer, essa DIV aparece totalmente fora.

CSS:

.imagem{
	width:auto;
	height:auto;
	padding: 4px;
	background-color: #111111;
	border: 1px solid #707070;
	border: 1px solid #484848;
	margin-right:4px;
	margin-left:4px;
	margin-bottom:3%;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	display:inline-block;
	position:relative;
}

.size{
	width:250px;
	height:20px;
	background-color:#111111;
	margin-top:-20px;
	display:none;
	color:#FFF;
	text-align:center;
	position:absolute;
	padding-top:2px;
}

.conteudo a:hover + .size{

	display:inline-block;
}

HTML:

<div class='imagem'>
<a href='#' target='blank'><img src='wp/imagem.jpg'/></a>
<div class='size'>500 x 500</div>
</div>

Alguém sabe o que poderia ser?

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Bru_ce· 6 de jun.

Obs: não existe a div conteúdo amigo.

Dei uma arrumada, segue

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css">
.imagem{
width:auto;
height:auto;
padding: 4px;
background-color: #111111;
border: 1px solid #707070;
border: 1px solid #484848;
margin-right:4px;
margin-left:4px;
margin-bottom:3%;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
display:inline-block;
position:relative;
}

.size{
width:250px;
height:20px;
background-color:#111111;
margin-top:-20px;
display:none;
color:#FFF;
text-align:center;
position:absolute;
padding-top:2px;
}

.conteudo a:hover + .size{

display:block;
}
</style>
</head>

<body>
<div class='conteudo'>
<a href='#' target='blank'><img src='Chrysanthemum.jpg'/></a>
<div class='size'>500 x 500</div>
</div>
</body>
</html>

reidark· 6 de jun.

Opa, valeu pelo esforço amigo, mas eu já descobri o erro.

Eu so tinha que mudar o display para:

display: block;
Isso que dá reaproveitar código velho, hehe.

Abraços.