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

Carregando comentários...