Publicado em 27 de jun.

Layout tableless quebra todo no IE6.

Caros amigos,

venho aqui pedir ajuda a vocês com relação ao meu site. Estou montando um layout novo para ele e resolvi fazê-lo todo tableless, para - em tese - ser mais fácil modificar algo via CSS.

Em quase todos os browsers funciona perfeitamente. Porém há alguns bugs em alguns.

*Tem um buraco em baixo da logomarca no IE5.5 (mas o layout está montado OK)

*No IE8 o 'Contato' no menu foi jogado para baixo num sei pq (mas layout OK tb).

Mas no IE6 que é o problema. O layout fica totalmente destruído!!!!

Testei em trocentos navegadores, link para todas as screenshots aqui no Browsershots.Org ( Amo esse site ). Até no Apple Mobile Safari funcionou! (Screen tirada antes de eu arrumar a div da direita na parte branca).

No PSP e no Celular, fica todo bugado tb, mas acho que quando resolver o IE6, resolve tudo..

Entao gostaria que vcs dessem uma olhada e me falassem oq podería estar errado.. Se nao der pra arrumar pra TODOS, se tiver, faço um comment condicional pra CSS específico pra IE6 :(

O CSS tem quase nada pq eu sempre monto o site todo no style="" pra dpois, qdo tiver pronto, jogar no .css (é mais facil de alterar apenas um arquivo q dois toda hora, enquanto está em fase de teste)

Website: http://raphaelddl.com/v2/

Código:

<?php
include "./languages/setidioma.php";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml) lang="en">
<head>

<title>.:: RaphaelDDL.com | <?php

$default = $texto['title'];

$titlexD = $_GET['lang'] . "_" . $_GET['ddl'];

if( isset( $_GET['ddl'], $_GET['lang'] ) )

{

echo $texto[$titlexD];
}

else {

echo $default;
}
?> | Version 2.1.7 Alpha Release ::.</title>

<meta name="author" content="Coding and Layout by Raphael 'DarkDragonLord' França at RaphaelDDL.com" />

<meta name="revised" content="Raphael DDL, June,27th 2008" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta name="keywords" content="design, designer, ad, ads, advertising, propaganda, cheap, low cost, website, web site, free, download, free download, ddl.com, tutorial, PHP, CSS, xHTML, JavaScript, Java Script, JS, ddl, raphaelddl, darkdragonlord, raphael ddl" />

	<meta name="description" content="<?php echo $texto['meta_description']; ?>" />

<meta name="verify-v1" content="mByj8g+G6xREEaU/p3zSVmwE49FwFssN1FiZ/mNpz64=" />

	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" /> <!-- Icon -->
	<link rel="shortcut icon" href="./favicon.gif" type="image/gif" /> <!-- Animated Icon -->

	<script type='text/javascript' src='./scripts/loadimg.js'></script> <!-- Pre-Load Images -->
	<script type='text/javascript' src='./scripts/validaform.js'></script> <!-- Validating Form -->

 <!-- Lightbox2 JavaScripts -->
	<script src="./scripts/prototype.js" type="text/javascript"></script>
	<script src="./scripts/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
	<script src="./scripts/lightbox.js" type="text/javascript"></script>

	<link rel="stylesheet" type="text/css" href="./v2_080627.css" />
	<link rel="stylesheet" href="./scripts/lightbox.css" type="text/css" media="screen" />

</head>

<body onload="MM_preloadImages('./images/RaphaelDDL_01.jpg','./images/RaphaelDDL_04.jpg')">

<div id="Global" >
<center>

	<div id="Headwrap" class="clearfix" >

 <div id="colwrapper" class="clearfix">

 <div id="Logo" style="border:0;width:290px;height:71px;float:left;display:inline;position:relative;" >

 <img id="img_headesq" src="images/RaphaelDDL_01.jpg" style="border:0;" alt="RaphaelDDL.com" />

 </div>

 <div id="Lside" style="float:right;display:inline;position:relative;width:470px;height:71px;background:url(./images/RaphaelDDL_02.jpg);background-repeat:no-repeat;background-position:top center;color:#FFF;border:0;" >

 <div style="width:470px;padding:30px 28px 5px 0px">

 random text here

 </div>

 </div>

 </div>

	</div>

	<div id="Menuwrap" style="position:relative;width:760px;height:66px;background:url(./images/RaphaelDDL_03.jpg);background-repeat:no-repeat;background-position:top center;color:#FFF;font-weight:bold;border:0;" >

 <div style="width:760px;padding:25px 28px 0px 29px;clear:both;">

 <div id="Menu">

 <ul>

 <li><a href="http://raphaelddl.com/">Home</a></li>'>[http://raphaelddl.com/">Home](http://raphaelddl.com/)</li>
 <li><a href="http://raphaelddl.com/?ddl=about">About</a></li>'>[http://raphaelddl.com/?ddl=about">About](http://raphaelddl.com/?ddl=about)</li>
 <li><a href="http://raphaelddl.com/?ddl=portfolio">Portfolio</a></li>'>[http://raphaelddl.com/?ddl=portfolio">Portfolio](http://raphaelddl.com/?ddl=portfolio)</li>
 <li><a href="[http://raphaelddl.com/?ddl=seilah">Free](http://raphaelddl.com/?ddl=seilah) Stuff</a></li>
 <li><a href="http://raphaelddl.com/?ddl=contact">Contato</a></li>'>[http://raphaelddl.com/?ddl=contact">Contato](http://raphaelddl.com/?ddl=contact)</li>

 </ul>

 </div>

 </div>

	</div>

 <div id="wrapper" style=";width:760px;background:url(./images/RaphaelDDL_04.jpg);background-repeat:repeat-y;text-align:center;" class="clearfix" >

 <div id="colwrapper2" class="clearfix">

 <div id="Content" style="float:left;display:inline;position:relative;width:560px;">

 <div style="width:560px;padding:5px 0px 5px 29px;text-align:justify;color:#000;">

 Teste de texto2<br />Teste de texto<br />Teste de texto<br />Teste de texto<br />Teste de texto<br />Teste de texto<br />

 </div>

 </div>

 <div id="Cside" style="float:right;display:inline;position:relative;width:200px;" >

 <div style="width:200px;padding:5px 28px 5px 0px;color:#FFF;border-left:1px solid #014885;text-align:justify;">

 <center>

 <a href="[http://validator.w3.org/check?uri=referer">Home](http://raphaelddl.com/) |
 <a href="[http://raphaelddl.com/?ddl=about">About](http://raphaelddl.com/?ddl=about) |
 <a href="[http://raphaelddl.com/?ddl=portfolio">Portfolio](http://raphaelddl.com/?ddl=portfolio) |
 <a href="[http://raphaelddl.com/?ddl=seilah">Free](http://raphaelddl.com/?ddl=seilah) Stuff</a> |
 <a href="[http://raphaelddl.com/?ddl=contact">Contato](http://raphaelddl.com/?ddl=contact)

 </div>

	</div>
</center>
</div>

</body>
</html>

CSS:

/ CSS Document /

	margin:0;
	padding:0;
}

body {

	background-color:#014885;
	background-image:url(./images/bg.gif);
	background-repeat: repeat-x;
	background-position: top;
	font: 11px/1.5 Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	margin-bottom:20px;
	padding:0;
}

#Global {
	text-align:center;
	padding:0;
	width:760px;
	text-align:left;
	margin-left:auto;
	margin-right:auto;
}

#Menu ul {

	padding:0px;
	margin:0px;
	float: left;
	font-weight:bold;
	list-style:none;
	text-align:center;
	font: 11px/1.5 Verdana, Arial, Helvetica, sans-serif;
	}

#Menu ul li { display: inline; }

#Menu ul li a {

	font: 11px/1.5 Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	padding: 5px 10px 5px 10px;
	float:left;
	color: #FFF;
	text-decoration: none;

}

#Menu ul li a:hover {

	font: 11px/1.5 Verdana, Arial, Helvetica, sans-serif;
	color: #00FFFF;
	font-weight:bold;
	text-decoration:underline;
	/*background-image: url(./images/menu_bg_hl.gif);
	background-color:#FFF;
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5*/
	}

#Mirrorlinks a {

	font: 8px Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color: #FFF;
	text-decoration: none;

}

#Mirrorlinks a:hover {

	font: 8px Verdana, Arial, Helvetica, sans-serif;
	color: #00FFFF;
	font-weight:bold;
	text-decoration:underline;
	}

ul, ol {

	margin:0;
	padding:0;
	list-style:none;
	}

.dest {
	color:#166680;
	}

 /* *** Float containers fix:
 [http://www.csscreator.com/attributes/containedfloat.php](http://www.csscreator.com/attributes/containedfloat.php) *** */

.clearfix:after {

	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
 }

.clearfix{display: inline-block;}

/ Hides from IE-mac \/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/ End hide from IE-mac /

/printer styles/
@media print{

/hide the right column when printing/
#Cside, #Menu, #Headwrap, #Footer, #Footermirror {display:none;}
#colwrapper2, #Content {width:100%; float:none;}
}

Agradeço de coração!

ps.: Se quiserem comentar algo sore o lay, se acharam legal ou ruim, fiquem avontade. Só não ripem se acharem legal AHSuaShuahsAuhs

Atenciosamente,

Raphael DDL http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Discussão (10)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

brcontainer· 27 de jun.

leia sobre divmania:

http://www.maujor.com/tutorial/divmania.php

quando ecriar um layout recomendo ir fazendo passoa-a-passo observando em diversos navegadores.

Como por exemplo (FF,Opera,Ie6,Ie7,Safari) ;)

evite estilos inline tambem, outra coisa, algumas coisas está faltando semantica no seu site.

Outra coisa a TAG center é "deprecated" (está em desuso)

http://www.codehelp.co.uk/html/deprecated.html

DarkDragonLord· 27 de jun.

>
leia sobre divmania:

http://www.maujor.com/tutorial/divmania.php

Interessante :)Num entendi muito bem alguns seletores (pra falar verdade, nunca tinha visto alguns, ex: h1+h2 ou p[title])

vo ler mais calmamente pra tentar entender melhor.

>
quando ecriar um layout recomendo ir fazendo passoa-a-passo observando em diversos navegadores.

Como por exemplo (FF,Opera,Ie6,Ie7,Safari) ;)

Eu fiz mas só vendo no FF3, IE7 e Safari :Pe tava lindo em todos.

evite estilos inline tambem, outra coisa, algumas coisas está faltando semantica no seu site.

Sobre inline, aprendi o menu e o layout sem tabelas em tutorials, acho que até foi do maujor se nao me engano.

Falta de Semantica.. seria oq por exemplo?! só nao me fala pra usar h1 h2 e p pq eu odeio (pq sempre dá errado oq eu kero fazer xD)

>
Outra coisa a TAG center é "deprecated" (está em desuso)

http://www.codehelp.co.uk/html/deprecated.html

a center foi pq as duas img nao tavam centralizando pq a div tem text-align:justify; ai takei.. mas vo usar span com text-align center ou algo do tipo depois.

brcontainer· 27 de jun.

>
Eu fiz mas só vendo no FF3, IE7 e Safari tongue.gif

e tava lindo em todos.

Independente de estar lindo nesses o seu site continua sem muita semantica, não me refiro só aos H1 e H2, mas sim há isso:DIV = Dividir layout, estruturar

UL,LI = listas, menus, varias imagens, coisas com mesmo formato em ordem

P = paragrafos

fieldset,label = formularios

TABELAS = dados tabulares

É isso é um pouco de semantica entende, você está usando em tudo DIV e mais tem um monte de DIV desnecessaria.

É isso que é DIvmania o uso incorreto e desnecessario.

DarkDragonLord· 27 de jun.

>
Eu fiz mas só vendo no FF3, IE7 e Safari tongue.gif

e tava lindo em todos.

Independente de estar lindo nesses o seu site continua sem muita semantica, não me refiro só aos H1 e H2, mas sim há isso:DIV = Dividir layout, estruturar

UL,LI = listas, menus, varias imagens, coisas com mesmo formato em ordem

P = paragrafos

fieldset,label = formularios

TABELAS = dados tabulares

É isso é um pouco de semantica entende, você está usando em tudo DIV e mais tem um monte de DIV desnecessaria.

É isso que é DIvmania o uso incorreto e desnecessario.

q tem div demais eu sei.

Mas se eu tirar as que eu sei as quais você ta se referindo, não sei pq dá pal. Eu podia ter colocado padding apenas nas mais externas, mas bagunçou o lay todo nao sei pq. Ai fiz o padding ser nas mais internas e olha só, funcionou em quase todos. Não sei pq o.O

brcontainer· 27 de jun.

>
q tem div demais eu sei.

Calma amigo, foi como eu lhe disse não é porque está funcionando na maioria que uma coisa é certa, LEMBRE-SE há mais de uma maneira de se FAZER uma coisa.

DarkDragonLord· 2 de jul.

>
q tem div demais eu sei.

Calma amigo, foi como eu lhe disse não é porque está funcionando na maioria que uma coisa é certa, LEMBRE-SE há mais de uma maneira de se FAZER uma coisa.

mas tipo..estranho só no ie6 dar pal..

Btw, olhe esse site.

www.elimaq.com.br

eu que fiz. Eu usei o mesmo código que fiz pra ele como base no meu, só que ao invés de uma imagem de header, coloquei o codigo do content (pra ficar com 2 divs uma do lado da outra para ser logo e parte de texto), ai menu e o resto pra baixo (content, barra lateral etc) é quase tudo mesma coisa...

Por isso nao entendi pq começou a dar isso no IE6 apenas.. :blink:

Tu nao tem nem idéia :P?

eu to tentando montar um novo css só pra ie6 e tacar um comentario condicional soh pra ie6

brcontainer· 2 de jul.

Tu nao tem nem idéia tongue.gif?
eu to tentando montar um novo css só pra ie6 e tacar um comentario condicional soh pra ie6
será que não é isso:

background-position:center;
porem como lhe disse seria as vezes melhor você refazer, pois há mais de uma maneira de se fazer uma coisa, mesmo assim vou tentar ver o que pode ser =/

DarkDragonLord· 2 de jul.

Tu nao tem nem idéia tongue.gif?
eu to tentando montar um novo css só pra ie6 e tacar um comentario condicional soh pra ie6
será que não é isso:

background-position:center;
porem como lhe disse seria as vezes melhor você refazer, pois há mais de uma maneira de se fazer uma coisa, mesmo assim vou tentar ver o que pode ser =/

beleza, vo tentar refazer tb

anyways, tentei tirar todos os backgroudn-position e neca :X

DarkDragonLord· 11 de jul.

eu tentei refazer ele com UL e LI mas num deu muito certo..

comecei a refazer em table ams falei pra mim mesm q table nao..

bom, dei uma revisada, pedi umamigo pra revisar tb e conseguimos arrumar a quebradeira no header.

porém ainda fica bugado o float o.O

olha aí: http://raphaelddl.com/v2/

tipo, coloquei border no Content e no styler.. no IE6, passa num sei pq..será q eh akele bug que ele soma os paddings ao div? e outra coisa que achei estranho. O texto dentro.. .são 3 frases mais uma palavra e ai acontece a quebra de linha. Isso tanto no FF quanto no IE.. o.O mas se a div ta aparecendo maior que no FF, pq estaria no mesmo tamanho as frases..

mel deuz

Rodrigo B.A· 19 de jul.

Cara aqui o seu site abre perfeito no IE 6...

Eu estou com mesmo problema, e estou quase desistindo de fazer pro IE 6 :S