[Resolvido] Preencher espaço e linha deformada no IE

[GabrielFerrari 41]

Boa Tarde pessoal.

 

Estou com 2 probleminhas com o IE

O 1º deles é a minha linha que fica muito grossa:

 

FireFox

 

Internet Explorer

 

Como pode ser visto na imagem a diferença é muito grande entre uma e outra se fosse algo menor

até daria para deixar mas nessa condição acaba comprometendo o layout.

 

 

O 2º é no meu accordion

Eu criei um preenchimento no fundo como me ensinaram aqui uma vez porém só reparei agora que no IE ele fica com uma falha:

 

FireFox

 

Internet Explorer

 

Como da para perceber fica um espaço brando entre o botão e os itens do menu.

 

O site pode ser visto no link: http://site-teste.ueuo.com/

 

Segue a baixo o código CSS

 

LINHA:

#espaco{
	position:relative;
	float:left;
	width:100%;
	height:50px;
	margin-left:auto;
	margin-right:auto;
}
#esp_cinza{
	background:#CCCCCC;
	height:5px;
	width:100%;
}
#sgs{
	position:absolute;
	left:20px;
	top: -40px;
}
#selo{
	position:absolute;
	z-index:10;
	padding-left:inherit;
	left:80px;
	top: -60px;
}

MENU:

#text_menu{
	color:#996633;
	font-family:Calibri, Tahoma, Arial;
	font-weight:bold;
	padding-bottom:5px;
	padding-top:5px;
}
 dl,dd { margin: 0; }
 dt { padding:0px; margin: 0px; }
 ul { background-color:#996633; margin:-8px 0 0 0px; padding:0px 0 3px 5px; width:120px; list-style: none; text-align:center; line-height:80%;}
 /*li{ line-height:120%;}*/
.fundo_menu{
	background:#996633;
	width:133px;
	/*background: url('http://site-teste.ueuo.com/imagens/fundo_menu.jpg') center repeat-y;*/
}
A.link_menu:link { color: #FFFFFF; text-decoration: none; }
A.link_menu:visited { color: #FFFFFF; text-decoration: none; }
A.link_menu:hover { color: #FFFFFF; text-decoration: none; }

 

 

Coloquei apenas as partes do código referente aos problemas se tiver necessidade de postar tudo é só falar que eu posto. Reduzi para evitar que o tópico fique mais extenso do que já está

[William Bruno 1501]

Vamos por partes.

Primeiro corrija os erros de marcação:

http://validator.w3.org/check?verbose=1&am...ste.ueuo.com%2F

[GabrielFerrari 41]

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

 

Agora eu não sei como colocar as linhas entre cada item do menu sem fazer da maneira como eu tinha feito.

Eu já tinha buscado na internet e foi a única que achei.

 

Mas pelo visto é uma forma muito errada.

Não consigo encontrar bons resultados pelo fato de não saber como procurar.

 

Sei que estou tentando correr sem saber andar.

 

Eu comecei estudando ActionScript que é a única linguagem que eu sei me virar mesmo estando longe de ser um profissional.

Ai um dia meu chefe pediu para criar um site sem usar flash e eu tive que aprender meio que na hora.

 

Esse é o segundo site que me pedem.

Até consigo fazer eles com muito custo e tal mas ainda não tenho o conhecimento para fazer algo dentro dos padrões e sem gambiarras.

Agora peguei gosto pela coisa e estou estudando para conseguir ser uma bom programador porém não tenho muito tempo devido ao trabalho e escola e outras tarefas.

 

Obrigado pela ajuda.

[William Bruno 1501]

margin-bottom em cada item...

fica bem mais semântico.

 

Quais são os problemas estruturais agora ?

[GabrielFerrari 41]

Um é a linha no IE em baixo do banner que está ficando muito grossa

 

o outro é

 

O espaço que fica entre o background do menu quando se expande e o botão (que é clicado).

[William Bruno 1501]

Existem vários floats, e positions desncessários..

Do menuzinho accordion lá.. eu faria as linhas assim:

#menu ul { background-color:#996633; margin: 0; padding: 0 0 3px 5px; width:120px; list-style: none; text-align:center; }
 #menu ul li { border-bottom: 1px solid #000; height: 20px; line-height: 20px;}

Reveja todos esses floats e positions, muitos são desncessários, e tão só atrapalhando o fluxo do documento.

[GabrielFerrari 41]

William Bruno obrigado pela ajuda principalmente na parte de limpar meu código.

 

Fiz a alteração que você me passou para o menu e deu certinho o esquema das linhas porém o espaço branco entre o fundo e o botão perfil Selex continua.

 

É possível retirar isso ?

 

____________________________

 

Quanto aos flosts e positions eu não tinha percebido então vou estruturar tudo novamente assim que conseguir resolver esses problemas.

Por que mostrando que tenho tudo pronto e funcionando consigo pedir um tempo a mais para organização.

[William Bruno 1501]

Então... pelo que andei vendo.. a única coisa que você vai precisar reestruturar mesmo, é o banner..

o resto dá pra ir limpando...

 

Baixei teus arquivos aqui, e alterei um poco..

 

Olha só.. uma forma mais crossbrowser, seria fazer:

<div class="all"> 
<!-- TOPO --> 
	<div class="banner"> 
		<div id="faixa_banner"></div> 
		<div id="esq_banner"></div> 
		<div id="centro_banner"> 
			<div align="center"><img src="http://site-teste.ueuo.com/imagens/img_banner.jpg" alt="Imagens Banner" width="800" height="170" /></div> 
		</div> 
		<div id="dir_banner"></div> 
	</div>

<!-- CENTRO --> 
  <div id="info"> ..

Retirei o espaço..

e:

/*COMEÇO DO BANNER*/

.all .banner{
	pos ition:relative;
	width:100%;
	padding-bottom: 5px; /* aqui é o espaçamento */
	background-color: #cc0; /* coloca o código hexa do teu cinza aqui */
}

Tenta ai

[GabrielFerrari 41]

Rapaz deu certinho

É bem mais obvio usar padding-bottom (não sei se é o certo mas poderia ser feito com border-bottom também) mas sei la isso nem passou pela minha cabeça mas acho que não faria certinho de qualquer jeito.

 

tentei mudar o

 

dt { padding:0px; margin: 0px; }

Mas para ficar sem nenhum espaço tem que tirar o espaçamento entre os botões.

 

To tentando arrumar o menu ainda se conseguir resolver eu posto aqui.

[GabrielFerrari 41]

Resolvido!

 

 

Muito obrigado por toda a ajuda William Bruno

 

 

CSS correto:

#menu ul {
	background-color:#996633;
	margin-top:2px;
	margin-bottom:0;
	width:120px;
	list-style: none;
	text-align:center;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 5px;
}
#menu ul li { border-bottom: 1px solid #000; height: 15px; line-height: 100%;padding: 3px 0 0 1px;}
 .link_menu{
	color:#FFF;
 }
.fundo_menu{
	background:#996633;
	width:132px;
	margin-top: -5px;
}