Ir para conteúdo

POWERED BY:

Arquivado

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

Fábio Higa

Problemas com o IE

Por , em Desenvolvimento frontend

Recommended Posts

Fábio Higa    0

Fábio Higa
Postado

Saudações colegas...

 

Sou novato em Tableless e estou passando pelas mesmas dificuldades descritas pelo colega "pauloca" :

 

"problemas com o IE, renderização aleatória"

 

pauloca 10/08/2006 - 14:45

 

Olá a todos

 

Ultimanente tenho tido um problema com o IE que não entendo a causa.

No Mozila, Firefox e Opera funciona perfeitamente com excessão do IE.

Ao criar um menu usando listas do tipo ul, por exemplo, na css ao definir bordas para os elementos li, o IE mostra as bordas apenas para alguns dos elementos e mesmo assim aleatoriamente, o mesmo acontecendo para background-color, ora é apresentada ora não.

Alguém sabe qual é a razão disso e como corrigir o problema?

 

Bom, vamos lá.. o meu problema parece ser o mesmo, porém tratando-se apenas das imagens de background. Tirei alguns print-screen e simplifiquei o código de exemplo... vamos lá..

 

CSS:

a { text-decoration: none; color: #000000;}a:hover { text-decoration: underline; color: #000000; }#container_esquerda {float: left; left: 0px; width: 214px; position: relative; top: 10px;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;}#menu_item {padding: 0; margin: 14px 0px 0px;}#menu_item ul {list-style: none; padding: 0;}#menu_item li {	border-bottom: 2px solid #FFFFFF; margin: 0; background-image: url("menu_full_bg.gif");}#menu_item li a { display: block; padding: 5px 5px 5px 24px; }

 

HTML:

<div id="container_esquerda">		<strong>parte 1</strong>		<ul id="menu_item">		<li><a href="#" target="_self">Parte 1 - Item 01</a></li>		<li><a href="#" target="_self">Parte 1 - Item 02</a></li>		<li><a href="#" target="_self">Parte 1 - Item 03</a></li>		<li><a href="#" target="_self">Parte 1 - Item 04</a></li>			</ul>		<strong>parte 2</strong>		<ul id="menu_item">   		<li><a href="#" target="_self">Parte 2 - Item 01</a></li>			<li><a href="#" target="_self">Parte 2 - Item 02</a></li>			<li><a href="#" target="_self">Parte 2 - Item 03</a></li>			<li><a href="#" target="_self">Parte 2 - Item 04</a></li>	  		</ul></div>

 

Ok, agora a sequencia das imagens, a primeira acontece assim que carrega a página, a segunda ocorre quando passo o mouse de cima pra baixo passando por todos os elementos, notem que o primero item de cada "parte" não mostra o fundo.. e por ultimo a imagem que mostra o efeito aleatório, neste caso escondendo o fundo do item "Parte 2 - Item 02".

 

Imagem Postada -> Imagem Postada -> Imagem Postada

 

:: Link para página do exemplo. ::

 

Bom pessoal, como disse acima ainda sou meio novato no assunto, já aprendi muito aqui no forum e espero poder solucionar este probleminha com vocês..

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

hevertonhlt    0

hevertonhlt
Postado

eai grande..;

ai esta o menu com todos os problemas arrumados..

funciona no ie e no ff..

 

 

abracos

 

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><link href="css.css" rel="stylesheet" type="text/css"></head><body class="body"><div id="menu"><ul><h4>Parte 1</h4><li><a href="#">Parte 1 - Intem 1</a></li><li><a href="#">Parte 1 - Intem 2</a></li><li><a href="#">Parte 1 - Intem 3</a></li><li><a href="#">Parte 1 - Intem 4</a></li><h4>Parte 2</h4><li><a href="#">Parte 2 - Intem 1</a></li><li><a href="#">Parte 2 - Intem 2</a></li><li><a href="#">Parte 2 - Intem 3</a></li><li><a href="#">Parte 2 - Intem 4</a></li></ul></div></body></html>

CSS:

.body {	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;	background-color: #FFFFFF;	font-family: Arial, Helvetica, sans-serif;	font-size: 11px;}#menu {	padding-left: 10px;	width: 214px;	margin-left: 0px;	position: absolute; }#menu ul {	margin-top: 10px;	margin-bottom: 10px;	margin: 0px;	float: right;	width: 219px;}#menu ul li a {	display: list-item;	font-family: Arial, Helvetica, sans-serif;	font-size: 11px;	text-decoration: none;	color: #000;	display: block;	width: 214px;	height: 22px;	line-height: 20px;	padding-bottom: 4px;	padding-left: 25px;	background: url(img/bg_menu.gif) no-repeat;}#menu ul li a:hover {	display: list-item;	font-family: Arial, Helvetica, sans-serif;	font-size: 11px;	text-decoration: underline;	color: #000;	display: block;	width: 190px;	height: 22px;	line-height: 20px;	padding-bottom: 4px;	padding-left: 25px;	background: url(img/bg_menu.gif) no-repeat;}#menu h4 {	margin-left: 0px;	padding-left: 0px;	margin-bottom: 4px;	font-family: Arial, Helvetica, sans-serif;	font-size: 12px;	font-weight: bolder;}

 

A imagem.. do fundo do menu.. esta no tamanho de 214 por 22 de altura..

abracos

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fábio Higa    0

Fábio Higa
Postado

Nossa, valeu amigo! 100%, ficou ótimo, só não entendi onde é que estava o problema, notei alguns atributos diferentes porém não entendo porquê não funcionava. Obrigado cara! Quebrou uma árvore!!!Obrigado meeeesmo!Abraços.

Compartilhar este post

Link para o post
Compartilhar em outros sites

hevertonhlt    0

hevertonhlt
Postado

o grande..

tdo na paz..

arrumei o seu tbm! ;)

 

da uma comparadinha! ;)

 

abracos

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Untitled Document</title><style type="text/css"><!--a { text-decoration: none; color: #000000;}a:hover { text-decoration: underline; color: #000000; }#container_esquerda {float: left; left: 0px; width: 214px; position: relative; top: 10px;font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;}#menu_item {padding: 0; margin: 14px 0px 0px;}#menu_item ul {list-style: none; padding: 0;}#menu_item li { background: url(img/bg_menu.gif); width: 214px;}#menu_item li a { display: block; padding: 5px 5px 5px 24px; background: url(img/bg_menu.gif); }--></style></head><body><div id="container_esquerda">		<ul id="menu_item">		<strong>parte 1</strong>		<li><a href="#" target="_self">Parte 1 - Item 01</a></li>		<li><a href="#" target="_self">Parte 1 - Item 02</a></li>		<li><a href="#" target="_self">Parte 1 - Item 03</a></li>		<li><a href="#" target="_self">Parte 1 - Item 04</a></li>			</ul>		<ul id="menu_item"> 		<strong>parte 2</strong>		<li><a href="#" target="_self">Parte 2 - Item 01</a></li>			<li><a href="#" target="_self">Parte 2 - Item 02</a></li>			<li><a href="#" target="_self">Parte 2 - Item 03</a></li>			<li><a href="#" target="_self">Parte 2 - Item 04</a></li>	  		</ul></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

pauloca    0

pauloca
Postado

Bom dia a todos Fiz vários testes para tentar descobrir o que causa a renderização aleatória e percebi que no IE se não for especificada a largura (width) dos itens li o tal problema ocorre, definindo a largura o problema é resolvido. Não sei explicar a razão disso, se alguém souber peço a gentileza de explicar.

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