Visualização estranha ao carregar a página

Fabio Jp · Dezembro 10, 2009

Ola a todos..

Não sei se é normal isso, mas ao clicar em um link do site que estou fazendo,

ele carrega meio estranhamente.

SITE

IE6 - Ao carregar a pagina moda-masculina.htm, o botao moda feminina

apareçe la no topo da página, mas depois volta onde é para ele voltar.

Não sei se ta dando pra entender..

É que to acostumado a tudo ir aparecendo nos seus devidos lugares, nao aparecer

e depois se posicionar no lugar correto, como no exp. o botao moda feminina.

Clique aqui e depois clique em moda masculina.

Firefox - Seria por causa do text-indent:-9000px que ao clicar no botão (com o indent, no caso os botoes da esquerda)

que ele aparece um pontilhado inteiro a esquerda da página ?

Esse pontilhado é usado em volta de todo os links, reparem quando clicar em um, ele pontilha em volta

do link.. Isso acontece em todos os botoes.. todos tem indent..

Bom, não sei se deu pra entender mas vou tentar colocar as imagens..

IE6:

MOZILA:

CSS está muito grande, mas vou postar ele inteiro para economizar tempo..

css

/* defaut em tudo */
html, body, form, fieldset, p, a, ul, ol, li, div, legend, label, br, input, button, textarea, h1, h2, h3, h4, h5, strong {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 11px;
	font-family: verdana, arial, tahoma, "sans-serif";
	vertical-align: baseline;
	background: none;
	color: #fff;
	line-height: 1;
	text-align: left;
}
/*---------------*/

body {
	background:#191513;
}




/* DIV PRINCIPAL */
div#tudo {
	width:777px;
	margin:0 auto;
	background:/*#191513 */url(../images/fundo-bolha01.png) no-repeat 50px 0;
	/*border-right:1px solid #0e0e0e;
	border-bottom:1px solid #0e0e0e;
	border-left:1px solid #0e0e0e;*/
}




/* CABEÇALHO */
div#cabecalho {
	position:relative;
	width:777px;
	height:105px;
}

div#cabecalho h1,
div#cabecalho h1 a {
	width:341px;
	height:43px;
	display:block;
}

div#cabecalho h1 {
	position:absolute;
	top:34px;
	left:47px;
	background:url(../images/logo-b.png) no-repeat 0 0;
}

div#cabecalho h1 a {
	text-indent:-9000px;
}

div#cabecalho ul {
	width:250px;
	padding:30px 0 20px 0;
	position:absolute;
	bottom:0;
	right:25px;
	background:url(../images/fundo-bolha02.png) no-repeat 20px 0;
}

div#cabecalho ul li {
	display:inline;
}

div#cabecalho ul li a:link,
div#cabecalho ul li a:visited {
	font-size:12px;
	color:#fff;
	text-decoration:none;
	padding:0 7px;
}

div#cabecalho ul li a:hover,
div#cabecalho ul li a:active {
	color:#d5d5d5;
	text-decoration:underline;
}




/* INDEX */
div#colecao {
	width:777px;
	height:435px;
}

div#colecao ul li {
	display:inline;
}

div#colecao ul li.dts-espacador {
	float:left;
	width:6px;
	height:435px;
}

div#colecao ul li a {
	margin-left:5px;
	float:left;
	height:433px;
	border:1px solid #655a58;
	text-indent:-9000px;
}

div#colecao ul li .dst-feminino {
	width: 183px;
	background:url(../images/destaque-feminino.jpg);
	background-position:0px 0px;
}
div#colecao ul li .dst-feminino:hover {background-position: 0px -433px; text-decoration:none;}


div#colecao ul li .dst-masculino {
	width: 183px;
	background:url(../images/destaque-masculino.jpg);
	background-position:0px 0px;
}
div#colecao ul li .dst-masculino:hover {background-position: 0px -433px; text-decoration:none;}

div#colecao ul li .dst-acessorios {
	width: 183px;
	background:url(../images/destaque-acessorios.jpg);
	background-position:0px 0px;
}
div#colecao ul li .dst-acessorios:hover {background-position: 0px -433px; text-decoration:none;}

div#colecao ul li .dst-loja {
	width: 183px;
	background:url(../images/destaque-loja.jpg);
	background-position:0px 0px;
}
div#colecao ul li .dst-loja:hover {background-position: 0px -433px; text-decoration:none;}

div#marcas {
	width:777px;
	margin:20px auto 10px auto;
	height:31px;
	background:url(../images/marcas.gif) no-repeat center center;
}




/* RODAPÉ */
div#rodape {
	width:715px;
	margin:0 auto;
	border-top:3px solid #fff;
	padding:5px 0 10px 0;
	text-align:center;
	line-height:14px;
}




/* CONTEUDO */
div#conteudo {
	width:777px;
	height:435px;
}




/* LINHA - COLEÇÕES */
div#menu-colecao {
	float:left;
	width:140px;
	height:435px;
	border:1px solid #655a58;
}

div.menu-colecao-feminina {background:url(../images/botao-ft-feminina.jpg) no-repeat 0 0;}
div.menu-colecao-masculina {background:url(../images/botao-ft-masculina.jpg) no-repeat 0 0;}
div.menu-acessorios {background:url(../images/botao-ft-acessorios.jpg) no-repeat 0 0;}
div.menu-loja {background:url(../images/botao-ft-loja.jpg) no-repeat 0 0;}

div#menu-colecao li {list-style:none;}

div#menu-colecao ul li a {
	float:left;
	width: 140px;
	height:50px;;
	text-indent:-9000px;
	background-position:0px 0px;
	border-top:1px solid #655a58;
}
div#menu-colecao ul li a:hover {text-decoration:none;}

div#menu-colecao ul li a.menu-bt-feminina {background:url(../images/botao-feminina.png) no-repeat 0 0; border-top:none;}
div#menu-colecao ul li a.menu-bt-feminina:hover {background-position: 0px -50px;}

div#menu-colecao ul li a.menu-bt-masculina {background:url(../images/botao-masculina.png) no-repeat 0 0;}
div#menu-colecao ul li a.menu-bt-masculina:hover {background-position: 0px -50px;}

div#menu-colecao ul li a.menu-bt-acessorios {background:url(../images/botao-acessorios.png) no-repeat 0 0;}
div#menu-colecao ul li a.menu-bt-acessorios:hover {background-position: 0px -50px;}

div#menu-colecao ul li a.menu-bt-loja {background:url(../images/botao-loja.png) no-repeat 0 0;}
div#menu-colecao ul li a.menu-bt-loja:hover {background-position: 0px -50px;}

div#menu-colecao ul li#menu-bt-espacador {clear:both; height:231px; border-top:1px solid #655a58;}
div#menu-colecao ul li a#borda-bottom {border-bottom:1px solid #655a58;}

div#menu-colecao ul li#menu-bt-feminina-atv,
div#menu-colecao ul li#menu-bt-acessorios-atv,
div#menu-colecao ul li#menu-bt-loja-atv {width:140px; height:50px; float:left;}

div#menu-colecao ul li#menu-bt-masculina-atv{width:140px; height:50px; clear:both;}

div#menu-colecao ul li#menu-bt-feminina-atv {background:#fff url(../images/botao-feminina.png) no-repeat 0 0;}

div#menu-colecao ul li#menu-bt-masculina-atv {background:#fff url(../images/botao-masculina.png) no-repeat 0 0;}

div#menu-colecao ul li#menu-bt-acessorios-atv {background:#fff url(../images/botao-acessorios.png) no-repeat 0 0;}

div#menu-colecao ul li#menu-bt-loja-atv {background:#fff url(../images/botao-loja.png) no-repeat 0 0;}

html acessorios.htm (muda pouca coisa de um pro outro)

mas nesse ai da para ver o problema

<!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" xml:lang="pt-br" lang="pt-br">
<head>
<title>Gate Multimarcas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="pt-br" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="title" content="Gate Multimarcas" />
<meta name="author" content="Imaggine Comunicação" />
<meta name="url" content="http://www.gatemultimarcas.com.br" />
<meta name="copyright" content="Copyright © O2X 2009" />
<meta name="description" content="Diversas marcas" />
<meta name="keywords" content="gate, gate multimarcas, multimarcas, roupas" />
<meta name="rating" content="general" />
<meta name="revisit-after" content="1" />
<meta name="robots" content="all" />
<meta name="googlebot" content="index, follow" />
<meta name="classification" content="roupas, acessórios" />
<meta name="audience" content="all" />
<meta name="expires" content="never" />

<link rel="shortcut icon" href="http://www.preccisa.com.br/gate/favicon.ico">
<link rel="stylesheet" href="css/estilo.css" type="text/css" />
<!--[if IE 6]>
<script src="scripts/DD_belatedPNG.js" type="text/javascript" language="javascript"></script>
<script>
  DD_belatedPNG.fix('img , div , p, li, a, h1');
</script>
<![endif]-->
</head>

<body>
<div id="tudo">
	<div id="cabecalho">
        <h1><a href="index.htm" title="Página Inicial">Página Inicial</a></h1>
<ul>
        	<li><a href="index.htm">coleção 09/10</a> |</li>
        	<li><a href="videos.htm">vídeos</a> |</li>
        	<li><a href="contato.htm">contato</a></li>
        </ul>
    </div>
    <div id="conteudo">
    	<div id="menu-colecao" class="menu-acessorios">
        	<ul>
            	<li><a href="moda-feminina.htm" class="menu-bt-feminina" title="Moda Feminina">Moda Feminina</a></li>
            	<li><a href="moda-masculina.htm" class="menu-bt-masculina" id="borda-bottom" title="Moda Masculina">Moda Masculina</a></li>
            	<li id="menu-bt-acessorios-atv"></li>
            	<li id="menu-bt-espacador"></li>
            	<li><a href="loja.htm" class="menu-bt-loja" title="Loja">Loja</a></li>
			</ul>        
        </div>
    </div>
  <div id="marcas"></div>
    <div id="rodape">
    	Loja 01 - Rua João Corazzari, 120 - Centro - Vinhedo - Fone: (19) 7806-9628<br />
        Loja 02 - Rua Anésio A. do Amaral, esq. c/ Milton S. Meirelles - Jd. Sta. Rosa - Vinhedo - Fone: (19) 7806-9628    	
  </div>   
</div>
</body>
</html>

Thiago Retondar · Dezembro 10, 2009

O pontilhado no Mozilla é devido ao outline. É só definir como zero.

Sobre o Internet Explorer 6: já vi isso em alguns sites. É "normal".

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

Fabio Jp · Dezembro 10, 2009

Aee Thiagoo vlwww..

Zerei o outline e deu tudo certo no mozila..

Não sabia desse tal outline rsrs..

No internet 6 eu não sei oq ta acontecendo..

Eu tb ja vi isso em alguns site.. não sei se chega a ser um erro..

Mas fica meio estranho.. as imagens aparecem no topo da pagina, e só

depois que vão para o lugar certo..

Eu não estaria usando erradamente position ? float ?

Sei la.. i6, dor de cabeça como sempre..

Thiago Retondar · Dezembro 10, 2009

O que eu posso te aconselhar é o seguinte:

analise o seu HTML, ou seja, veja se eles foram colocados na ordem que aparecem no site, entendeu?

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

Fabio Jp · Dezembro 11, 2009

resolvi mas não entendi muito bem, pois não so muito bom em position..

div#menu-colecao ul {position:absolute; width:140px;} /*essa UL é a do menu lateral esquerda.. não do menu principal*/

Fabio Jp · Dezembro 11, 2009

Bom.. entendi em partes neh..

Position absolute em uma UL dentro de uma DIV com dimensões declaradas,

ira automaticamente ao topo e a esquerda dessa div, correto ?

Eu ainda acho que tem alguma coisa relacionada com o position relative do

cabeçalho... mesmo o cabeçalho sendo fechado antes de abrir a div

que abriga a UL do menu...

Nossa que rolo haushuashua..

Mas enfim.. funcionou no ie6 e não modificou nada aos outros navegadores..

é isso ai.. valew.. pode colocar um RESOLVIDO ai rsrs..

flws..

Thiago Retondar · Dezembro 11, 2009

Agora que não entendeu fui eu... ahauhauhauhauha http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif

O position: absolute se posicionará em relação ao position: relative. Se não declarar position: relative, o que está com position: absolute ficará posicionado em relação ao body.

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

Fabio Jp · Dezembro 11, 2009

Isso isso.. ao body.. vacilei.. rsrsrs..

Mais tipo.. eu usei absolute na UL e não declarei top right bottom left para ela..

Sendo assim ela ficará ao topo e esquerda da div que o abriga correto ? Pois foi oq houve..

Ou, ao fechar minha div relative(cabeçalho), ele fica automaticamente abaixo dela ?

Só soi dizer que a UL com relative está abaixo da div que esta com relative.

Pelo que eu testei.. tirei o relative do cabeçalho e mesmo assim a UL não subiu ao topo

e esquerda do body, pois eu não declarei top nem left ou right. Mas ao declarar, ai sim

ela obedeçe.. seja top left right ou bottom...

Fabio Jp · Dezembro 11, 2009

Sendo assim..

<objeto com absolute>Declarando topo, right, bottom ou left, ele se moverá dentrdo do objeto com relative</objeto com absolute>

</objeto com relative>

----------

Masss se eu fechar esse objeto com relative e abrir um outro com absolute logo

após e não declarar top, right, bottom ou left para o mesmo, ele ira ficar logo

abaixo do objeto com relative (não importa se esse objeto esta ou nao com relative,

não declarando top, right, bottom ou left, ele ficará logo abaixo).

</objeto com relative>

E não ira ao topo e left do body automaticamente, apenas se eu declarar..

HSUHUSAUA

Não sei se deu para entender.. mas é isso ai..

Thiago Retondar · Dezembro 11, 2009

Sendo assim ela ficará ao topo e esquerda da div que o abriga correto ? Pois foi oq houve..

Depende. Se a div que abriga estiver com position:relative e você setar a propriedade, sim.

<objeto com relative>

<objeto com absolute></objeto com absolute>

</objeto com relative>

<objeto com absolute></objeto com absolute>

E não ira ao topo e left do body automaticamente, apenas se eu declarar..

Isso mesmo. Ele só irá para o topo esquerdo se você declarar ambas propriedades como zero. Caso contrário, ele fica no seu fluxo normal.

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

Arquivado

Visualização estranha ao carregar a página

Recommended Posts

Fabio Jp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabio Jp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabio Jp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabio Jp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabio Jp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabio Jp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante