Ir para conteúdo

POWERED BY:

Arquivado

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

Prince_LucasAugusto

[Resolvido] CSS não funciona no FF

Por , em Desenvolvimento frontend

Recommended Posts

Prince_LucasAugusto    0

Prince_LucasAugusto
Postado

Galera bom dia.. Desculpem se esse tópico estiver repetido, mas tudo que encontrei na net não funcionou..

Fiz tres botões simples com CSS, onde exibe uma imagem, e na hora que clica, exibe outra (uma versão mais apagada)

 

No Chrome funciona perfeitamente.. Mas no FF a tabela com os botões não aparecem..

Se eu apagar a linha do DOCTYPE aparece no FF, mas a animação fica bem tosca, e bagunça tudo..

 

Já troquei a linha do doctype diversas vezes, procurei outras soluções mas ainda não consegui nada!

Será que podem me ajudar??

 

O código é esse:

 

<!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=iso-8859-1" />

<style type="text/css">

@import "style.css";

</style>

<title>Fiscalização :: CRECISP</title>

</head>

<body id="pagina">

<div id="cabecalho"></div>

<div id="principal">

<table border="0" align="center" cellpadding="20" cellspacing="20" height="350">

<tr>

<td><a href="constatacao.html" class="botao3d1" /><img width="200" height="165" /></a></td>

<td><a href="infracao.html" class="botao3d2" /><img width="200" height="165" /></a></td>

<td><a href="notificacao.html" class="botao3d3" /><img width="200" height="165" /></a></td>

</tr>

</table>

</div>

</body>

</html>

 

 

pagina em CSS

 

 

/*@charset "utf-8";

CSS Document */

@charset "iso-8859-1";

*{font-family:Verdana, Arial, sans-serif;font-size:11px;color:#004F6D;}

input, select, iframe, textarea{color:#000;font-size:12px;text-transform:uppercase;}

textarea{resize:none; overflow:hidden;}

select{height:20px;}

#pagina{

width: 840px;

background-color:#CCC;

/*background-color:#9c9c9c;*/

margin: 10px auto 10px auto;

border:1px solid #999999;

padding:0;

}

#principal{

margin:5px;

padding:5px;

border:1px solid #666;

min-height:420px;

background-color:#FFF;

}

#cabecalho{

margin:0px;

padding:0px;

width:100%;

height:130px;

position:relative;

background-image:url(imagens/cabecalho-fiscalizacao.jpg);

}

h1{text-align:center; font-size:18px;}

h2{text-align:center; font-size:16px;}

.tdform{

/*padding:5px;*/

background-color:#F5F5F5;

margin:0;

padding:5px 0 0 5px;

}

.thform{

text-align:left;

background-color:#DEDEDE;

margin:0;

padding:5px;}

.tableform{margin-top:10px;}

#submit{

margin:10px;

padding:0 10px 0 10px;

height:30px;

}

 

 

.botao3d1

{

 

border-color: #999 #000 #000 #999;

 

border: 0px solid;

width: 200px;

 

background: url(imagens/offline-ac-1.jpg) no-repeat center center;

color: #000;

 

font-family: Verdana;

font-size: 11px;

font-weight: bold;

text-align: center;

text-decoration: none;

}

 

.botao3d1:active {

position: relative;

box-shadow: inset 0 2px 5px #fff, 0 1px 3px #666 !important;

top:2px;

left: 1px;

border-color: #000 #999 #999 #000;

background: url(imagens/offline-ac-0.jpg) no-repeat center center;

}

 

 

.botao3d2

{

display: block;

border-color: #999 #000 #000 #999;

 

border: 0px solid;

width: 200px;

 

background: url(imagens/offline-ai-1.jpg) no-repeat center center;

color: #000;

 

font-family: Verdana;

font-size: 11px;

font-weight: bold;

text-align: center;

text-decoration: none;

}

 

.botao3d2:active {

position: relative;

box-shadow: inset 0 2px 5px #fff, 0 1px 3px #666 !important;

top:2px;

left: 1px;

border-color: #000 #999 #999 #000;

background: url(imagens/offline-ai-0.jpg) no-repeat center center;

}

 

 

.botao3d3

{

display: block;

border-color: #999 #000 #000 #999;

 

border: 0px solid;

width: 200px;

 

background: url(imagens/offline-not-1.jpg) no-repeat center center;

color: #000;

 

font-family: Verdana;

font-size: 11px;

font-weight: bold;

text-align: center;

text-decoration: none;

}

 

.botao3d3:active {

box-shadow: inset 0 2px 5px #fff, 0 1px 3px #666 !important;

top:2px;

position: relative;

left: 1px;

border-color: #000 #999 #999 #000;

background: url(imagens/offline-not-0.jpg) no-repeat center center;

}

 

 

 

Valeu galera.. obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

ricardo_mc    19

ricardo_mc
Postado

Olha... a forma como você está fazendo realmente pode dar alguns bugs, além de não ser nem um pouco funcional.

 

Esse lance de usar um <img> sem source dá vários problemas. Possivelmente isso que está bugando com o FF.

 

Pelo que entendi, você está tentando criar um menu. Correto? Se sim, porque você não usa <ul><li>?? É bem mais leve, prático de criar e fácil de customizar. Depois, quanto a essa questão das imagens, não use dessa forma, coloque o background no <a>.

 

HTML Ex:

<ul>
   <li class="menu1"><a href="#"></a></li>
   <li class="menu2"><a href="#"></a></li>
   <li class="menu3"><a href="#"></a></li>
</ul>

 

CSS Ex:

ul{list-style:none;}
ul li{float:left;}
ul li a{display:block;width:200px;height:165px;color:#666;text-decoration:none;font-family:Arial;}
ul li.menu1 a{background:url(suaimage.xxx) no-repeat;}
ul li.menu1 a:active{background:url(suaimage.xxx) no-repeat;}

ul li.menu2 a{background:url(suaimage.xxx) no-repeat;}
ul li.menu2 a:active{background:url(suaimage.xxx) no-repeat;}

ul li.menu3 a{background:url(suaimage.xxx) no-repeat;}
ul li.menu3 a:active{background:url(suaimage.xxx) no-repeat;}

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