Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

cz_shiryu

Renderização no Firefox e no Opera

Por , em Desenvolvimento frontend

Recommended Posts

cz_shiryu    0

cz_shiryu
Postado

Olá galera, estou fazendo esse site http://www.casaotaku.site.br.com/delta/html/

e não consigo ter a mesma renderização no firefox e opera, que tenho no IE(normal)

alguem poderia dizer se tenho que usar algum hack...

Esse é o CSS:

@charset "utf-8";
/* CSS Document */


	body
	{
		margin: 0;
		padding: 0;
		font: 85% arial, hevetica, sans-serif;
		text-align: center;
		color: #505367;
		background-image:url(../imagens/bg_fundo.jpg);
		background-repeat:repeat-x;
		background-color:#EFEFDF;

	}
/* ---------------------- Inicio Container ---------------------- */
	#container
	{
		margin: 1em auto;
		width: 776px;
		text-align: left;
		background-color:#FFFFFF;
		border: 2px solid #FFFFFF;
	}
/* ---------------------- Fim Container ---------------------- */	

/* ---------------------- Inicio Mainnav ---------------------- */
  #mainnav{
	position: relative;
	display:block;
	height:42px;
	font-size:11px;
	font-weight:bold;
	background:transparent  url(../imagens/greenslate_background.gif) repeat-x top left;
	font-family:Arial,Verdana,Helvitica,sans-serif;
	text-transform:uppercase;
	width: 776px;
	left: 1;
}
 #mainnav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
 #mainnav ul li{display:block;float:left;margin:0 1px 0 0;}
 #mainnav ul li a{display:block;float:left;color:#EEFFDF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
 #mainnav ul li a:hover, #mainnav ul li a.current{color:#fff;background:transparent url(../imagens/greenslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- Fim Mainnav ---------------------- */

/* ---------------------- Inicio Coluna Esquerda ---------------------- */
.coluna_esquerda{
	width:357px;
	float:left;
	margin-top:10px;
	
	
}

#bloco1{
	width:324px;
	background:url(images/lft_box_bg.gif) 0 0 no-repeat #EAEADA;
	border:#DDDDCA solid 7px;
	margin:0 0 4px 0;
	padding:5px 10px 6px 9px;
	color:#878767;
	
}
#bloco1 p.imagem_esquerda{
	display:block;
	background: url(../imagens/maximus_I-m_%20copy.jpg) 0 0 no-repeat;
	width:88px;
	height:78px;
	margin:5px 0 0 0;
	float:left;
}
#bloco1 p.box_texto1{
	float:right;
	padding:0 0 0 15px;
	border-left:#F9F9F1 solid 2px;
	font:normal 11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
	width:199px;
}
#bloco1 p.box_texto1 span.titulo{
	font:normal 19px/17px Arial, Helvetica, sans-serif;
	color:#D76E08;
	background-color:inherit;
	padding:0 0 0 25px;
	margin:0 0 10px 0;
	background:url(images/one.gif) 0 0 no-repeat;
	height:17px;
	display:block;
}
#bloco2{
	width:316px;
	background:url(images/lft_box_bg.gif) 0 0 no-repeat #EAEADA;
	border:#DDDDCA solid 7px;
	margin:0 0 4px 0;
	padding:5px 10px 6px 17px;
	color:#878767;
}
#bloco2 p.imagem_esquerda{
	display:block;
	background: url(../imagens/picador_inox_p81022_G%20copy.jpg) 0 0 no-repeat;
	width:88px;
	height:78px;
	margin:8px 0 0 0;
	float:left;
}
#bloco2 p.box_texto2{
	float:right;
	padding:0 0 0 15px;
	border-left:#F9F9F1 solid 2px;
	font:normal 11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
	width:199px;
}
#bloco2 p.box_texto2 span.titulo{
	font:normal 19px/17px Arial, Helvetica, sans-serif;
	color:#D76E08;
	background-color:inherit;
	padding:0 0 0 25px;
	margin:0 0 10px 0;
	background:url(images/two.gif) 0 0 no-repeat;
	height:17px;
	display:block;
}

#bloco3{
	width:324px;
	background:url(images/lft_box_bg.gif) 0 0 no-repeat #EAEADA;
	border:#DDDDCA solid 7px;
	margin:0;
	padding:5px 10px 6px 9px;
	color:#878767;
}
#bloco3 p.imagem_esquerda{
	display:block;
	background: url(../imagens/FOTO0329.jpg) 0 0 no-repeat;
	width:94px;
	height:71px;
	margin:5px 0 0 0;
	float:left;
}
#bloco3 p.box_texto3{
	float:right;
	padding:0 0 0 15px;
	border-left:#F9F9F1 solid 2px;
	font:normal 11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
	width:199px;
}
#bloco3 p.box_texto3 span.titulo{
	font:normal 19px/17px Arial, Helvetica, sans-serif;
	color:#D76E08;
	background-color:inherit;
	padding:0 0 0 25px;
	margin:0 0 10px 0;
	background:url(images/three.gif) 0 0 no-repeat;
	height:17px;
	display:block;
}
/* ---------------------- Inicio Coluna Esquerda ---------------------- */

/*------------------------------------------------footer--------------------*/
#footer{
	width:776px;
	height:100px;
	margin:0 auto;
	background:url(images/footer_bg.gif) 0 0 repeat-x #323232;
	color:#fff;
	position: relative;
}
#footer ul{
	width:334px;
	position: absolute;
	left:188px;
	top:1px;
}
#footer ul li{
	float:left;
	color:#D4D4C6;
	background-color:inherit;
	font:normal 11px/19px Arial, Helvetica, sans-serif;
}
#footer ul li a{
	color:#D4D4C6;
	background-color:inherit;
	font:normal 11px/19px Arial, Helvetica, sans-serif;
	padding:0 7px;
	text-decoration:none;
}
#footer ul li a:hover{
	color:#D4D4C6;
	background-color:#D76E08;
}
#footer p.copyright{
	font:normal 11px/19px Arial, Helvetica, sans-serif;
	text-align:center;
	color:#D76E08;
	background-color:inherit;
	position: absolute;
	left:39px;
	top:46px;
	width: 680px;
	height: 40px;
}
#footer a.subscribe{
	background:url(images/subscribe_icon.gif) 0 2px no-repeat;
	font:normal 11px/12px Arial, Helvetica, sans-serif;
	color:#B9B99D;
	background-color:inherit;
	position:absolute;
	left:19px;
	top:68px;
	text-decoration:underline;
	width:50px;
	padding:0 0 0 18px;
}
#footer a.subscribe:hover{
	color:#9CCC37;
	background-color:inherit;
	text-decoration:none;
}
#footer a.xht{
	width:98px;
	height:20px;
	background:url(images/xhtml_bg.gif) 0 0 no-repeat;
	position:absolute;
	left:757px;
	top:23px;

}
#footer img{
	position:absolute;
	left:880px;
	top:51px;
	width:84px;
	height:26px;
}
#footer p.design{
	font:bold 12px/19px Arial, Helvetica, sans-serif;
	color:#C5BE25;
	background-color:inherit;
	position:absolute;
	left:289px;
	top:26px;
	width: 207px;
}
#footer p.design a{
	color:#FFFFFF; background-color:inherit; text-decoration:none;
	}
#footer p.design a:hover{
	color:#C5BE25; background-color:inherit;
	}
/*------------------------------------------------footer--------------------*/

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Olha, Opera e FireFox, são os navegadores atuais que renderizam o mais próximo do recomendado pelos padrões.

O "certo" mesmo, é EVITAR esses hacks todos...

 

E usar como "ultima das ultimas alternativas", qndo você tiver total certeza que seu código está o mais correto possível.

 

absolutes, e floats, retiram o elemento do fluxo do documento, o posicionando apartir da primeira ancestral com position declarado, fazendo com que o próximo ocupe o lugar.

#footer{
	clear: both;
}
Algumas muitas coisas precisam ser arrumadas..

Compartilhar este post

Link para o post
Compartilhar em outros sites

cz_shiryu    0

cz_shiryu
Postado

Obrigado pela dica, sou novato no estudo dos padrões e da semantica. Alguns termos são muito tecnicos para mim, poderia ser um pouco mais claro. Desculpe a minha ignorancia. Abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

cz_shiryu    0

cz_shiryu
Postado

Coloquei clear:boot no footer e coloquei altura manualmente nos blocos... ficou quase 100% eu queria...

sei que o codigo não está limpo mas é a solução que achei, se alguém souber de outra...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

A solução para o seus problemas está no link a seguir. Dentro dele existem outros vários links aqui do fórum, explicando como trabalhar com as css.

Como você disse que é novato, deve estudar um pouquinho.

http://forum.imasters.com.br/index.php...st&p=536888

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

cz_shiryu    0

cz_shiryu
Postado

Obrigado pela dica. Vou estudar sim. È que esse site é para empresa de um amigo por isso, precisava achar uma solução logo.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito