Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa Tarde galera, tudo bem com vocês?
Bom, eu to montando um layout para a empresa e estou tentando ao máximo fazer um site sem precisar de tables para nada (além de dados tabulares), 'tableless'.
Consegui fazê-lo em um template que fiz ( http://ddl.exofire.net/temp/index.php ) e em a primeira proposta de layout para a empresa ( http://ddl.exofire.net/temp2/index.php ).
Porém, agora em minha terceira tentativa de tableless (sem sucesso, tem umas tables na div 'Content' heheheh), no Firefox, o site aparece do jeito que eu queria. POREM, no IE6, aparece com um buraco entre a div do topo e a div do site....
Abram no FF depois no IE6:
http://ddl.exofire.net/temp3/index.php
Agora lhes pergunto, como faz para tirar um buraco que não foi colocado, sendo que todas as divs tem tanto border:0; quanto margin:0; ??
Não sei oque fazer com esse IE maldito... o f*** é ter quase todos os clientes da empresa usando o IE <_< <_< <_< <_< <_<
Código HTML: (Eu separo as partes do site para que possam ter manutenção separada e economia de leitura de um codigo fonte de uma index.php gigante...
BG_Border eh onde fica o background com a 'sombra' e a barra do menu. GlobalWrapper eh a div q tem o padding pra que as divs internas nao saiam pra cima da sombra. Header eh a div com a imagem do header lol. E wrapper eh a div q fica o content e o menu.
<body>
<div id="Top">
<?php
@include ("./top.php");
?>
</div>
<center>
<div id="BG_Border">
<div id="GlobalWrapper">
<div id="Header">
</div>
<div id="wrapper" class="clearfix" >
<div id="colwrapper" class="clearfix">
<div id="Menu" class="clearfix">
<div id="Menu_Inside">
<?php
@include ("./menu.php");
?>
</div>
</div>
<div id="Content" class="clearfix">
<?php
@include ("./main.html");
?>
</div>
</div>
</div>
</div>
</div>
<div id="Footer">
<?php
@include ("./footer.php");
?>
</div>
<div style="text-align:center;"><a href="[http://validator.w3.org/check?uri=http://ddl.exofire.net/temp3/index.php"](http://validator.w3.org/check?uri=http://ddl.exofire.net/temp3/index.php) target="_blank"><img style="border:0;" src="./images/w3cvalid_xhtml.jpg" alt="Valid XHTML 1.0 Transitional" /></a> <a target="_blank" href="[http://ddl.exofire.net/temp3/web_styles.css](http://jigsaw.w3.org/css-validator/validator?uri=)&warning=1&profile=none&usermedium=all"><img'>http://jigsaw.w3.org/css-validator/validator?uri=[http://ddl.exofire.net/temp3/web_styles.css](http://ddl.exofire.net/temp3/web_styles.css)&warning=1&profile=none&usermedium=all"><img style="border:0;" src="./images/w3cvalid_css.jpg" alt="Valid CSS!" /></a></div>
</center>Código CSS caso precisem o.O
http://ddl.exofire.net/temp3/web_styles.css
Por favor, me explique oquê o IE tá inventando no código :D
Abraços e agradeço desde já.
RaphaelDDL
RaphaelDDL.com
Sim, mas não importa o quê eu coloque no código, esse 'buraco' não sai no IE o.O~
Por isso to doido... normalmente eu escrevo o codigo e ja vou testando ambos no IE e no FF. Dessa vez eu escrevi ele todo primeiro depois upei pra testar ai ficou essa cratera no IE.. Ja mudei no css e tal mas nada T______T
E como fiz o html e o css validarem no W3C, tenho certeza que é algo que o IE renderiza errado... mas agora cabe achar oq
edit:
coloquei as bordas no BG_Border e no Top...
o IE tá dando problema com o Top.. eu me lembro que IE sempre taca um espaço nos forms (e dentro do top tem um form, só clicar no 'login' que você vê)
como q fas ?
edit2:
Q estranho.. eu nao tinha declarado o valor de height da table pq ela tava dentro de uma div que tem o valor declarado (42px)
eu declarei height:41px e agora desapareceu o buraco..... Agora eu nao entendi mais nada... quando agente nao declara o valor, ele nao pega o espaco que tiver dentro da div!?!!
Já que a maioria do pessoal da empresa (e do mundo) visualiza no IE, não seria melhor desenvolver pro IE e depois ver como fica no Firefox, Opera, etc?
Lembre-se que as tables não foram banidas pela W3C, só o jeito errado de usá-las.
Tenha em mente as duas palavras-chave do web developer:
Primeiro - Acessibilidade
Segundo - Usabilidade.
só depois pense nesse negócio de "tableless".
P.S: também desenvolvo em tableless, seguindo web standards.