Problemas com Pseudo Classes

[Rafael Oliveira_209177 0]

Olá Pessoal, sou novo aqui no Fórum e venho pedir a ajuda de vocês para resolver um problema que estou tendo com Pseudo-Classes

 

Estou criando um site onde, ao clicar em uma determinada div, uma outra aparece... o código está funcionando perfeitamente no IE, mas não nos outros navegadores, poderiam me ajudar?

 

Vocês podem verificar o site no endereço: www.lunahseguros.com.br, é a terceira "página", de Seguros

 

Obrigado desde já!

 

 

Segue o HTML e o CSS:

 

 

 

---------- CSS ----------------------

 

.list{

width:80%;

height:100px;

position:absolute;

}

.lista{

text-align:center;

color:#ffffff;

position:absolute;

}

.lista header{

padding:5px;

font-family:Prime-Light;

font-size:20px;

}

.lista:hover{

background-color:rgba(128, 128, 128, 0.16);

}

.lista:focus{

background-color:rgba(128, 128, 128, 0.16);

-moz-user-focus:normal;

}

.conteudo{

width:100%;

height:300px;

position:absolute;

top:102px;

}

.content{

top:102px;

position:absolute;

color:#ffffff;

display:none;

font-family:Lato-Regular;

overflow:auto;

height:300px;

}

.content:focus{

display:block;

-moz-user-focus:normal;

}

.content:hover{

display:block;

}

.content p{

padding:10px;

}

.content p:hover{

background-color:rgba(128, 128, 128, 0.05);

}

/* ID's */

#listaAcidentes{

}

#contentAcidentes{

columns:2;

-moz-columns:2;

-webkit-columns:2;

column-width:400px;

-moz-column-width:400px;

-webkit-column-width:400px;

}

#listaAeronautico{

left:130px;

}

#contentAeronautico{

columns:3;

-moz-columns:3;

-webkit-columns:3;

}

/* Programação */

.lista:focus .content{

display:block;

-moz-user-focus:normal;

}

---------- HTML ----------------------

<!-- Seguro de Acidentes Pessoais -->

<div class="lista" id="listaAcidentes">

<header>ACIDENTES</header>

</div>

<div class="content" id="contentAcidentes">

<h2>Seguro de Acidentes Pessoais</h2>

<p>Este seguro oferece coberturas para danos decorrentes de acidente súbito, externo e involuntário sofrido pelo segurado, causando lesões físicas, ou morte.</p>

<h3>Coberturas básicas:</h3>

<p>

- Morte (indenização pecuniária ao beneficiário)<br />

- Invalidez Permanente (indenização ao próprio segurado).

</p>

<h3>Coberturas adicionais</h3>

<p>Despesas Médico-Hospitalares - DMH, (para tratamento iniciado até 30 dias após a data do acidente) e Diárias de Incapacidade Temporária - DIT (no período de tratamento). </p>

</div>

<!-- Aeronáutico -->

<div class="lista" id="listaAeronautico">

<header>AERONÁUTICO</header>

</div>

<div class="content" id="contentAeronautico">

<h2>Seguro Aeronáutico</h2>

<p>

Seguro de Responsabilidade Civil Geral- RCG

Este seguro garante o reembolso de indenizações que o segurado venha a ser obrigado a pagar em conseqüência de lesões corporais ou danos materiais, por ele provocado involuntariamente (por omissão, negligência ou imprudência) a terceiros ou a pessoas pelos quais possa responder civilmente.

É o ramo de seguros que oferece maior variedade de cobertura.

Exemplos:

<br /><br /><br />

RCG Empregador:

Cobre danos pessoais sofridos por seus empregados quando em serviço. Independe da indenização devida pelo Seguro Obrigatório de Acidentes do Trabalho.

RCG Condomínio, Proprietários e Locatários de Imóveis:

Cobre danos ocasionados a terceiros por acidentes relacionados com o uso e conservação do imóvel.

RCG Clubes e Associações:

Cobre danos causados a terceiros sócios e dependentes relacionados com o imóvel e as atividades nele desenvolvidas relacionadas a sócios e dependentes, bem como danos causados a objetos pessoais entregues à guarda do clube.

RCG Estabelecimentos Comerciais / Industriais:

Cobre danos causados a terceiros decorrentes de atividades comerciais ou industriais, painéis, letreiros, eventos, danos causados à mercadoria transportada pelo segurado ou a seu mando etc.

RCG Exposição e Feiras:

Cobre danos causados a terceiros por acidentes ocorridos desde a montagem até desmontagem das instalações e encerramento das operações. Não cobre os bens objetos da exposição ou feira.

RCG Poluição Ambiental:

Oferece cobertura relativa à reparação de danos ao meio ambiente e causado a terceiros devido às operações realizadas por responsabilidade do segurado.(Ex: contaminação do ar, poluição de águas, contaminação de animais e de alimentos).

RCG Produtos:

Cobre o segurado por danos causados a terceiros decorrentes de acidentes provocados por produtos por ele fabricados, vendidos ou distribuídos, por defeitos de fabricação, armazenagem ou manipulação inadequada.

RCG Profissional:

Cobre danos causados a terceiros por falhas cometidas pelo segurado no exercício de sua profissão ou dele decorrentes dentro dos prazos e localidades fixados na apólice. Este seguro é comumente utilizado por médicos, dentistas, advogados, engenheiros, corretores, empresas prestadoras de serviço de processamento de dados etc.

</p>

</div>

 

[reebr 94]

O que era pra acontecer? E o que você está querendo?

 

Cliquei em "seguros" e teve um scroll para um iframe com classe 'seguros'. Era isso?

Firefox 29

[Rafael Oliveira_209177 0]

na "página de seguros" tem duas palavras, "Acidentes" e "Aeronáutico", quando clicar nessas palavras é para aparecer um texto abaixo deles, tenta usar no IE que você vai ver!

[Anderson A. 0]

Opá meu querido,

 

Eu acho que você não tá sabendo se expressar ou eu não entendi, mais abri o link no IE11 e Chrome...

 

No IE não apareceu conteúdo para a aba seguros, diferente no Chrome, onde houve conteúdo na aba seguros.

 

Era esse o problema? Gostei do layout ;)

[Rafael Oliveira_209177 0]

Acho que não estou conseguindo me expressar direito.

 

Seguinte, há 4 tipos de conteúdo na página, o primeiro é a HOME, onde há a foto da casinha atrás, o Segundo é a parte SOBRE a empresa e o terceiro é a parte onde todos os seguros estão listados e há a descrição de cada um.

 

Fiz o css de forma que, quando o usuário clique em uma das palavras listadas (que são os nomes dos seguros - Acidentes, Aeronautico, Automóveis, etc...), abaixo dessa lista apareça o conteúdo de descrição do respectivo seguro, fiz isso usando a Pseudo-Classe :focus.

 

Meu problema é: no IE, esta função de "clicar no item da lista e aparecer o conteúdo" está funcionando perfeitamente, porém nos demais navegadores não, tenho no meu note os mais recentes (Safari, Firefox, Opera Next e Chrome), além do próprio IE.