Jump to content


Photo

Bug! - Barra De Rolagem Horizontal Aparece No Explorer 7


  • Faça o login para participar
11 replies to this topic

#1 lucianom

lucianom

    Novato no fórum

  • Usuários
  • 8 posts
  • Sexo:Não informado

Posted 16/12/2007, 11:44

Olá!
Estou modificando o template do meu blogger/blogspot O idiota e apareceu um problema. Depois que aumentei a largura do meu template começou aparecer uma barra de rolagem horizontal no Explorer, mesmo com larguras bem confortáveis como 988px. no Firefox fica perfeito até 1007px! Alguém saberia como configurar o html para resolver o problema?
Obrigado pela atenção.

#2 § Kenshin §

§ Kenshin §

    I'm coming back...!

  • Usuários
  • 574 posts
  • Sexo:Masculino
  • Localidade:BA
  • Interesses:Sou fã de linguagens direcionadas para a web, como php, (x)html, xml, wml.
    Também gosto de webdesign e ultimamente tenho me dedicado mais a aprender css, mysql, javascript, ajax e actionscript.
    Trabalho com os programas Dreamweaver, Illustrator e Flash.

Posted 16/12/2007, 14:50

se o conteudo nao ocupa toda a resolucao e mesmo assim aparece a barra de rolagem, tente zerar as margens e o padding da pagina no css:

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

vlw ^_^
Web Developer / Web Designer / Information Architect
"Living to learn... learning to live!"
Useful links: Rules | Search

#3 lucianom

lucianom

    Novato no fórum

  • Usuários
  • 8 posts
  • Sexo:Não informado

Posted 16/12/2007, 15:38

O body já está zerado:

body {
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
	}

Você teria outra sugestão?
Valeu!

#4 § Kenshin §

§ Kenshin §

    I'm coming back...!

  • Usuários
  • 574 posts
  • Sexo:Masculino
  • Localidade:BA
  • Interesses:Sou fã de linguagens direcionadas para a web, como php, (x)html, xml, wml.
    Também gosto de webdesign e ultimamente tenho me dedicado mais a aprender css, mysql, javascript, ajax e actionscript.
    Trabalho com os programas Dreamweaver, Illustrator e Flash.

Posted 16/12/2007, 17:34

abri aqui no ie e no firefox e tambem aparece barra de rolagem (nos dois).
o problema parece estar relacionado com o width da imagem do topo, e tambem com as classes .header-wrapper e .outer-wrapper, em especial esta ultima que possui margin 5px e width 1008px (total: 1018px).

tenta ajustar esses tres ai pra ver.

vlw ^_^
Web Developer / Web Designer / Information Architect
"Living to learn... learning to live!"
Useful links: Rules | Search

#5 lucianom

lucianom

    Novato no fórum

  • Usuários
  • 8 posts
  • Sexo:Não informado

Posted 17/12/2007, 20:44

Você deve ter olhado no momento que eu tava testando um monte de configurações, rs. Olhei a margem outer-wrapper e os 5px que estão na margem se referem a margem do topo da página. O que fiz então foi reduzir todas as medidas até que não restasse barra de rolagem horizontal no explorer. A barra só sumiu quando todas as classes estavam em 977px, quase 30 px a menos e não dava para aplicar o efeito do cabeçalho e rodapé se fundirem com as laterais dos navegadores. O que fiz foi deixar o cabeçalho e rodapé em 1008px e o outer-wrapper em 988px. Ficou um pequena barra horizontal no Explorer além da imagem do rodapé ficar mais distante do fim da página do que no firefox. Já que a barra só saiu do explorer com 977px outer-wrapper, o que descarateriza o blog até mesmo no firefox, resolvi deixar configurado em 1008px, o que deixa bem configurado no firefox e apenas um pouco no Explorer. O maior problema é ficar tanto espaço de margem no Explorer e continuar a barra, mesmo com as margens laterais do body e outer-wrapper estarem zerados. Realmente queria entender como resolver o problema. Se tiver mais sugestões, fico agradecido. Valeu!

#6 lucianom

lucianom

    Novato no fórum

  • Usuários
  • 8 posts
  • Sexo:Não informado

Posted 21/12/2007, 18:25

Olha que interessante!
Resolvi testar o layout do blog em resolução 1280x1024 e tudo fico bem centralizado tanto no firefox e no explorer. O problema do layout dscentralizado é só na resolução de 1024x768. Alguém saberia um meio de centralizar o layout no explorer em resolução de 1024x768?
Até mais!

#7 Renan L. Queiroz

Renan L. Queiroz

    Mestre

  • Usuários
  • 690 posts
  • Sexo:Masculino
  • Localidade:Brasilia - DF

Posted 21/12/2007, 18:48

Olha que interessante!
Resolvi testar o layout do blog em resolução 1280x1024 e tudo fico bem centralizado tanto no firefox e no explorer. O problema do layout dscentralizado é só na resolução de 1024x768. Alguém saberia um meio de centralizar o layout no explorer em resolução de 1024x768?
Até mais!


Tente isso, ah coloque no "onload" da página, assim ela chama a função automaticamente!


Edição feita por: Renan L. Queiroz, 21/12/2007, 18:50.

Especialidade: Desenvolvimento e Banco de Dados.


Este post lhe ajudou? Agradeça: Posted Image


#8 lucianom

lucianom

    Novato no fórum

  • Usuários
  • 8 posts
  • Sexo:Não informado

Posted 22/12/2007, 22:48

Não consegui inserir o "onload" no meu código. Ai está o meu código inteiro, você poderia me ajudar a inserir? Até mais!


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
	<link href='http://favatar.myfavatar.com/lucianorattam.ico' rel='shortcut icon' type='image/x-icon'/>
 <link href='http://favatar.myfavatar.com/lucianorattam.png' rel='icon' type='image/png'/>

	<b:include data='blog' name='all-head-content'/>
	<title><data:blog.pageTitle/></title>
	<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:	 Minima
Designer: Douglas Bowman
URL:	  www.stopdesign.com
Date:	 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
			 type="color" default="#fff" value="#ffffff">
   <Variable name="textcolor" description="Text Color"
			 type="color" default="#333" value="#333333">
   <Variable name="linkcolor" description="Link Color"
			 type="color" default="#58a" value="#003366">
   <Variable name="pagetitlecolor" description="Blog Title Color"
			 type="color" default="#666" value="#666666">
   <Variable name="descriptioncolor" description="Blog Description Color"
			 type="color" default="#999" value="#999999">
   <Variable name="titlecolor" description="Post Title Color"
			 type="color" default="#c60" value="#003366">
   <Variable name="bordercolor" description="Border Color"
			 type="color" default="#ccc" value="#000000">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
			 type="color" default="#999" value="#003366">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
			 type="color" default="#666" value="#666666">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
			 type="color" default="#999" value="#11593C">
   <Variable name="bodyfont" description="Text Font"
			 type="font" default="normal normal 100% Georgia, Serif" value="normal normal 105% Georgia, Times, serif">
   <Variable name="headerfont" description="Sidebar Title Font"
			 type="font"
			 default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 88% Arial, sans-serif">
   <Variable name="pagetitlefont" description="Blog Title Font"
			 type="font"
			 default="normal normal 200% Georgia, Serif" value="normal normal 266% Georgia, Times, serif">
   <Variable name="descriptionfont" description="Blog Description Font"
			 type="font"
			 default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 84% Georgia, Times, serif">
   <Variable name="postfooterfont" description="Post Footer Font"
			 type="font"
			 default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% Trebuchet, Trebuchet MS, Arial, sans-serif">
*/

/* Use this with templates/template-twocol.html */

body {
width: 1008px;
  margin: 0 auto;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
	}
#navbar {
	display:none;
	margin: 0px;
	margin:0;
	padding:0;
	}
a:link {
  color:$linkcolor;
  text-decoration:none;
  }
a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }
a:hover {
  color:$titlecolor;
  text-decoration:underline;
}
a img {
  border-width:0;
  }

/* Header
-----------------------------------------------
 */

#header-wrapper {
  width:1008px;
background:#FFF;
  margin:-15px -11px 10px;
  height:256px;
  }

#header { 
  margin:0;
  #border:;
  text-align: center;
  color:$pagetitlecolor;
}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
  color: $descriptioncolor;
 }


/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 988px;
  margin:5px auto;
  padding: 10px;
  text-align:left;
  font: $bodyfont;
 }

#main-wrapper {
  width: 618px;
  margin: -4px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;	 /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
  font: $headerfont;
  width: 185px;
margin: 0px;
  float: right;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;	  /* fix for long non-text content breaking IE sidebar float 
*/
}

#newsidebar-wrapper {
font: $headerfont;
width: 185px;
margin: 0px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}


/* Headings
----------------------------------------------- */

h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}


/* Posts
-----------------------------------------------
 */
h2.date-header {
  margin:1.3em 0 .5em;
}
.post {
  margin: 1em 0 1em;
  border-bottom:23px solid $bordercolor;
  padding-bottom: -1em;
  }
.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.6em;
  color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}

.post p {
  margin:0 0 .75em;
  line-height:1.6em;
}

.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  letter-spacing:0;
  font: $headerfont;
  line-height: 1.1em;
#background:url(http:);
  }
.comment-link {
  margin-left:0em;
  }
.post img {
  padding:4px;
	}
.post blockquote {
  margin:1em 20px;
  }
.post blockquote p {
  margin:.75em 0;
  }
/* Comments
----------------------------------------------- */
#comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }
#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
#comments-block .comment-author {
  margin:.5em 0;
  }
#comments-block .comment-body {
  margin:.25em 0 0;
  }
#comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }
#comments-block .comment-body p {
  margin:0 0 .75em;
  }
.deleted-comment {
  font-style:italic;
  color:gray;
  }

#blog-pager-newer-link {
  float: left;
 }
 
#blog-pager-older-link {
  float: right;
 }

#blog-pager { 
  text-align: center;
 }

.feed-links {
  clear: both;
  line-height: 2.5em;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar { 
  color: $sidebartextcolor;
 }

.sidebar ul {
  list-style:none;
  margin:.5em 0 .5em;
 padding:0 0 0;
}

.sidebar li {
  margin:0;
  padding:0 0 .25em 15px;
  text-indent:-15px;
  line-height:1.1em;
  }

.sidebar .widget, .main .widget { 
  #border-bottom:;
  margin:.5em .5em -.5em;
  padding:0 0 1.7em;
  }

.main .Blog { 
  border-bottom-width: 0;
}
/* Profile 
----------------------------------------------- */
.profile-img { 
  float: left;
  margin: 0 5px 5px 0;
  padding: 4px;
  border: 1px solid $bordercolor;
}

.profile-data {
  margin:2.0em 1em .5em;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  color: $sidebarcolor;
  font-weight: bold;
  line-height: 1.1em;
}

.profile-datablock { 
  margin:.5em 0 .5em;
}

.profile-textblock { 
  margin: 0 .5em 0;
  line-height: 1.1em;
}

.profile-link { 
  font: $postfooterfont;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Footer
----------------------------------------------- */
#footer {
  width: 1008px;
  clear: both;
  background:#FFF;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: -30px;
  margin-left: -11px;
  padding-top: 0px;
  line-height:1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
   }

/** Page structure tweaks for layout editor wireframe */
body#layout #header { 
  margin-left: 0px;
  margin-right: 0px;
}
]]></b:skin>
  </head>

  <body>
  <div id='outer-wrapper'><div id='wrap2'>

	<!-- skip links for text browsers -->
	<span id='skiplinks' style='display:none;'>
	  <a href='#main'>skip to main </a> |
	  <a href='#sidebar'>skip to sidebar</a>
	</span>

	<div id='header-wrapper'>
	  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='O Idiota (Cabeçalho)' type='Header'/>
</b:section>
	</div>
 
	<div id='content-wrapper'>

	   <div id='newsidebar-wrapper'>
	   <b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Arquivos' type='BlogArchive'/>
<b:widget id='LinkList2' locked='false' title='O idiota' type='LinkList'/>
<b:widget id='Label1' locked='false' title='Temas' type='Label'/>
<b:widget id='LinkList1' locked='false' title='recomendados' type='LinkList'/>
<b:widget id='LinkList3' locked='false' title='Blogs' type='LinkList'/>
</b:section>
</div>

	  <div id='main-wrapper'>
		<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
	  </div>

	  <div id='sidebar-wrapper'>
		<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML4' locked='false' title='Procure no Blog' type='HTML'/>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='BloggerButton1' locked='false' title='' type='BloggerButton'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
	  </div>

	  <!-- spacer for skins that want sidebar and main to be the same height-->
	  <div class='clear'> </div>

	</div> <!-- end content-wrapper -->

	<div id='footer-wrapper'>
	  <b:section class='footer' id='footer'>
<b:widget id='Image1' locked='false' title='' type='Image'/>
</b:section>
	</div>

  </div></div> <!-- end outer-wrapper -->

&lt;script src='http://www.google-analytics.com/urchin.js' type='text/javascript'>
</script>
&lt;script type='text/javascript'>
_uacct = "UA-1563774-1";
urchinTracker();
</script>


</body>
</html>

Resolvi o problem!

Zerei o padding:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 988px;
  margin:0;
  padding: 10px;
  text-align:left;
  font: $bodyfont;

e também zerei o line-height:

* Footer
----------------------------------------------- */
#footer {
  width: 1008px;
  clear: both;
  background:#FFF;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: -30px;
  margin-left: -11px;
  padding-top: 0px;
  line-height:0;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
   }

o primeiro liberou a expassão do outer-wrapper até 1004 e o header até 1008 no Internet Explorer eliminando o espaço em branco que ficava a direita do layout, consequência de levar em conta apenas o perfeito funcionamento do Firefox na hora de configurar o layout. Já o segundo liberou eliminou o espaço em branco que aparecia abaixo da figura do rodapé no explorer.

Valeu pela ajuda de todos.

Até mais! :D :lol:

#9 Miguceamma

Miguceamma

    MiguPenjisse

  • Usuários
  • 13201 posts

Posted 05/10/2017, 00:00

Potenzmittel Viagra Levitra Zithromax After Meal viagra Calvitie Masculine En Ligne Diflcan Cheap
Donde Comprar Cialis Precio Propecia Elezioni Cytotec Et Img online pharmacy Propecia Side Effects Laser Kamagra Info I Need Viagra Overnight Delivery Canada

#10 Miguceamma

Miguceamma

    MiguPenjisse

  • Usuários
  • 13201 posts

Posted 20/10/2017, 22:56

Cialis 20 Mg Tadalafil Buy Diflucan From Canada Keflex Is Making Me Itch viagra Amoxicillin Sodium Sterile News Articles Viagra Online 25mg Achat Lasilix 100 Mg En France
Generic Viagra Belize Prix Cialis Promo Ou Acheter Viagra Cialis Levitra why is levitra so expensive Cephalexin For Dogs Amoxicillin Clavulan
Acquistare Kamagra Strasburgo 30mg Le Priligy Generique Lotrisone viagra online prescription Direct Acticin Nix Amoxicillin Messing With A Period

#11 RonsisM

RonsisM

    Super Veterano

  • Usuários
  • 15724 posts
  • Sexo:Masculino
  • Localidade:Plovdiv

Posted 05/11/2017, 02:21

Can You Take Amoxicillin Capsule Apart viagra online Adverse Effect Of Amoxicillin Vente Libre Tadalis Sx Soft

#12 Miguceamma

Miguceamma

    MiguPenjisse

  • Usuários
  • 13201 posts

Posted 05/11/2017, 13:15

Cialis Informacion Buy Amoxicillin Antibiotics Acyclovir 400mg From Canada cheap cialis Malegra 100 Sunrise Neggram Tadalafil Generika Online Kaufen
Propecia Relax Variety Package With Apcalis Generic Cialis Sales On Amazon Prime online pharmacy Kamagra Sildenafil Amoxicillin Alternatives Cialis Generico Barcelona
Canadian Viagra Without Prescription brandlevitra on line discount isotretinoin acne for sale best website visa Men'S Health Buy Viagra




1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq