[Resolvido] Problemas de compatibilidade CSS x Browsers

[prygp 0]

Pessoal, boa noite!

 

O problema parece simples mas já quebrei a cabeça, procurei na net e não achei algo que resolvesse.

No menu do site, quando passo o mouse sobre uma opção do menu ele tem que trocar a cor do fundo e letra (hover).

Isso ele faz, o problema é que o espaço que ele ocupa.

[________________________] -> isso é o espaço definido para o "campo"

xxxxxxxxxxxxxxxxxx -> isso é onde está colorido

 

-> Exemplificando, no IE fica (da forma correta):

[xxxxxxxxHomexxxxxxxxxx]

 

-> No Chrome e Firefox fica:

[_______xHomex_________]

 

Ou seja, no Chrome e Firefox a cor que eu defini como background não ocupa todo o espaço que está disponível, fica apenas ao redor da palavra.

 

HTML - 1 item do menu:

<div id="menu">
 <ul>
   <li><a href="home.htm" target="meio">Home</a></li>
 </ul>
</div>

 

CSS

#menu li {
width:200px;
display: inline; 
float: left;
}

#menu a:hover{
width:100%;
color:white;
background:#990066;
text-decoration: none;
float:center;
text-align:center;
}

 

 

Não tenho a página publicada ainda e não achei uma forma de incluir um print da tela aqui (não sei se por ignorância minha ou porque não tem mesmo).

 

Toda ajuda é bem vinda!

[Pedro Vinicius 1]

#menu ul{
                display:inline;
                float:left;
}

#menu ul li{
                 background-color:red;
                 text-align:center;
                 list-style:none;
}

#menu ul li a:hover{
                 background-color:black;
}

 

Tente isto. Não testei no navegador, mas vê aí. Se não der certo me fala que a gente tenta outra solução. E o problema aí não é compatibilidade. É semântica. :)

[William Bruno 1501]

#menu a { display: block; }

 

você precisa entender a diferença entre um elemento nivel de bloco, e um inline.

 

 

@Pedro, semântica não tem nada a ver com isso.

O problema aqui na verdade é "box model".

[Pedro Vinicius 1]

Eu disse semântica em relação à forma que o código foi utilizado. Por exemplo, não existe float:center...

[William Bruno 1501]

Eu disse semântica em relação à forma que o código foi utilizado. Por exemplo, não existe float:center...

Mas isso também não é semântica. Isso é um erro de sintaxe.

 

Semântica diz respeito a outra coisa, diz respeito a usar tags html de acordo com oque foram criadas, dando significado a marcação.

[Pedro Vinicius 1]

kkkkkkkkkkk poxa cara, misturei legal. É sintaxe mesmo... Perdão aí.

 

Mas por que você postou sobre a questão de diferenciar block de inline? Teve alguma confusão nesse sentido no código?

[Diéssica 140]

Mas por que você postou sobre a questão de diferenciar block de inline? Teve alguma confusão nesse sentido no código?

É meio autoexplicativo, mas observe:

#menu a { display: block; }

"a" não é elemento de bloco, é inline. display:block é propriedade/valor para elementos de bloco.

 

Artigo legal sobre eles e inline-block:

:seta: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

 

E sobre elementos bloco e elementos inline:

:seta: http://www.cssnolanche.com.br/diferenca-entre-elementos-inline-e-de-bloco-em-html/

 

:bye:

[prygp 0]

Tente isto. Não testei no navegador, mas vê aí. Se não der certo me fala que a gente tenta outra solução. E o problema aí não é compatibilidade. É semântica. :)

 

Pedro Vinicius, obrigada pela ajuda, mas não funcionou.

 

você precisa entender a diferença entre um elemento nivel de bloco, e um inline.

 

William Bruno, isso resolveu o problema, realmente era algo simples!

Obrigada!