Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

reidark

DIV errada no Firefox e IE.

Por , em Desenvolvimento frontend

Recommended Posts

reidark    5

reidark
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

reidark    5

reidark
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito