SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Brazil
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE 6 and 5 issues.

    Hi there,

    I used the code you guys gave me to fix some problems within CSS ( I think so ), but the site still doesn´t work well in the IE Version 6.0.2600.0000.xpclient.010817-1148 and most IE 5 browser. I don´t know if my code is still wrong, so I ask for you guys for your advice (again).

    the site preview is: http://www.wizsyst.com/wiz/index.htm


    Thanks again!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Some of the problems are because you didn't follow my instructions last time

    I supplied you with the full doctype which you have omitted. This means that all the box model calculations are incorrect for ie6 because it works in quirks mode with a partial doctype.

    Heres the code amended again (with a full doctype). I have also added clearer divs to the floated images so that the borders surround them. You should also see aboyut taking all the <br> out and use css instead for your spacing.

    As far as I can see this renders the same in ie6 - 6 and firefox.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <!-- DW6 -->
    <head>
    <title>..:Wiz Systems do Brasil - Quem Somos :..</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    /* CSS Document */
    /* The text-align: center; is used to prevent the following browsers from not centering the containing blocks: * NN4 (Mac and Win) * Win/IE4 * Win/IE5 * Win/IE5.5 * Win/IE6 (when in quirks-mode) using this will only take effect in those browser, the CSS code will overall it in browsers tha support the code */
    body { text-align: center;
    	   background-color: #EBEBEB; }
    /* Entire Page (Container) */
    #container {
    			background-image: url(http://www.wizsyst.com/wiz/Assets/jpgs/bg_6.jpg);
    			background-repeat: no-repeat;
    			background-position: bottom right;
    			background-color: #fff;
    			width: 759px;
    			margin-left: auto;
    			margin-right: auto;
    			text-align: left;
    			color: #333; 
    			border: 1px solid gray;
    			line-height: 130%; }
       
    * html #container {width:761px;w\idth:759px}
    /* Heading (Cabe?alho) */
    #top {
    	  background: #fff url(http://www.wizsyst.com/wiz/Assets/top_2.gif) no-repeat right top;
    	  height:90px;
    	  border-bottom: 1px solid gray; 
    	  position:relative; } 
     
    /* Exemplo de "Descendant Selector" */
    #top h1 {
    		 padding: 0;
    		 margin: 0; }
       
    /* Flash utilizado no topo da p?gina */
     
    #flash_topo { 
    			 margin-top:-0.3em;
    			 float: left; }
     
    /* Leftnav (Navega??o da Esquerda */
    #leftnav {
    		  float: left;
    		  width: 160px;
    		  margin: 0;
    		  margin-left: 3px;
    		  padding: 10px;
    	}
    	
    * html #leftnav { display:inline;width:180px;w\idth:160px}
    /* Links - Navega??o Esquerda */
     
    #leftnav a { text-decoration: none; }
    #leftnav a:hover { color: red;
    				   text-decoration: underline;
    				   width: 100%; }
    	   
    /* Rightnav (Navega??o da Direita) */
    /* Content (Corpo - Coluna Principal) */
    /* The max-width: 36em, sets the maximum width on the main content. Although IE browsers will ignore the rule, the other standard compliant browsers will not alow the content area to go wider than the width you specify. */
     
    #content {
    		  font-family: Helvetica, sans-serif;
    		  font-size: 12px;
    		  color: #000;
    		  margin-left: 200px;
    		  margin-right: 0px;
    		  padding-top: 0;
    		  border-left: 1px solid gray; }
    	
    /* commented backslash hack \*/ 
    * html #content {height:1%}
    /* end hack */
     
    #content h1 { font-family: Helvetica, sans-serif;
    			  font-size: 17px;
    			  border: 1px solid gray;
    			  border-left: none;
    			  border-right: none;
    			  background-color: #ddd; }
     
    #img1 { padding-top: 0;
    			margin-right: 0.5em; }
     
    #content h4 { font-size: 14px;
    			  color: green;
    			  border-bottom: 1px solid black; }
    	 
    #content h2 { 
    			 font-size: 16px;
    			 color: #999;
    			 padding-bottom: 0;
    			 margin-bottom: 0; }
     
    #content a { font-size: 11px; }
    #content a:hover { font-size: 11px;
    				   color: green;
    				   border: 1px solid silver;
    				   background-color: #F8F8F8;
    				   width: auto; }
    	   
    #content p { margin-left: 4px; }
    /* Alinhamento das imagens da p?gina Principal. */
    #img2 { float: left;
    			margin-left: 0;
    			padding-left: 0; }
     
    #img3 { float: right;
    		margin-left: 10px;
    		padding-left: 10px;
    		margin-top: -3.5em; }
    img {display:block} 
    /* Footer (Rodap?) */
    /* The clear: both; command will force the footer below any floated elements above. */
    #footer {
    		 background: #ddd url(http://www.wizsyst.com/wiz/Assets/jpgs/rodape.jpg) no-repeat right bottom;
    		 clear: both;
    		 margin: 0;
    		 padding: .5em;
    		 color: #333;
    		 border-top: 1px solid gray;
    		 border-bottom: 1px solid gray;
    		 padding-top: 1.4em;
    		 margin-top: 1.4em; }
     
    /* To remove the space above content in the "lefnav", "rightnav" and "content" */
    #leftnav p { margin: 0 0 10px 0; }
    #content h2 { margin: 0 0 .5em 0; }
    /* Este id serve para alinha os campos de preenchimento de acordo com o gr?fico, assim como customizar os campos */
    #campo1 input {
    			   font-family: Tahoma, Arial, sans-serif;
    			   color: #000;
    			   background-color: #fff;
    			   border: 1px solid gray;
    			   font-size: 10px; } 
    #campo1 {
    		 font-family: Tahoma, Arial, sans-serif;
    		 font-size: 11px;
    		 color: #000;
    		 position:absolute;
    		 top:54px;
    		 left:382px;
    		 width:400px;
       margin-right: 2.5em; }
       
    * html #campo1 {top:56px;left:382px;}
     
     
    /* Bordas Navega??o Esquerda */ 
     
    div.Article {
    			 background: url(http://www.wizsyst.com/wiz/Assets/bo...cao/e_topo.gif) top left no-repeat;
    			 width: 180px; }
     
    div.Article h2 {
    				background: url(http://www.wizsyst.com/wiz/Assets/bo...cao/d_topo.gif) top right no-repeat;
    				font-family: Helvetica;
    				font-size: 14px;
    				padding: 22px;
    				margin: 0;
    				padding-bottom: 1.2em;
    				padding-top: 10px; }
     
    div.ArticleBody {
    				  background:url(http://www.wizsyst.com/wiz/Assets/bo...o/d_borda1.gif) top right repeat-y;
    				  margin: 0;
    				  margin-top: 0;
    				  padding-left: 14px;
    				  padding-top: 0px; }
     
    div.ArticleBody ul {
    					font-family: Helvetica, sans-serif;
    					font-size: 12px;
    					margin-left: 0;
    					padding-left: 0; }
     
    div.ArticleBody li { list-style: none;
    					 padding-left: 14px;
    					 background-image: url(http://www.wizsyst.com/wiz/Assets/lista/type_10.gif);
    					 background-repeat: no-repeat;
    					 background-position: 0.1em; }
    div.ArticleFooter {
    background: url(http://www.wizsyst.com/wiz/Assets/bo...ao/e_fundo.gif) bottom left no-repeat; }
     
    div.ArticleFooter p {
    					  background: url(http://www.wizsyst.com/wiz/Assets/bo...o/d_fundo2.gif) bottom right no-repeat;
    					  display: block;
    					  padding: 45px;
    					  margin-top: 45px; }
     
    /* Comando Universal de margens */
    * { margin: 0; padding: 0; }
     
    /* Quem Somos */
    #publico { font-size: 13px;
    		   border: 1px solid gray;
    		   border-right: none;
    		   border-left: none;
    		   background: #fff;
    		   width: auto; }
     
    #privado { font-size: 13px;
    		   border: 1px solid gray;
    		   border-right: none;
    		   border-left: none;
    		   background: #fff;
    		   width: auto;}
    	 
    #privado img { padding-top: 0;
    			   margin-top: 3.5em; }
     
    #business { font-size: 13px;
    			border: 1px solid gray;
    			border-right: none;
    			border-left: none;
    			background: #fff;
    			width: auto; }
     
    /* commented backslash hack \*/ 
    * html #publico,* html #privado, *html #business  {height:1%}
    /* end hack */
     
    /* Diferencial */
     
    #instalacoes img { margin-left: 22px;
    				   border: 4px double silver;
    				   white-space: nowrap; }
     
    /* Qualidade */
    #textoInovacao1 { margin-right: 370px;
    				  border: 1px solid gray;
    				  border-top: none;
    				  border-left: none;
    				  background-color: silver; }
    	  
    #textoInovacao2 { margin-right: 187px;
    				  margin-left: 184px;
    				  margin-top: -5.3em;
    				  border: 1px solid gray;
    				  border-top: none;
    				  background-color: silver; }
    	   
    #textoInovacao3 { margin-left: 367px;
    				  margin-right: 4px;
    				  margin-top: -5.4em;
    				  border: 1px solid gray;
    				  background-color: silver; }
     
    #textoJgrade { margin-left: 290px;
    			   border: 1px solid gray;
    			   border-top: none;
    			   border-left: none;
    			   border-right: none;
    	  margin-top: -9em; }
     
    #textoSigem { 
    			 margin-left: 290px;
    			 margin-top: -10.4em;
    			 border: 1px solid gray;
    			 border-top: none;
    			 border-left: none;
    			 border-right: none; }
     
    #textoBusiness { 
    				 margin-left: 290px;
    				 margin-top: -9em;
    				 border: 1px solid gray;
    				 border-top: none;
    				 border-left: none;
    				 border-right: none; }
     
    /* Bordas - Not?cias */
    div.News {
    		   background: url(http://www.wizsyst.com/wiz/Assets/bo...ias/e_topo.gif) top left no-repeat;
    		   width: 450px;
    		   margin-left: 35px; }
     
    div.News img { float: right;
    			   margin-right: 1.2em;
    	  margin-top: 0.5em; }
    div.News h5 { background: url(http://www.wizsyst.com/wiz/Assets/bo...ias/d_topo.gif) top right no-repeat;
    			  font-family: Helvetica, sans-serif;
    			  font-size: 16px;
    	 text-align: center;
    			  padding: 22px;
    			  margin: 0;
    			  padding-bottom: 1.2em;
    			  padding-top: 10px; }
    	 
    div.News h6 { font-family: Helvetica, sans-serif;
    			  font-size: 11px;
    			  border-bottom: 1px solid olive;
    			  width: 97%; } 
     
    div.NewsBody { background: url(http://www.wizsyst.com/wiz/Assets/bo...s/d_borda1.gif) top right repeat-y;
    			   margin: 0;
    			   margin-top: 0;
    			   padding-left: 14px;
    			   padding-top: 55px; }
     
    div.NewsFoot { background: url(http://www.wizsyst.com/wiz/Assets/bo...s/e_fundo1.gif) bottom left no-repeat; }
     
    div.NewsFoot p { background: url(http://www.wizsyst.com/wiz/Assets/bo...s/d_fundo2.gif) bottom right no-repeat;
    				 display: block;
    				 padding: 30px;
    	 margin-top: 0;
    	 margin-right: 0; }
    	 
    	 
    /* Contato */
    #forms { margin-left: 2.5em;
    		 margin-right: 25em;
       margin-top: -43em;
       border-right: 1px solid silver; }
    #forms p { font-family: Tahoma, sans-serif;
    		   font-size: 11px; }   
    	 
    #forms select { font-family: Tahoma, sans-serif;
    				font-size: 11px;
    	border: 1px solid silver;
    	background-color: white; }
    	
    #forms input { font-family: Tahoma, sans-serif;
    			   font-size: 11px;
    	  border: 1px solid silver;
    	  background-color: white; }
    	  
    #forms textarea { font-family: Tahoma, sans-serif;
    				  font-size: 11px;
    	  border: 1px solid silver;
    	  background-color: white; }
    	  
    #endereco { margin-left: 23.5em;
    			margin-right: 0.5em;
       padding: 0; }
       
    #endereco p { font-family: Tahoma, sans-serif;
    			  font-size: 12px; }
    	 
    #endereco img { padding: 0;
    				margin-top: 2.5em;
    	margin-left: 2.5em; }
    	  
    .clearer {
     height:1px;
     overflow:hidden;
     clear:both;
     margin-top:-1px;
    }
    </style>
    </head>
    <body>
    <div id="container"> 
      <div id="top"> 
    	<div id="flash_topo"> 
    	  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/s...rsion=6,0,29,0" width="100" height="55">
    		<param name="movie" value="Assets/flash/teste_topo.swf">
    		<param name="quality" value="high">
    		<embed src="http://www.wizsyst.com/wiz/Assets/flash/teste_topo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="100" height="55"></embed></object>
    	</div>
    	<div id="campo1">Intranet - Username: 
    	  <input type="text" name="user">
    	  Senha: 
    	  <input type="password" name="Senha">
    	  &nbsp; 
    	  <input type="submit" name="eviar" value="Ok">
    	</div>
      </div>
      <div id="leftnav"> 
    	<div class="Article"> 
    	  <h2>&nbsp; &nbsp; &nbsp; Wiz Systems</h2>
    	  <div class="ArticleBody"> 
    		<ul>
    		  <li><a href="index.htm">Quem Somos</a></li>
    		  <li><a href="diferencial.htm">Nosso Diferencial</a></li>
    		  <li><a href="qualidade.htm">Qualidade</a></li>
    		  <li><a href="publico.htm">Setor Público</a></li>
    		  <li><a href="privado.htm">Setor Privado</a></li>
    		  <li><a href="business.htm">E-Business</a></li>
    		  <li><a href="sevicos.htm">Serviços</a></li>
    		  <li><a href="sigem/sigem.htm">Sigem</a></li>
    		  <li><a href="jgrade/jgrade.htm">JGRADE</a></li>
    		  <li><a href="eventos.htm">Eventos</a></li>
    		  <li><a href="contato.htm">Contato</a></li>
    		  <li><a href="downloads.htm">Downloads</a></li>
    		</ul>
    	  </div>
    	  <div class="ArticleFooter"> 
    		<p></p>
    	  </div>
    	</div>
      </div>
      <div id="content"> 
    	<div id="img1"><img src="<A href="http://www.wizsyst.com/wiz/Assets/jpgs/img.jpg"></div">http://www.wizsyst.com/wiz/Assets/jpgs/img.jpg"></div>
    	<br>
    	<p>&nbsp; &nbsp; &nbsp; A <font color="green">Wiz Systems do Brasil</font> 
    	  é uma empresa pioneira do desenvolvimento de softwares que facilitam e agilizam 
    	  as várias tarefas exercidas no mercado, tais como a Gestão Pública e Privada, 
    	  assim como E-Business.</p>
    	<br>
    	<div id="publico"> 
    	  <div id="img2"><img src="<A href="http://www.wizsyst.com/wiz/Assets/jpgs/img4.jpg"></div">http://www.wizsyst.com/wiz/Assets/jpgs/img4.jpg"></div>
    	  &nbsp; &nbsp; &nbsp; <b>P</b>ara o Setor Público, a Wiz Systems tem como 
    	  prioridade o desenvolvimento da ferramenta mais completa do mercado para 
    	  fornecer uma gestão mais eficaz e rápida. <a href="publico.htm">Setor Público</a> 
          <div class="clearer"></div>
    	</div>
    	<br>
    	<div id="privado"> 
    	  <div id="img3"><img src="<A href="http://www.wizsyst.com/wiz/Assets/jpgs/img5.jpg"></div">http://www.wizsyst.com/wiz/Assets/jpgs/img5.jpg"></div>
    	  <p>&nbsp; &nbsp; &nbsp; <b>P</b>ara o Setor Privado, a Wiz Systems tem a 
    		solução perfeita para que a sua empresa se destaque no mercado competitivo.<a href="privado.htm">Setor 
    		Privado</a></p>
    	 <div class="clearer"></div>
     </div>
    	<br>
    	<div id="business"> 
    	  <div id="img2"><img src="<A href="http://www.wizsyst.com/wiz/Assets/jpgs/img6.jpg"></div">http://www.wizsyst.com/wiz/Assets/jpgs/img6.jpg"></div>
    	  <p> &nbsp; &nbsp; &nbsp; <b>N</b>a área de E-Business, a Wiz Systems tem 
    		larga experiência para garantir a produtividade que sua empresa necessita. 
    		<a href="business.htm">E-Business</a></p>
    	    <div class="clearer"></div>
    	</div>
      </div>
      <div id="footer"> &copy; 2004 <a href="<A href="http://www.wizsyst.com">Wiz">http://www.wizsyst.com">Wiz Systems do 
    	Brasil.</a> Todos os Direitos Reservados. </div>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •