[hughet]

Eu estava criando um site, eu sou iniciante, tenho 14 anos mas quero trabalhar com isso, eu adoro designer, ai quando estava criando um CSS, o site tava normal, bonito...Quando fui ver ele em outro browser (Mozilla), ele ficou muito diferente, o menu ficou to tamando do \"link\" não do que eu determinei...
Ta exatamente assim: (eu usei um <link rel="stylesheet" type="text/css" href="css/main.css">
Ai eu fiz uma <ul id="menu> fui botando Li com <a href="#"> e no Internet Explorer, normal, mas no Mozilla por exemplo, cada botão do menu ficou to tamanho que eu escrevia o link!
O css (main.css), ta assim:
#menu {
padding:0 0 0 0;
margin:0 0 0 0;
}
#menu a {
width:150px;
height:30px;
background:#333333;
color:#FFFFFF;
padding:0 0 0 8px;
font:10/22pt Verdana, Arial, Helvetica, sans-serif;
border-top:1px solid #000000;
text-decoration:none;
}
#menu a:hover {
background:#CCCCCC;
color:#000000;
padding:0 0 0 19px;
text-decoration:underline;
}
Entenderam? E outras coisinhas também deram errado com o CSS... Vocês pode me ajudar?

[rochester]

CODE

font:10/22pt Verdana, Arial, Helvetica, sans-serif;

provavelmente esse "10/22pt" é interpretado só pelo IE ....

tenta arrancar isso... não sei o q é esse "pt" nem sei se existe essa unidade, mas nunca vi esse "10/22" isso existe mesmo?

vai ver vc fez um hack sem querer

[hughet]

Resolvi quase tudo
era só botar um display:block; para deixar o menu do jeito que eu queria!
E os outros foi soh retirar uns paddings, porque no Internet Explorer...
O padding "apenas arrasta", já no Mozilla, Opera, Netscape, ele "aumenta", não sei explicar, só testando, ao invez de so jogar pro lado, ele "aumenta" tudo, aumenta o botao...
Exemplo...
.btn {
...
height:30;
width:120;
padding:0 0 0 20;
}
<p class="btn">Botão</p>

No internet explorer ele vai ficar no width (largura) 120px com a letra 20px pra direita...
Já no Mozilla Firefox, Opera, Netscape e outros... Ele vai ficar com o texto 20px pra direita também, mas o botao vai aumentar o botao pra width 140px (120+20)...Saco?

[hughet]

provavelmente esse "10/22pt" é interpretado só pelo IE ....

tenta arrancar isso... não sei o q é esse "pt" nem sei se existe essa unidade, mas nunca vi esse "10/22" isso existe mesmo?

Nem, esse 10/22pt é o seguinte:
10 é o tamanho da letra "real"...
22 é o tamanho que ela preencherá realmente, ou seja, ela terá "fisicamente" os 10pt, mas ela vai ocupar o espaço de uma fonte de 22pt...

PT eh o tamanho de uma fonte, nada de errado

[rochester]

mas acho q o certo aí é o ff, pq a padding é dentro do elemento, logo ele aumentará seu tamanho..

e eu nunca tinha ouvido falar desse 10/22 .. legal isso XD

[Adriano Aguiar]

Olá hughet, andei olhando sua dúvida, gostei de ter se expressado no fórum, 14 anos é um ótima idade, mas agora é o seguinte, caso dê algum erro, procure publicar e disponibilizar algum link, que analizaremos a estrutura e teremos algum retorno, a isso:

Citação Rochester:

CODE

font:10/22pt Verdana, Arial, Helvetica, sans-serif;

provavelmente esse "10/22pt" é interpretado só pelo IE ....

tenta arrancar isso... não sei o q é esse "pt" nem sei se existe essa unidade, mas nunca vi esse "10/22" isso existe mesmo? 

vai ver vc fez um hack sem querer 



-----------------------------------------------------------------------------------------
Citação hughet:

provavelmente esse "10/22pt" é interpretado só pelo IE ....

tenta arrancar isso... não sei o q é esse "pt" nem sei se existe essa unidade, mas nunca vi esse "10/22" isso existe mesmo?

Nem, esse 10/22pt é o seguinte:
10 é o tamanho da letra "real"...
22 é o tamanho que ela preencherá realmente, ou seja, ela terá "fisicamente" os 10pt, mas ela vai ocupar o espaço de uma fonte de 22pt...

PT eh o tamanho de uma fonte, nada de errado

Interessante, mas isso teoricamente falando é apenas uma redução do código, deveriamos ter alguma Matéria falando sobre isso, é algo a si pensar, mas não passa de um recurso onde se sua marcação for assim:


A, B, C {
color: #666;
font-family: Arial, sans-serif;
font-size: 10pt;
line-height: 18pt;
}

Ele Reduzido:

A, B, C {

color: #666;

font: bold 10pt/18pt Arial, sans-serif;
}

Outra citação de hughet:

No internet explorer ele vai ficar no width (largura) 120px com a letra 20px pra direita...
Já no Mozilla Firefox, Opera, Netscape e outros... Ele vai ficar com o texto 20px pra direita também, mas o botao vai aumentar o botao pra width 140px (120+20)...Saco?

Gostei muito sobre isso, pela sua citação, você ja andou estudando a estrutura DTD e a linguagem SGML desses browsers? gostaria apenas que me informasse algumas referencias que se chegou a isso, sobre sua conclusão.

Obs: Procure utilizar o CSS testado 1º em opera e firefox, depois sempre faça um CSS alternativo para internet explorer. Futuramente espero não precisarmos fazer isso, UNIFICATION WEBSTANDARD!

Espero respostas!

[hughet]

não, eu não estudei
Mas como eu tenho aqui o Mozilla, o Opera, o Netscape e o Internet Explorer (eu tenho eles pra testar), pra ver se fica igual, eu já notei que acontece isso, no internet explorer, um padding:5px 0 0 30px; por exemplo, irá arrastar o meu texto 30px pra direita, e 5px pra cima...
Já no Mozilla por exemplo, ele empurra o texto e também "aumenta a sua área", se eu der um display:block; pra ficar do tamanho que eu "regular"...
no internet explorer eu nem precisaria botar o display:block; mas pro meu menu ser corretamente vizualisado no mozilla eu tenho que botar..
o padding, além de empurrar o texto, aumentou o botão...
Já fez um teste?

[rochester]

reforço o que foi falado... o IE é o q interpreta css mais "errado" e os hacks são feitos para ele, e não para os outros browsers (ff, opera...) , até pq hacks geralmente são erros q o IE interpreta achando que é válido e os outros não, ou é uma propriedade existente que o IE acha que não existe, ou ainda é aquela gambiarra dos conditional comments