Publicado em 23 de ago.

[Resolvido] Problema com layout

Oi pessoal!

Estou com um problema em meu layout!

Visualizando-o pelo Google Chrome, nada de erro ocorre. Já pelo Firefox, ou Internet Explorer 8, o rodapé fica com uma espécie de borda branca de 2px em toda sua volta.

O que faz com que a imagem se desloque.

Segue abaixo os códigos HTML e CSS, bem como o link para acesso e visualização nos browsers.

http://ragnacorp.forbrazil.com.br/site/index.php

CSS:

* {

	margin: 0;
	padding: 0;
	font-family: Tahoma, Verdana, Geneva, Arial;
 font-size: 8pt;
}

ul {

	list-style: none;
}

a:link, visted, hover, active {

	text-decoration: none;
 color: #FFF;
}

a:visited {

	text-decoration: none;
	color: #FFF;
}

a:hover {

	text-decoration: none;
}

a:active {

	text-decoration: none;
	color: #FFF;
}

body {

	background: #39465a;
}

div#mae {

	margin: 15px auto;
	width: 958px;
}

div#mae div#topo {

	background-image: url("../img/tentativa_02.jpg");
	height: 191px;
}

div#mae div#menu_horizontal {

	background-image: url("../img/tentativa_03.gif");
	height: 41px;
}

div#mae div#conteudo {

	background: #39465a;
	width: 789px;
	margin: 0 0 30px;
}

div#mae div#conteudo img {

	float: left;
}

div#mae div#conteudo div#conteudo_dentro {

	float: left;
 margin: 0 3px;
 background: #efefef;
	width: 779px;
	border-left: 1px #313d4d solid;
	border-right: 1px #313d4d solid;
}

div#mae div#conteudo div#conteudo_dentro div#caixa_propaganda {

	float: left;
	width: 378px;
 margin: 0 0 0 7px;
}

div#mae div#conteudo div#conteudo_dentro div#caixa_propaganda div.propaganda {

	float: left;
	width: 185px;
	height: 175px;
	margin: 2px;
	background: #39465a;
}

div#mae div#conteudo div#conteudo_dentro div#propaganda_top {

	float: left;
	margin: 0 0 0 7px;
}

div#mae div#conteudo div#conteudo_dentro div#propaganda_top div.propaganda2 {

	float: left;
	width: 251px;
	height: 110px;
	margin: 2px;
	background: #39465a;
}

div#mae div#conteudo div#conteudo_dentro div.texto {

	float: left;
	width: 381px;
	height: 173px;
	margin: 2px 0 0 2px;
	background: #c9d5e7;
	border: 1px #b0bdd0 solid;
}

div#mae div#conteudo div#conteudo_dentro div.texto div.texto_dentro {

	padding: 5px 5px 2px 10px;
	margin: 5px 0 70px;
	background: #fff;
	border-top: 1px #b0bdd0 solid;
	border-bottom: 1px #b0bdd0 solid;
}

div#mae div#conteudo div#conteudo_dentro div.texto div.texto_dentro ul li span {

	color:#47546c;
	font-size: 10pt;
	font-weight: bold;
}

div#mae div#conteudo div#conteudo_dentro div.texto div.titulo {

	height: 20px;
	padding: 3px 0 0 5px;
}

div#mae div#conteudo div#conteudo_dentro div.texto div.texto_dentro ul hr {

	border-top: 1px dashed #c9d5e7;
	border-bottom: 0px dashed #fff;
 color: #fff;
 background-color: #fff;
 height: 1px;
}

div#mae div#conteudo div#conteudo_dentro div.texto div.texto_dentro ul .dica {

	font-size: 9pt;
}

div#mae div#conteudo div#conteudo_dentro div.noticias {

	float: left;
	width: 759px;
	margin: 2px 2px 0 9px;
	background: #c9d5e7;
	border: 1px #b0bdd0 solid;
}

div#mae div#conteudo div#conteudo_dentro div.noticias div.noticias_dentro {

	margin: 35px 0 25px;
	background: #fff;
	border-top: 1px #b0bdd0 solid;
	border-bottom: 1px #b0bdd0 solid;
}

div#mae div#menu_vertical {

	float: right;
	margin: 0 0 30px;
	width: 169px;
}

div#mae div#menu_vertical img {

	float: right;
}

div#mae div#menu_vertical div.menu_vertical_meio {

	float: right;
 margin: 0 3px;
	background: #2d3647;
	width: 159px;
	border-left: 1px #485365 solid;
	border-right: 1px #485365 solid;
}

div#mae div#menu_vertical div.menu_vertical_meio ul.botao_menu_vertical li {

	display: block;
 padding: 3px 10px;
 margin: 1px 10px 0 11px;
	background: #39465A;
 width: 118px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}

div#mae div#menu_vertical div.menu_vertical_meio ul.botao_menu_vertical li.off {

	display: block;
 padding: 3px 10px;
	text-decoration: line-through;
 margin: 1px 10px 0 11px;
	background: #39465A;
 width: 118px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}

div#mae div#menu_vertical div.menu_vertical_meio ul.botao_menu_vertical li:hover {

	display: block;
 background-color: #f1d64e;
}

div#mae div#menu_vertical div.menu_vertical_meio ul.botao_menu_vertical a:hover {

	text-decoration: none;
	color: #000;
}

div#mae div#menu_horizontal ul.botao_menu_horizontal li {

	display: inline-block;
	padding: 14px 12px 15px;
	margin: 0px 3px 0px 10px;
	height: 6px;
	border-width: thin;
}

div#mae div#menu_horizontal ul.botao_menu_horizontal li:hover {

	padding: 6px 11px 15px;
	margin: 0px 3px 0px 10px;
	background: #39465A;
	border: solid;
	border-color: #313949;
	border-width: thin;
	height: 5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	}

div#mae ul.status_server {

	padding: 0 0 0 12px;
}

div#mae ul.status_server li {

	color:#FFF;
 display: inline;
}

div#mae ul.status_server span {

	color:#66FF00;
}

div#mae ul.status_login {

	float: right;
	padding: 0 13px 0 0;
}

HTML:

<!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)
<html>
	<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>@RagnaCORP.com # Seu Servidor Brasileiro de Ragnarök! </title>
 <link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
 <div id="mae">
 <ul class="status_server">
 <li>Login-Server: <span><?php include "verifica_6900.php"; ?></span> |</li>
 <li>Char-Server: <span><?php include "verifica_6121.php"; ?></span> |</li>
 <li>Map-Server: <span><?php include "verifica_5121.php"; ?></span> |</li>
 <li>Jogadores Online: <?php include "verifica_players.php"; ?></li>
 <li class="status_login">Bem-vindo! | Login | Registrar</li>
 </ul>
 <div id="topo"></div>
 <div id="menu_horizontal">
 <ul class="botao_menu_horizontal">
 <li><a href="#">Home</a></li>
 <li><a href="#">Painel de Controle</a></li>
 <li><a href="#">Fórum</a></li>
 <li><a href="#">Ajude o Servidor</a></li>
 <li><a href="#">Downloads</a></li>
 <li><a href="#">Regras de Conduta</a></li>
 <li><a href="#">Staff</a></li>
 </ul>
 </div>
 <div id="menu_vertical">
 <img src="img/tentativa_05.gif"/>
 <div class="menu_vertical_meio">
 <ul class="botao_menu_vertical">
 <li><a href="#">Página Principal</a></li>
 <li><a href="#">Fórum</a></li>
 <li><a href="#">Downloads</a></li>
 <li class="off"><a href="#">Central de Notícias</a></span></li>
 <li class="off"><a href="#">Hall da Fama</a></li>
 </ul>
 </div>
 <img src="img/tentativa_09.gif"/>
 <div class="menu_vertical_meio">
 <ul class="botao_menu_vertical">
 <li><a href="#">Crie sua Conta</a></li>
 <li><a href="#">Painel de Controle</a></li>
 <li><a href="#">Confirme seu VIP</a></li>
 <li><a href="#">Centro de Vendas</a></li>
 <li class="off"><a href="#">Pontuação em Eventos</a></li>
 <li class="off"><a href="#">Entrar em Férias</a></li>
 </ul>
 </div>
 <img src="img/tentativa_12.gif"/>
 <div class="menu_vertical_meio">
 <ul class="botao_menu_vertical">
 <li><a href="#">Ajude o Servidor</a></li>
 <li><a href="#">Planos de Conta VIP</a></li>
 </ul>
 </div>
 <img src="img/tentativa_14.gif"/>
 <div class="menu_vertical_meio">
 <ul class="botao_menu_vertical">
 <li><a href="#">Informações do Servidor</a></li>
 <li><a href="#">Como Votar no Servidor</a></li>
 <li><a href="#">Horários da WOE</a></li>
 <li><a href="#">Guia para Jogar</a></li>
 <li><a href="#">Contato</a></li>
 <li><a href="#">Staff</a></li>
 </ul>
 </div>
 <img src="img/tentativa_16.gif"/>
 </div>
 <div id="conteudo">
 <img src="img/tentativa_04.gif"/>
 <div id="conteudo_dentro">
 <div id="caixa_propaganda">
 <div class="propaganda"></div>
 <div class="propaganda"></div>
 <div class="propaganda"></div>
 <div class="propaganda"></div>
 </div>
 <div class="texto">
 <div class="titulo">
 <img src="img/titulo.gif"/>
 <img src="img/rodape.gif"/>
 </div>
 <div class="texto_dentro">
 <ul>
 <li class="dica"><span>1.</span> Acesse o painel de controle e crie sua conta de acesso.</li>
 <hr width="370px" noshade>
 <li ><span>→</span> Painel de Controle</li>
 <hr width="95px" noshade>
 <li class="dica"><span>2.</span> Faça o download do patch e instale-o na pasta do Ragnarök.</li>
 <hr width="370px" noshade>
 <li><span>→</span> Patch RagnaCORP v3.0</li>
 <hr width="120px" noshade>
 <li class="dica"><span>3.</span> Abra o executável RagnaCORP.exe e aguarde as atualizações.</li>
 <hr width="370px" noshade>
 <li class="dica"><span>4.</span> Clique em JOGAR, crie seu personagem e aproveite.</li>
 <hr width="370px" noshade>
 </ul>
 </div>
 </div>
 <div class="texto">
 <div class="titulo">
 <img src="img/titulo2.gif"/>
 <img src="img/rodape.gif"/>
 </div>
 <div class="texto_dentro">
 <ul>
 <li class="dica"><span>(30/08)</span> Inauguração do Servidor.</li>
 <hr width="370px" noshade>
 <li class="dica"><span>(30/08)</span> Inauguração do Servidor.</li>
 <hr width="370px" noshade>
 <li class="dica"><span>(30/08)</span> Inauguração do Servidor.</li>
 <hr width="370px" noshade>
 <li class="dica"><span>(30/08)</span> Inauguração do Servidor.</li>
 <hr width="370px" noshade>
 <li class="dica"><span>(30/08)</span> Inauguração do Servidor.</li>
 <hr width="370px" noshade>
 <li class="dica"><span>(30/08)</span> Inauguração do Servidor.</li>
 <hr width="370px" noshade>
 </ul>
 </div>
 </div>
 <div id="propaganda_top">
 <div class="propaganda2"><a href="[http://www.topragnarok.com.br/?s=vote&id=5814">

Aguardo ajuda da comunidade!

OBS: Lembre-se, o problema é no rodapé abaixo do conteúdo.

A imagem cria bordas de 2px em toda sua volta, o que faz com que se desloque para o lado e para baixo.

Isso no Firefox e IE, com o Google Chrome fica tudo perfeito.

Valeu pessoal!

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...