width : xxx

[brunoo 0]

Bom dia galera :P

 

Eu estou com um problema porreta. Eu denho divs que tem seus tamanhos deterinado por CSS... width : 460px;

 

Ex:

[/code].fundo16 {

border-bottom : 1px solid #ffe487;

border-left : 1px solid #ffe487;

border-right : 1px solid #ffe487;

padding : 8px 5px 5px;

width : 460px;

}

 

Mas as a largura no é diferente no IE e no FireFox... como posso retirar essa diferença entre os 2?

 

Obrigado http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif

[renanfog 0]

Cara..Essa diferença é f***, já penei muito com isso...Essa diferença acontece pq os browsers tratam diferente esse negócio de width fixa com padding... o IE considera que o padding faz parte do tamanho fixo no bloco, então um div com 100 pixels de largura e com padding de 5 pixels, vai ter uma área de trabalho de 90 pixels... já o firefox considera que a sua área de conteudo vai ser 100 pixels mesmo, então cria o padding e expande o seu div, deixando ele com um tamanho de 110 pixels!!! A solução que eu achei é dividir isso em duas partes... tenho um div com 100pixels de largura e sem padding nenhum... e dentro dele, um outro div sem width e só com o padding.... funciona, mas eu quebro a cara as vezes...Alguem q domina melhor isso, qual outra solução existe???

[brunoo 0]

Tudo o que você falou é verdade! Ainda não havia percebido isso... estou tentando fazer em um mesmo div mas ta difícil :o

Mas acho que existeuma solução para isso vou continuar tentando... se alguem souber de algo a respeito...

 

Obrigado renanfog http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[renanfog 0]

Cria um div dentro do outro, cara....

da certo

 

<div style="width:460px;">      <div style="padding:5px;"></div></div>

Eu pelo menos faço assim... talvez exista uma solução mais inteligente, vamos esperar alguem aparecer ai...

[brunoo 0]

Amigo... eu tento deixa o meu código o mais limpo possível... kkk eu erco muitas horas nisso, mas eu sou assim...

 

Vou ver se consigo fazer com um único div mas se não consequir vou utilizar a sua solução http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Qualquer coisa volto a postar aqui

[pa_bruno 0]

falae galera... isso ae eh box model... tem varios lugares q explicam isso direito... o i.e. interpreta d um jeito, enquanto o FF e opera, etc interpretam d outro modo...Ex:width: 460px;border-left : 1px solid #ffe487;border-right : 1px solid #ffe487;padding : 8px 5px 5px;você tem q somar os valorer:460px (largura total)2px (bordas direita e esquerda)10px (paddings direita e esquerda)total: 472pxentaum seu div tem na verdade 472px d largura... ae para você deixa-lo com o tamanho certo, q seria 460px eh soh você diminuir a largura q você quer (460) - os valores q influenciam (12)... total: 448pxentenderam?mas naum eh soh isso... pq o i.e. interpreta da manera q vcsacham correta, colocando tudo certo, sem adicionar largura por causa dos valores... a solução eh simples... utilizar o hack respectivos desses browsers:html>body .fundo16 {width: 448px;}pronto... teste ae... q vai funcionar... somente o FF, opera, etc reconhecem esse comando... o i.e. naum... [ ;) ] qq duvida eh soh falar...

[brunoo 0]

Era isso mesmo que eu estava querendo... Eu já havia tentado usar

 

html>body .fundo16 {

width: 448px;

}

 

mas havia deixado

width: 460px;

 

Pois não havia visto nada falando do mesmo até agora.

 

Obrigado pela explicação... ficou perfeita http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

renanfog acho assim bem melhor... tente também :P

 

Obrigado pela ajuda http://forum.imasters.com.br/public/style_emoticons/default/bye1.gif

[pa_bruno 0]

estamos ae pra isso... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[renanfog 0]

Pode crer, cara...Já tinha lido sobre isso mas tinha esquecido :wacko: Vou fazer assim agora, valeu!! :D

[renanfog 0]

Cara, testando esse barato agora deu certinho... tanto IEca qto Firefox...

mas no Opera não ficou 100%..

 

se liga

 

.linkHome { PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; WIDTH: 150px; PADDING-TOP: 2px; TEXT-ALIGN: left }html>body .linkHome { WIDTH: 140px; }

No IE perfeito... firefox tb...

Mas no Opera ele criou o link com 140 px de largura e o padding como parte dele, então a área ficou de 130px pro texto.... ele interpretou meio a meio o q o firefox e o IEca fazem, entendeu o hack mas abate o padding da width....

 

sabe como arrumar??

valeu fera

[pa_bruno 0]

como você esta chamando a classe no xhtml? o opera eh sensitivo...e pow, tem um exemplo online pra ver o q q você quer naum??? falow...

[renanfog 0]

Cara, não ta online ainda.... :(

 

mas se liga, a tag é essa:

 

<a href="http://..................../jurisprudencia.htm" class="linkHome" target=_self>Jurisprudência</a>

e o css

 

.linkHome { PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 10px; PADDING-BOTTOM: 2px; WIDTH: 150px; PADDING-TOP: 2px; TEXT-ALIGN: left }	html>body .linkHome { WIDTH: 140px; }

Eu não to entendendo direito esse Opera, falaram q ele respeita as web standards, mas ele roda uns codigos proprietarios da Microsoft, tipo a rolagem colorida... e agora ele interpreta tanto o hack qto a maneira Microsoft de calcular o padding e a width....

 

Eu to com a Versão 8.01 do Opera, cria um link qualquer com esse CSS e ve se fica com 150 px ou 140 de largura.. .aqui ficou 140!! :wacko:

 

valeu cara

[pa_bruno 0]

fiz desse jeito aki e ficou com 150px... ;)

 

#linkHome {	padding: 2px 0 2px 10px;	DISPLAY: block;	WIDTH: 150px;	TEXT-ALIGN: left;	border: 1px solid #000000;}html>body #linkHome {	WIDTH: 138px;}

detalhe q usei borda pra ver qual tamanho estava... eh soh tirar a borda e colocar 140px no hack... aki ficou direitim cara... qq coisa, usa um macete, coloca um border: 0; e width: 140px; no hack... ;)

[CiberMix 0]

Huhu bom saber disso!

[pa_bruno 0]

um grande macete pra você achar problemas em divs, etc eh colocando bordas... ;) ae você sempre consegue achar onde está o problema... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif