[Resolvido] bg acompanha rolagem no IE

João Prado · Agosto 27, 2009

Pessoal estou com um grande problema aqui. Faz poucos dias que comecei com css e a porcaria do IE já ta ferrando minha vida :angry:

no FF funciona normalmente

mas no IE quando rolo a pagina o background acompanha quando era pra fica estatico

Abaixo um print do erro:

Quando o correto deveria ficar assim:

abaixo o codigo da div com o erro:

#content{
  position:absolute;
  color:#FFFFFF;
  width:790px;
  height:501px;
  top:15px;
  left:195px;
  overflow-y:auto;
  overflow-x:hidden;
  background-image:url(images/bgcontent2.png);
  background-repeat:no-repeat;
}

obs: lembrando que no ff e no chrome funciona perfeitamente, só na porcaria do IE que foi da pau <_<

obrigado desde já

Thiago Retondar · Agosto 27, 2009

Poste o link. ;)

É necessário o uso de position?

João Prado · Agosto 27, 2009

não tem link pois o projeto estou fazendo localhost

acredito que seja necessário sim porque somente assim consegui deixar centralizado

eu havia feito uns testes aqui sem o position mesmo sem deixar centralizado e continuou do mesmo jeito http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

Thiago Retondar · Agosto 27, 2009

Para deixar centralizado, pode usar margin: 0 auto, pois do jeito que fez pode ficar centralizado na sua resolução, mas não em outra. ;)

Hospeda em algum servidor free. O 000WebHost é bem bom. :D

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

João Prado · Agosto 28, 2009

eu testei em outras resoluções e funcionou bem apenas com alguns bugs que ja estou tentando arrumar

meu problema mesmo é com o IE quando rolo a pagina o bg da div tbm sobe http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

amigo estou fazendo o site em wordpress, como faço para hospeda-lo?

ahh eu to usando IE 8, FF 3.5.2 e Chrome 2.0

João Prado · Agosto 28, 2009

pessoal aqui está minha folha de estilos completa

meu amigo David alertou que o erro pode estar em outra parte e não na que havia passado anteriormente então resolvi postar o código completo ;)

* {margin:0; padding:0;}

body {
  font:12px Arial, Helvetica, sans-serif;
  background:#0B55B7;
  margin:0 auto;
  padding:0;
  text-align:left 15px;
  width:1000px;
}

#contatobox1{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:140px;
  left:15px;
  padding:0 15px 15px 15px;
}

#contatobox2{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:100px;
  left:185px;
  padding:0 15px;
}

#contatobox3{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:180px;
  left:315px;
  padding:0 15px;
}

#contatobox4{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:200px;
  left:525px;
  padding:0 15px;
}

h1{
  font:50px Arial, Helvetica, sans-serif;
  color:#FFFFFF;
}

h2{
  font:24px Arial, Helvetica, sans-serif;
  color:#ffffff;
  text-align:center;
}

h3{
  font:18px Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  text-align:left;
}

#textos{
  font:14px Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  margin-left:40px;
  margin-right:15px;
}

#conteudo{
  position:relative;
  top:0px;
  width:1000px;
  height:531px;
  background:#0B55B7;
  background-image:url(images/bgcontent.png);
  background-repeat:no-repeat;
}

#content{
  position:absolute;
  color:#FFFFFF;
  width:790px;
  height:501px;
  top:15px;
  left:195px;
  overflow-y:auto;
  overflow-x:hidden;
  background-image:url(images/bgcontent2.png);
  background-repeat:no-repeat;
}

a{
  color:#FFFFFF;
  text-decoration:none;
}

#destaque{
  position:relative;
  color:#FFFFFF;
  top:15px;
  left:0px;
  width:710px;
  height:155px;
  border:1px solid;
  border-color:#ffffff;
  background-image:url(images/bgboxes.png);
  overflow-y:auto;
  overflow-x:hidden;

}

#titulo{
  position:relative;
  width:100%;
  line-height:22px;
  color:#ffffff;
  border-color:#FFFFFF;
  text-align:center;
  background-image:url(images/bgtitulos.png);
}
#box1{
  position:absolute;
  color:#FFFFFF;
  padding:15px;
  width:280px;
  height:330px;
  top:219px;
  border:1px solid;
  border-color:#ffffff;
  background-image:url(images/bgboxes.png);
  overflow-y:auto;
  overflow-x:hidden;
}

#infogerais{
  position:relative;
  height:22px;
  width:280px;
  line-height:22px;
  color:#000000;
  border-color:#FFFFFF;
  text-align:center;
  background-image:url(images/bgtitulos.png);
  overflow-y:auto;
  overflow-x:hidden;
}
#box2{
  position:relative;
  color:#FFFFFF;
  padding:15px;
  top:15px;
  left:330px;
  width:350px;
  height:330px;
  border:1px solid;
  border-color:#ffffff;
  background-image:url(images/bgboxes.png);
  overflow-y:auto;
  overflow-x:hidden;
}

#infoti{
  position:relative;
  height:22px;
  width:350px;
  line-height:22px;
  color:#000000;
  border-color:#FFFFFF;
  text-align:center;
  background-image:url(images/bgtitulos.png);

}

#tibox1{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:100px;
  left:15px;
  padding:0 15px 15px 15px;
  text-align:center;
}

#tibox2{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:185px;
  left:150px;
  padding:0 15px 15px 15px;
}

#infoservices{
  position:relative;
  top:15px;
  height:293px;
  width:425px;
  line-height:22px;
  color:#000000;
  border-color:#FFFFFF;
  text-align:center;
}

#header{
  position:relative;
  width:1000px;
  height:180px;
  background-image:url(images/topobg.png);
  display:block;
  text-align:right;
}

#buttonhome{
  position:relative;
  color:#FFFFFF;
  top:5px;
  right:10px;
  font:15px #ffffff Arial, Helvetica, sans-serif;
}

#buttonhome a{
  color:#FFFFFF
}

ul {
  list-style-type:none;
}

#busca{
  position:relative;
  top:0px;
  left:15px;
  width:180px;
}

#sidebar{
  position:relative;
  top:-516px;
  left:-395px;
  width:180px;
  height:531px;
  margin:0 auto; 
  z-index:1;
  background-image:url(images/bgmenu.png);
  background-repeat:no-repeat;
  text-align:left;
  color:#FFFFFF;
}

ul#sidebar {
  width:180px;
  margin:0 auto; 
  top:15px;
  left:0;
  position:absolute;
  background-image:none;
}

ul#sidebar li {
  position:relative;
  float:left;
}

ul#sidebar li a{
  display:block;
  padding: 0 15px;
  width:150px;
  height:25px;
  color:#FFFFFF;
  text-decoration:none;
}

ul#sidebar li a:hover{
  color:#999999;
  background-image:url(images/bgmenuover.png);
  background-repeat:no-repeat;
}

ul#sidebar li ul{
  display:none;
  position:absolute;
  left:180px;
  top:0px;
}

li#departamento:hover ul {
  display:block;
}

li#departamento ul a {
  top:15px;
  background-image:url(images/bgtitulos.png);
}

li#produtos:hover ul {
  display:block;
}

li#produtos ul a {
  top:15px;
  background-image:url(images/bgtitulos.png);
}

#footer{
  position:relative;
  width:1000px;
  height:57px;
  top:-531px;
  left:0px;
  font:12px bold Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  background-image:url(images/bgrodape.png);
  text-align:center;
  line-height:57px;
}

Thiago Retondar · Agosto 28, 2009

E o HTML? Ajude-nos à te ajudar. Poste o link, fica mais fácil!

João Prado · Agosto 28, 2009

não tenho link

o site está sendo feito em intranet

é um projeto em wordpress

Aqui estão os códigos das paginas que formam a index:

style.css

* {margin:0; padding:0;}

body {
  font:12px Arial, Helvetica, sans-serif;
  background:#0B55B7;
  margin:0 auto;
  padding:0;
  text-align:left 15px;
  width:1000px;
}

#contatobox1{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:140px;
  left:15px;
  padding:0 15px 15px 15px;
}

#contatobox2{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:100px;
  left:185px;
  padding:0 15px;
}

#contatobox3{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:180px;
  left:315px;
  padding:0 15px;
}

#contatobox4{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:200px;
  left:525px;
  padding:0 15px;
}

h1{
  font:50px Arial, Helvetica, sans-serif;
  color:#FFFFFF;
}

h2{
  font:24px Arial, Helvetica, sans-serif;
  color:#ffffff;
  text-align:center;
}

h3{
  font:18px Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  text-align:left;
}

#textos{
  font:14px Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  margin-left:40px;
  margin-right:15px;
}

#conteudo{
  position:relative;
  top:0px;
  width:1000px;
  height:531px;
  background:#0B55B7;
  background-image:url(images/bgcontent.png);
  background-repeat:no-repeat;
}

#content{
  position:absolute;
  color:#FFFFFF;
  width:790px;
  height:501px;
  top:15px;
  left:195px;
  overflow-y:auto;
  overflow-x:hidden;
  background-image:url(images/bgcontent2.png);
  background-repeat:no-repeat;
}

a{
  color:#FFFFFF;
  text-decoration:none;
}

#destaque{
  position:relative;
  color:#FFFFFF;
  top:15px;
  left:0px;
  width:710px;
  height:155px;
  border:1px solid;
  border-color:#ffffff;
  background-image:url(images/bgboxes.png);
  overflow-y:auto;
  overflow-x:hidden;

}

#titulo{
  position:relative;
  width:100%;
  line-height:22px;
  color:#ffffff;
  border-color:#FFFFFF;
  text-align:center;
  background-image:url(images/bgtitulos.png);
}
#box1{
  position:absolute;
  color:#FFFFFF;
  padding:15px;
  width:280px;
  height:330px;
  top:219px;
  border:1px solid;
  border-color:#ffffff;
  background-image:url(images/bgboxes.png);
  overflow-y:auto;
  overflow-x:hidden;
}

#infogerais{
  position:relative;
  height:22px;
  width:280px;
  line-height:22px;
  color:#000000;
  border-color:#FFFFFF;
  text-align:center;
  background-image:url(images/bgtitulos.png);
  overflow-y:auto;
  overflow-x:hidden;
}
#box2{
  position:relative;
  color:#FFFFFF;
  padding:15px;
  top:15px;
  left:330px;
  width:350px;
  height:330px;
  border:1px solid;
  border-color:#ffffff;
  background-image:url(images/bgboxes.png);
  overflow-y:auto;
  overflow-x:hidden;
}

#infoti{
  position:relative;
  height:22px;
  width:350px;
  line-height:22px;
  color:#000000;
  border-color:#FFFFFF;
  text-align:center;
  background-image:url(images/bgtitulos.png);

}

#tibox1{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:100px;
  left:15px;
  padding:0 15px 15px 15px;
  text-align:center;
}

#tibox2{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:185px;
  left:150px;
  padding:0 15px 15px 15px;
}

#infoservices{
  position:relative;
  top:15px;
  height:293px;
  width:425px;
  line-height:22px;
  color:#000000;
  border-color:#FFFFFF;
  text-align:center;
}

#header{
  position:relative;
  width:1000px;
  height:180px;
  background-image:url(images/topobg.png);
  display:block;
  text-align:right;
}

#buttonhome{
  position:relative;
  color:#FFFFFF;
  top:5px;
  right:10px;
  font:15px #ffffff Arial, Helvetica, sans-serif;
}

#buttonhome a{
  color:#FFFFFF
}

ul {
  list-style-type:none;
}

#busca{
  position:relative;
  top:0px;
  left:15px;
  width:180px;
}

#sidebar{
  position:relative;
  top:-516px;
  left:-395px;
  width:180px;
  height:531px;
  margin:0 auto; 
  z-index:1;
  background-image:url(images/bgmenu.png);
  background-repeat:no-repeat;
  text-align:left;
  color:#FFFFFF;
}

ul#sidebar {
  width:180px;
  margin:0 auto; 
  top:15px;
  left:0;
  position:absolute;
  background-image:none;
}

ul#sidebar li {
  position:relative;
  float:left;
}

ul#sidebar li a{
  display:block;
  padding: 0 15px;
  width:150px;
  height:25px;
  color:#FFFFFF;
  text-decoration:none;
}

ul#sidebar li a:hover{
  color:#999999;
  background-image:url(images/bgmenuover.png);
  background-repeat:no-repeat;
}

ul#sidebar li ul{
  display:none;
  position:absolute;
  left:180px;
  top:0px;
}

li#departamento:hover ul {
  display:block;
}

li#departamento ul a {
  top:15px;
  background-image:url(images/bgtitulos.png);
}

li#produtos:hover ul {
  display:block;
}

li#produtos ul a {
  top:15px;
  background-image:url(images/bgtitulos.png);
}

#footer{
  position:relative;
  width:1000px;
  height:57px;
  top:-531px;
  left:0px;
  font:12px bold Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  background-image:url(images/bgrodape.png);
  text-align:center;
  line-height:57px;
}

index.php

<div id="conteudo">
<div id="content">

<div id="textos">
		Bem vindo ao novo  Site Interno da Petropol.

Esta nova versão traz funcionalidades como as de um blog para interagir cada vez mais com o usuário.
Ainda contém pequenos erros mas já estamos trabalhando para soluciona-los o quanto antes.
Com o tempo vocês irão conhecer e se habituar com esta nova ferramenta.
<strong>
</strong>
<strong>
</strong>

Atenciosamente:<strong>
</strong>
João Pedro R. Prado
TI - Petropol Polímeros
<div id="box1">
<div id="infogerais">Principais informações</div>
</div>
<div id="box2">
<div id="infoti">Informações dos Serviços de Informática</div>
<strong>
</strong>
<div id="tibox1"><span style="text-decoration: underline;">Data/Hora</span></div>
<div id="tibox2"><span style="text-decoration: underline;">Informações</span></div>
</div>
</div>
</div>
</div>

sidebar.php

<div id="sidebar">
<ul id="sidebar">
      <li id="departamento"><a href="#">Departamentos</a>
         <div id="departamentoover">
         <ul>
             <li><a href="http://localhost/wordpress/?page_id=42">Almoxarifado</a></li>
             <li><a href="http://localhost/wordpress/?page_id=63">Compras</a></li>
             <li><a href="http://localhost/wordpress/?page_id=44">Financeiro</a></li>
             <li><a href="http://localhost/wordpress/?page_id=65">Fiscal</a></li>
             <li><a href="http://localhost/wordpress/?page_id=47">Laboratorio</a></li>      
             <li><a href="http://localhost/wordpress/?page_id=68">Manutenção</a></li>
             <li><a href="http://localhost/wordpress/?page_id=50">Produção</a></li>
             <li><a href="http://localhost/wordpress/?page_id=70">Qualidade</a></li>
             <li><a href="http://localhost/wordpress/?page_id=53">RH</a></li>
             <li><a href="http://localhost/wordpress/?page_id=56">Segurança do Trabalho</a></li>
             <li><a href="http://localhost/wordpress/?page_id=72">Serviços Gerais</a></li>
             <li><a href="http://localhost/wordpress/?page_id=58">TI</a></li>
             <li><a href="http://localhost/wordpress/?page_id=61">Vendas</a></li>
         </ul>
         </div>
      </li>
      <li id="produtos"><a href="#">Produtos</a>
         <ul>
             <li><a href="#">Nypol®  PA</a></li>
             <li><a href="#">Tenopom® POM</a></li>
             <li><a href="#">Durepol®  PBT</a></li>
             <li><a href="#">Thanelene®  TPU</a></li>
             <li><a href="#">Triapol®  Blendas</a></li>
             <li><a href="#">Tenogel®  ABS</a></li>
             <li><a href="#">Petrotene®  PP Composto</a></li>
             <li><a href="#">Polygrade®  PET</a></li>
             <li><a href="#">Alathon®  PMMA SAN</a></li>
             <li><a href="#">Makropol®  PC</a></li>
             <li><a href="#">Unipren®  Elastômeros</a></li>
         </ul>
      </li>
      <li><a href="http://localhost/wordpress/?page_id=7">Espaço Técnico</a></li>
      <li><a href="http://localhost/wordpress/?page_id=9">Contatos</a></li>
      <li><a href="http://localhost/wordpress/?page_id=12">Eventos</a></li>
      <li><a href="http://localhost/wordpress/?page_id=14">Informativos</a></li>
      <li><a href="http://localhost/wordpress/?page_id=36">Manual da Qualidade</a></li>
      <li><a href="http://localhost/wordpress/?page_id=16">Organograma</a></li>
      <li><a href="http://localhost/wordpress/?page_id=19">Política de Qualidade</a></li>
      <li><a href="http://localhost/wordpress/?page_id=21">Certificado ISO 9001:2000</a></li>
      <li><a href="http://localhost/wordpress/?page_id=38">Programa 5S</a></li>
      <li><a href="http://localhost/wordpress/?page_id=23">Segurança</a></li>
      <li><a href="#">Analilysweb</a></li>
      <li><a href="http://localhost/wordpress/?page_id=26">Eanalisys</a></li>
      <li><a href="#">Mailx</a></li>
      <li><a href="http://localhost/wordpress/?page_id=29">Webmail</a></li>
      <li><a href="http://localhost/wordpress/?page_id=32">Site externo</a></li>
</ul>
</div>

header.php

<div id="header">
 <div id="buttonhome">
 <a href="http://localhost/wordpress/">Home</a>
 </div>
</div>

footer.php

<div id="footer">

</div>

Thiago Retondar · Agosto 28, 2009

Fica muito difícil ajudar quando se está usando muitas imagens. :rolleyes: Eu colei os códigos aqui mas não deu para pegar muito bem a estrutura.

Hospede só o HTML e CSS gerado e poste o link. ^_^

João Prado · Agosto 29, 2009

tentei hospedar mas por se tratar de um projeto em wordpress quando hospedo não funciona

se quiser posso disponibilizar os arquivos para download

Thiago Retondar · Agosto 29, 2009

Fiz uns testes aqui co border e occoreu tudo certo. http://forum.imasters.com.br/public/style_emoticons/default/pinch.gif

João Prado · Agosto 30, 2009

mas é a imagem mesmo man

se quiser posso disponibilizar todos os arquivos para download

Thiago Retondar · Agosto 30, 2009

Se não tem jeito de colocar em um host free, disponibilize o .rar com HTML, CSS e Imagens.

João Prado · Agosto 31, 2009

Consegui coloca no ar

http://www.petropol.com.br/novo/indexnovo.html

Código CSS

* {margin:0; padding:0;}

body {
  font:12px Arial, Helvetica, sans-serif;
  background:#0B55B7;
  margin:0 auto;
  padding:0;
  text-align:left 15px;
  width:1000px;
}

#contatobox1{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:140px;
  left:15px;
  padding:0 15px 15px 15px;
}

#contatobox2{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:100px;
  left:185px;
  padding:0 15px;
}

#contatobox3{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:180px;
  left:315px;
  padding:0 15px;
}

#contatobox4{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:200px;
  left:525px;
  padding:0 15px;
}

h1{
  font:50px Arial, Helvetica, sans-serif;
  color:#FFFFFF;
}

h2{
  font:24px Arial, Helvetica, sans-serif;
  color:#ffffff;
  text-align:center;
}

h3{
  font:18px Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  text-align:left;
}

#textos{
  font:14px Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  margin-left:40px;
  margin-right:15px;
}

#conteudo{
  position:relative;
  top:0px;
  width:1000px;
  height:531px;
  background:#0B55B7;
  background-image:url(images/bgcontent.png);
  background-repeat:no-repeat;
}

#content{
  position:absolute;
  color:#FFFFFF;
  width:790px;
  height:501px;
  top:15px;
  left:195px;
  overflow-y:auto;
  overflow-x:hidden;
  background-image:url(images/bgcontent2.png);
  background-repeat:no-repeat;
}

a{
  color:#FFFFFF;
  text-decoration:none;
}

#destaque{
  position:relative;
  color:#FFFFFF;
  top:15px;
  left:0px;
  width:710px;
  height:155px;
  border:1px solid;
  border-color:#ffffff;
  background-image:url(images/bgboxes.png);
  overflow-y:auto;
  overflow-x:hidden;

}

#titulo{
  position:relative;
  width:100%;
  line-height:22px;
  color:#ffffff;
  border-color:#FFFFFF;
  text-align:center;
  background-image:url(images/bgtitulos.png);
}
#box1{
  position:absolute;
  color:#FFFFFF;
  padding:15px;
  width:280px;
  height:330px;
  top:219px;
  border:1px solid;
  border-color:#ffffff;
  background-image:url(images/bgboxes.png);
  overflow-y:auto;
  overflow-x:hidden;
}

#infogerais{
  position:relative;
  height:22px;
  width:280px;
  line-height:22px;
  color:#000000;
  border-color:#FFFFFF;
  text-align:center;
  background-image:url(images/bgtitulos.png);
  overflow-y:auto;
  overflow-x:hidden;
}
#box2{
  position:relative;
  color:#FFFFFF;
  padding:15px;
  top:15px;
  left:330px;
  width:350px;
  height:330px;
  border:1px solid;
  border-color:#ffffff;
  background-image:url(images/bgboxes.png);
  overflow-y:auto;
  overflow-x:hidden;
}

#infoti{
  position:relative;
  height:22px;
  width:350px;
  line-height:22px;
  color:#000000;
  border-color:#FFFFFF;
  text-align:center;
  background-image:url(images/bgtitulos.png);

}

#tibox1{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:100px;
  left:15px;
  padding:0 15px 15px 15px;
  text-align:center;
}

#tibox2{
  position:absolute;
  background-image:url(images/bgtitulos.png);
  width:185px;
  left:150px;
  padding:0 15px 15px 15px;
}

#infoservices{
  position:relative;
  top:15px;
  height:293px;
  width:425px;
  line-height:22px;
  color:#000000;
  border-color:#FFFFFF;
  text-align:center;
}

#header{
  position:relative;
  width:1000px;
  height:180px;
  background-image:url(images/topobg.png);
  display:block;
  text-align:right;
}

#buttonhome{
  position:relative;
  color:#FFFFFF;
  top:5px;
  right:10px;
  font:15px #ffffff Arial, Helvetica, sans-serif;
}

#buttonhome a{
  color:#FFFFFF
}

ul {
  list-style-type:none;
}

#busca{
  position:relative;
  top:0px;
  left:15px;
  width:180px;
}

#sidebar{
  position:relative;
  top:-516px;
  left:-395px;
  width:180px;
  height:531px;
  margin:0 auto; 
  z-index:1;
  background-image:url(images/bgmenu.png);

  background-repeat:no-repeat;
  text-align:left;
  color:#FFFFFF;
}

ul#sidebar {
  width:180px;
  margin:0 auto; 
  top:15px;
  left:0;
  position:absolute;
  background-image:none;
}

ul#sidebar li {
  position:relative;
  float:left;
}

ul#sidebar li a{
  display:block;
  padding: 0 15px;
  width:150px;
  height:25px;
  color:#FFFFFF;
  text-decoration:none;
}

ul#sidebar li a:hover{
  color:#999999;
  background-image:url(images/bgmenuover.png);
  background-repeat:no-repeat;
}

ul#sidebar li ul{
  display:none;
  position:absolute;
  left:180px;
  top:0px;
}

li#departamento:hover ul {
  display:block;
}

li#departamento ul a {
  top:15px;
  background-image:url(images/bgtitulos.png);
}

li#produtos:hover ul {
  display:block;
}

li#produtos ul a {
  top:15px;
  background-image:url(images/bgtitulos.png);
}

#footer{
  position:relative;
  width:1000px;
  height:57px;
  top:-531px;
  left:0px;
  font:12px bold Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  background-image:url(images/bgrodape.png);
  text-align:center;
  line-height:57px;
}

Código 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">
 <div id="buttonhome">
 <a href="http://localhost/wordpress/">Home</a>
 </div>
</div><div id="conteudo">
<div id="content">

<div id="textos">
                Bem vindo ao novo  Site Interno da Petropol.

Esta nova versão traz funcionalidades como as de um blog para interagir cada vez mais com o usuário.
Ainda contém pequenos erros mas já estamos trabalhando para soluciona-los o quanto antes.
Com o tempo vocês irão conhecer e se habituar com esta nova ferramenta.
<strong>
</strong>
<strong>
</strong>

Atenciosamente:<strong>
</strong>
João Pedro R. Prado
TI - Petropol Polímeros
<div id="box1">
<div id="infogerais">Principais informações</div>
</div>
<div id="box2">
<div id="infoti">Informações dos Serviços de Informática</div>
<strong>
</strong>
<div id="tibox1"><span style="text-decoration: underline;">Data/Hora</span></div>
<div id="tibox2"><span style="text-decoration: underline;">Informações</span></div>
</div>
</div>
</div>
</div>
<div id="sidebar">
<ul id="sidebar">
      <li id="departamento"><a href="#">Departamentos</a>
         <div id="departamentoover">
         <ul>
             <li><a href="http://localhost/wordpress/?page_id=42">Almoxarifado</a></li>
             <li><a href="http://localhost/wordpress/?page_id=63">Compras</a></li>
             <li><a href="http://localhost/wordpress/?page_id=44">Financeiro</a></li>
             <li><a href="http://localhost/wordpress/?page_id=65">Fiscal</a></li>
             <li><a href="http://localhost/wordpress/?page_id=47">Laboratorio</a></li>      
             <li><a href="http://localhost/wordpress/?page_id=68">Manutenção</a></li>
             <li><a href="http://localhost/wordpress/?page_id=50">Produção</a></li>
             <li><a href="http://localhost/wordpress/?page_id=70">Qualidade</a></li>
             <li><a href="http://localhost/wordpress/?page_id=53">RH</a></li>
             <li><a href="http://localhost/wordpress/?page_id=56">Segurança do Trabalho</a></li>
             <li><a href="http://localhost/wordpress/?page_id=72">Serviços Gerais</a></li>
             <li><a href="http://localhost/wordpress/?page_id=58">TI</a></li>
             <li><a href="http://localhost/wordpress/?page_id=61">Vendas</a></li>
         </ul>
         </div>
      </li>
      <li id="produtos"><a href="#">Produtos</a>
         <ul>
             <li><a href="#">Nypol®  PA</a></li>
             <li><a href="#">Tenopom® POM</a></li>
             <li><a href="#">Durepol®  PBT</a></li>
             <li><a href="#">Thanelene®  TPU</a></li>
             <li><a href="#">Triapol®  Blendas</a></li>
             <li><a href="#">Tenogel®  ABS</a></li>
             <li><a href="#">Petrotene®  PP Composto</a></li>
             <li><a href="#">Polygrade®  PET</a></li>
             <li><a href="#">Alathon®  PMMA SAN</a></li>
             <li><a href="#">Makropol®  PC</a></li>
             <li><a href="#">Unipren®  Elastômeros</a></li>
         </ul>
      </li>
      <li><a href="http://localhost/wordpress/?page_id=7">Espaço Técnico</a></li>
      <li><a href="http://localhost/wordpress/?page_id=9">Contatos</a></li>
      <li><a href="http://localhost/wordpress/?page_id=12">Eventos</a></li>
      <li><a href="http://localhost/wordpress/?page_id=14">Informativos</a></li>
      <li><a href="http://localhost/wordpress/?page_id=36">Manual da Qualidade</a></li>
      <li><a href="http://localhost/wordpress/?page_id=16">Organograma</a></li>
      <li><a href="http://localhost/wordpress/?page_id=19">Política de Qualidade</a></li>
      <li><a href="http://localhost/wordpress/?page_id=21">Certificado ISO 9001:2000</a></li>
      <li><a href="http://localhost/wordpress/?page_id=38">Programa 5S</a></li>
      <li><a href="http://localhost/wordpress/?page_id=23">Segurança</a></li>
      <li><a href="#">Analilysweb</a></li>
      <li><a href="http://localhost/wordpress/?page_id=26">Eanalisys</a></li>
      <li><a href="#">Mailx</a></li>
      <li><a href="http://localhost/wordpress/?page_id=29">Webmail</a></li>
      <li><a href="http://localhost/wordpress/?page_id=32">Site externo</a></li>
</ul>
</div>

<div id="footer">

</div>
</body>
</html>

pronto ta ai

abre pelo FF e pelo IE que vera a difereça e a quantidade de bugs que tem no IE

-------

edit- testei agora pelo IE8 e funciona norma

só que IE7 e anteriores nao =\

outra observação: agora com o site no ar abriu no IE7 mas quando testo na rede interna não funciona

Thiago Retondar · Agosto 31, 2009

Tente colocar position: relative no #content. Acho que vai funcionar. E posicione aqueles dois boxes de dentro com float e margin. :D

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

João Prado · Agosto 31, 2009

Thiago, fiz uma reestruturação do layout e tentei o máximo não usar position, usei só margin e float mas o erro continua

vou fazer o seguinte:

a div content vo deixa sem nada só para o bg e vo cria uma dentro pra coloca o conteudo com a rolagem assim ela só vai rola a div de dentro

Dee · Agosto 31, 2009

Usa tabela pra centralizar

Coloca no CSS body{ margin:0px;

E depois da tag <body> comece seu site colocando:

<table border='0' cellspacing='0' cellpadding='0' align='center' width='100%'>
   <tr>
      <td align='center'>
         SEU SITE
      </td>
   </tr>
</table>

Antes isso do que usar o position. E também trabalhar com porcentagem tem suas vantagens, pq ele pega a resolução do seu monitor. Se for por pixels, vai ficar bonito só na sua resolução e em quem tem uma igual a sua.

João Prado · Agosto 31, 2009

obrigado pela dica Dee

Já consegui centralizar meu layout usando margin e float e em relação a medida estou usando % :D

Thiago Retondar · Agosto 31, 2009

Pde atualizar a página? aqui está dando The page cannot be found.

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

João Prado · Setembro 1, 2009

Já consegui dar um jeito aqui Thiago obrigado pela atenção

coloquei uma div dentro da div content e o conteúdo dentro dessa outra div

então o bg que esta na content vai ficar estático enquanto o conteúdo que esta na outra vai rolar :D

Arquivado

[Resolvido] bg acompanha rolagem no IE

Recommended Posts

João Prado 64

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

João Prado 64

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

João Prado 64

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Prado 64

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

João Prado 64

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

João Prado 64

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

João Prado 64

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

João Prado 64

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

João Prado 64

Compartilhar este post

Link para o post

Compartilhar em outros sites

Dee 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

João Prado 64

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

João Prado 64