Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Aew galera,
Eu fiz um layout todo e ai ele nao tava encaixando por nada.. Fiz oq o silverfox me disse uma vez. REFAÇA do zero.
foi oque fiz. E ai coloquei nas div's border de 1px pra eu ver oq tava renderizando.
Num é que o problema tá no inicinho?! Só que não consigo ver oque é o erro. Saca só.
Contextualizando:
Fiz uma div com width fixo em 755px para ser a 'World'. (a div geral)
Dentro, coloquei outra div, que seria o 'header', com width 755px e height 214px.
O header tá no tamanho certo (tem uma imagem dentro com esse mesmo tamanho, 755x214).
Mas a 'World' tá criando um espaço extra num sei daonde !?!?
o body tem as seguintes configurações de css:
background:url(./images/bg.jpg);
background-position:center top;
background-repeat:no-repeat;
background-color:#012a60;
text-align:center;
margin:0;
padding:0;width:775px;
margin:0 auto; / Auto pra centralizar no browser/
padding:0;
border:1px solid #FF0000;margin:0;
padding:0;
width:755px;
height:214px;
border:1px solid #00FF00;NAO SEI PQ, tanto o FF quanto o IE tão inventando de fazer o 'World' com mais de 770px (+/-)... Pra piorar, além de criar espaço pro lado, o IE cria um filete de espaço pra BAIXO o.O
Screenshot pra você verem que nao tô mentindo..
/applications/core/interface/imageproxy/imageproxy.php?img=http://raphaelddl.com/iup/images/224262bug.JPG&key=704672af47b4fd90ea1b8dfab7c4b6541792de264baec835f12a0397a662fe92" alt="Imagem Postada" />
/applications/core/interface/imageproxy/imageproxy.php?img=http://raphaelddl.com/iup/images/911151bug2.JPG&key=3693fecb557a0800364d0776ff0ecd9022237e5c2263527376ff4e13d6dcd2c8" alt="Imagem Postada" />
(no IE tá sem o hack pra png ainda)
Código todo:
<html>
<head>
<title>Frank 'n' Beans</title>
</head>
<body style="background:url(./images/bg.jpg);background-position:center top;background-repeat:no-repeat;background-color:#012a60;text-align:center;margin:0;padding:0;">
<div id="World" style="width:775px;margin:0 auto;padding:0;border:1px solid #FF0000;">
<div id="header" style="margin:0;padding:0;width:755px;height:214px;border:1px solid #00FF00;">
<img src="images/header.png" style="margin:0;padding:0;border:0;" alt="" />
</div>
</div>
</body>
</html>Oq raios pode estar ocorrendo se eu coloquei margin e paddin zero pra tudo ?!
Agradeço a todos por qualquer toque
http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
No IE realmente tem esse problema de margens. Recomendo usar BACKGROUNDs ao inves de imagens, ou se for IMG mesmo tente usar position:relative; ou position:absolute;
tem uma "gambiarra" pra resolver, porém não me recordo como era vou ver se acho.
>
No IE realmente tem esse problema de margens. Recomendo usar BACKGROUNDs ao inves de imagens, ou se for IMG mesmo tente usar position:relative; ou position:absolute;
tem uma "gambiarra" pra resolver, porém não me recordo como era vou ver se acho.
no IE eu esperava algum bug monga do tipo mas pq o FF também tá inventando espaço?
Colega, será que não faltou um pouquinho de atenção no cod...
>
o 'World' tem:
width:775px;
margin:0 auto; / Auto pra centralizar no browser/
padding:0;
border:1px solid #FF0000;E o 'header' tem:
margin:0;
padding:0;width:755px;
height:214px;
border:1px solid #00FF00;São larguras diferentes...
Abs.
>
Colega, será que não faltou um pouquinho de atenção no cod...
>
o 'World' tem:
width:775px;
margin:0 auto; / Auto pra centralizar no browser/
padding:0;
border:1px solid #FF0000;E o 'header' tem:
margin:0;
padding:0;width:755px;
height:214px;
border:1px solid #00FF00;São larguras diferentes...
Abs.
affz ¬¬' pqp :blink:
malz a vergonha que passei :(
Obrigado aew Public..
São as drogas :P :rolleyes: :rolleyes: http://forum.imasters.com.br/public/style_emoticons/default/blush.gif http://forum.imasters.com.br/public/style_emoticons/default/blush.gif http://forum.imasters.com.br/public/style_emoticons/default/blush.gif http://forum.imasters.com.br/public/style_emoticons/default/blush.gif
Brinks, isso que dá refazer codigo depois de fritar a cabeça o dia todo com outras coisas :wacko: <_<
Silver,
Mas entao esse espaço embaixo que o IE inventou tem algum hack pra arrumar?
E vo ter que usar IMG pq é png, pro pngfix.htc funcionar precisa ser imagem pra dar certo, não é?
Ou rola aplicar em BG?
EDIT:
O espaço extra lembrei como tirar. É só setar para font-size:0; :)
Ainda mantenho a segunda e terceira pergunta acima.
EDIT2:
Fucei no .HTC e peguei o site do criador, fui lah e tinha o pngfix versao 2, que tem suporte a png no BG com repeat :)
mas você tentou o POSTION?
aplica na imagem do TOPO:
<div id="World" style="width:775px;border:1px solid #FF0000;">
<div id="header" style="height:214px;border:1px solid #00FF00;">
<img src="images/header.png" style="position:absolute;border:0;" alt="logo" />
</div>
</div>[editado]Poxa lembrei de uma coisa, acho que tem um navegador que não alinha com MARGIN: 0 auto; elementos que possuiem ABSOLUTE.
Não me lembro se é por causa do strict
Vou ver aqui e posto depois.
Bom, acho que resolvi silver :)
http://raphaelddl.com/clientarea/franknbeans/index.html
Nem IE6 nem FF3 dão pal.
\o/~
Se alguem tiver o IE7 e olhar plz :D?
IE7 e FF3 estão iguais.
Parabéns cara, que bom que conseguiu resolver.
Só uma observação:
Nem aplicando o CSS Reset do Yahoo resolve :)