← HTML + CSS

IE6 vs IE7/8

Lida 4771 vezes

Offline

jpcasado 
Membro
Mensagens 6 Gostos 0
Troféus totais: 16
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 First Post Karma Eighth year Anniversary Seventh year Anniversary

Bons dias.

Venho por este meio solicitar a v/ melhor ajuda no sentido de resolver/perceber um "problema" que me afecta á já uns "dias".

Tenho um site (HTML+CSS+ASP) que em IE 6 funciona lindamente.

Com a evolução dos browser's, em qualquer um deles IE7, IE8, Fire, a secção main fica toda encostada á esquerda onde está o menu.

Ou seja a mesma CSS funciona no 6 mas encosta á esquerda nos "novos".

A minha duvida é o que mudou na "nova" versão?

Como se podem classificar adaptar as CSS's para que funcionem no 6 e 7> ao mesmo tempo.

Obrigado desde já pela ajuda.

Pedro Casado.
Offline

cgoncalves 
Membro
Mensagens 789 Gostos 0
Feedback +12

Troféus totais: 27
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Olá jpcasado

Depende do tipo de site, por exemplo, se o site é recente, e se funciona bem no IE6 e não nos outros, provavelmente isso sucede-se devido à falta de actualização dos padrões web por parte de quem o desenvolveu.

Porém, pelo que percebi, o site já deve ter uns anitos, então o que se passa, é que o IE (em qualquer versão) é conhecido por não respeitar, ou melhor, não obedecer às boas normas/padrões web da W3C.

Como tal é necessário criar hacks (formas de contornar o "erro") para algumas versões de browsers, seja IE, Firefox, entre outros.

Respondendo à dúvida, o que mudou nas versões, foi uma melhoria no "interpretador" (digamos assim) que interpreta o código HTML, CSS.

O melhor é manter a versão mais recente do browser, neste caso IE e actualizar o código em questão.
Offline

jpcasado 
Membro
Mensagens 6 Gostos 0
Troféus totais: 16
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 First Post Karma Eighth year Anniversary Seventh year Anniversary

Cgoncalves começo por agradecer a sua disponibilidade e resposta.

Efectivamente pela consulta de vários tópicos que já efectuei aqui por este valioso forum já estou a interiorizar que terei de actualizar o meu browser e irei necessitar de remodelar todo o meu site, mas ... falta-me perceber o que tenho de fazer.

Peço a sua paciência e sabedoria para, mediante uma rápida olhadela no código que aqui disponho, se me poderá ajudar e orientar na resolução deste “problema”.

HTML:


<!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" xml:lang="en" lang="en">
<head>
   <link rel="stylesheet" href="images/teste.css" type="text/css" />
</head>

<body>
   <!-- header starts here -->
   <div id="header">
      <div id="header-content">   
         <h1 id="logo">JSN</h1>
         <h2 id="slogan">JSN</h2>
         <!-- Menu Tabs -->
         <li>
            <a href="index.asp" id="current">
            JPCasado
            </a>
         </li>
      </div>
      <div class="col2 float-right">
         <p>
         <br>
         JPCasado
         </p>
      </div>
   </div>
   <!-- content-wrap starts here -->
   <div id="content-wrap">
      <div id="content" style="width: 1251px; height: 128px;">   
 
         <div id="sidebar" style="width: 172px; height: 96px" >      

         <div class="sidebox">
            <h1>Mensagens: </h1>
            <marquee bgcolor="#FFFFF1" scrollamount="5" scrolldelay="100" loop="-1" width="100%" height="30%">
               teste
            </marquee>
         </div>
      </div>      

      <div id="main">      
         <a name="TemplateInfo"></a>
               <h1>MSG 1<span class="gray"></span></h1>

               <h1>MSG 2<span class="gray"></span></h1>   

            <table width='82%'>
               <TR align='Left'>
                  <td>
                     <h1>Login</h1>
                     <p></p>
                     <form action="val.asp" method="Post">
                        <p>
                        <label>Utilizador:</label>
                        <input name="username" value="" type="text" size="30" />
                        <label>Password:</label>
                        <input name="password" value="" type="password" size="30" />
                        <br>
                        <input type="submit" value="LogIn" class="button" />      
                        </p>      
                     </form>
                  </td>
               </tr>
            </table>
            <br>
      </div>
       
        <table width="82%">
   <TR align='Left'>
      <td>
      
      <center>
         <h1>JSN - Informações <span class="gray"></span></h1>
         <h1>Para um uso optimizado deste site deverá utilizar o Internet Explorer 6</h1>
         <p></p>
      </center>


      </td>
   </tr>
</table>


CSS:


/* top elements */
body {
   margin: 0;
   padding: 0;
   font: normal 0.7em/1.5em Tahoma, 'Trebuchet MS', sans-serif;
   color: Black;
   text-align: center;
   background: #FFFFF1;
}

#main h1 {
   font: normal 1.5em 'Trebuchet MS', Arial, Sans-serif;
   color: #A0080D;    
}
#sidebar h1 {
   font: bold 1.4em 'Trebuchet MS', Arial, Sans-serif;
   background: #FFFFF1 url(arrow.gif) no-repeat 10px .7em;
   padding: 7px 0 7px 35px;
   color: #A0080D;
}
table {
    text-align: center;
    padding: 0px;
    border-color: Black;
    border: thin dashed Black;
/*    position: relative;
*/
}


/* form elements */
form {
   margin: 15px;
   padding: 0;
   background: #FFFFF1
   border: 1px dashed #FFFFF1
}
label {
   display:block;
   font-weight:bold;
   margin:5px 0;
}
input {
   padding: 2px;
   border: 1px solid #CCC;
   font: normal 1em Verdana, sans-serif;
   color:Black;
   background: #CCC;
}

input.button {
   margin: 0;
   font: bold 1em Tahoma, Sans-serif;
   border: 1px solid #CCC;
   padding: 2px 3px;
   color: Black;
   background: #CCC;   
}

#header-content, #footer-content, #content {
   width: 83%;   
}

/* header */
#header {
   background: #FAF0E6 url(headerbg.jpg) repeat-x 0 0;
   height: 80px;
   text-align: left;
}
#header-content {
   position: relative;
   margin: 0 auto; padding: 0;
}
#header-content #logo {
   position: absolute;
   font: bold 50px Verdana, 'Trebuchet Ms', Sans-serif;
   letter-spacing: -2px;
   color: #FFFFF1
   margin: 0;
   padding: 0; /* change the values of left and top to adjust the position of the logo */
   top: 5px;
   left: 20px;
}
#header-content #slogan {
   position: absolute;   
   font: bold 12px 'Trebuchet Ms', Sans-serif;
   text-transform: none;
   color: #CCC;   
   margin: 0; padding: 0;
   
   /* change the values of left and top to adjust the position of the slogan */
   top: 60px; left: 35px;
}

/* header menu */
#header-content ul {
   position: absolute;
   right: 20px;
   top: 75px;
   font: bolder 1.3em 'Trebuchet MS', sans-serif;
   color: #FFFFF1
   list-style: none;
   margin: 0;
   padding: 0;
}
#header-content li {
   display: inline;
}
#header-content li a {
   float: left;
   display: block;
   padding: 3px 12px;   
   color: #FFFFF1
}
#header-content li a:hover {
   background: #000;
   color: #F88F26;
}
#header-content li a#current  {
   background: #FFFFF1
   color: #CCC;
}

/* content */
#content-wrap {
   clear: both;
   float: left;
   background: #FFFFF1      
   width: 100%;
}
#content {
   text-align: left;   
   padding: 0; margin: 0 auto;      
    position: relative;
   /*
    _position: absolute;
    *position: absolute;
    */
}

/* sidebar */
#sidebar {
   float: left;
   width: 260px;
   margin: 10px 0; padding: 0;   
}
#sidebar ul.sidemenu {
   list-style:none;
   margin: 0;
   padding: 5px 0 15px 0;         
}
#sidebar ul.sidemenu li {
   padding: 0 10px;
}
#sidebar ul.sidemenu a {
   display: block;
   font-weight: bold;
   color: #6A6A6A;
   height: 1.5em;
   text-decoration: none;
   padding: .3em 0 .3em 15px;
   background: #FFFFF1
   border-bottom: 1px dashed #151515;
   line-height: 1.5em;
}
#sidebar ul.sidemenu a.top{
   border-top: 1px dashed #151515;
}
#sidebar ul.sidemenu a:hover {
   padding: .3em 0 .3em 10px;
   background: #FFFFF1
   border-left: 5px solid  #D30F16;
   color: #D30F16;      
}
#sidebar .sidebox {
   background: #FFFFF1
   margin: 5px 15px 10px 15px;
}

/* main */
#main {
   margin: 10px 0;
   padding: 0 270px 0 0;   
    position: absolute;   
}


Imagem em IE6: OK -> http://83.240.175.205/images/IE6.JPG

Imagem em Mozilla e IE8: Not OK -> http://83.240.175.205/images/Mozilla_IE8.JPG

Como / o que tenho de rectificar.

MUITO OBRIGADO.
Offline

Nuno 
Administrador
Mensagens 7780 Gostos 216
Feedback +2

Troféus totais: 42
Trófeus: (Ver todos)
100 Poll Votes Level 7 Search Mobile User Level 6 Super Combination Combination Topic Starter 50 Poll Votes 10 Poll Votes

Para colocar qualquer coisa ao centro será algo do género:

margin: 0 auto;
Offline

jpcasado 
Membro
Mensagens 6 Gostos 0
Troféus totais: 16
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 First Post Karma Eighth year Anniversary Seventh year Anniversary

Obrigado pela sua atenção Nuno.

:-s

Infelizmente eu não percebi a sua indicação.

Coloco margin: 0 Auto; em cada uma das styles sections?
Offline

Warrior 
Membro
Mensagens 203 Gostos 0
Troféus totais: 27
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Obrigado pela sua atenção Nuno.

:-s

Infelizmente eu não percebi a sua indicação.

Coloco margin: 0 Auto; em cada uma das styles sections?

Não, coloca na body.

body {
   margin: 0 auto;
   padding: 0;
   font: normal 0.7em/1.5em Tahoma, 'Trebuchet MS', sans-serif;
   color: Black;
   text-align: center;
   background: #FFFFF1;
}
Offline

jpcasado 
Membro
Mensagens 6 Gostos 0
Troféus totais: 16
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 First Post Karma Eighth year Anniversary Seventh year Anniversary

:-)

Muito obrigado Warrior.

Já está resolvido.

Muito obrigado.

A todos.
Offline

tonebiclas 
Membro
Mensagens 29 Gostos 0
Troféus totais: 16
Trófeus: (Ver todos)
Super Combination Combination Level 3 Level 2 Level 1 10 Posts First Post Karma Eighth year Anniversary Seventh year Anniversary

para poderes usar "margin: 0 auto" numa <div> tens de dar uma medida fixa

cumps ;)
Offline

jpcasado 
Membro
Mensagens 6 Gostos 0
Troféus totais: 16
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 First Post Karma Eighth year Anniversary Seventh year Anniversary

Obrigado.

Será por isso que as div e as respectivas tabelas andam todas umas por cima das outras de desalinhadas?

É que não tenho nenhuma medida fixa em nenhum lado.

Obrigado.
Offline

apaulo 
Membro
Mensagens 345 Gostos 1
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Gabo-vos a paciência  :popcorn:

Por eu lado eu pouco me preocupo com IE7, e IE6 é como se não existisse...
Vejo se os sites funcionam bem IE8, FireFox e Chrome... e isto já me dá muita dôr de cabeça.

Vale a pena preocupar com os "chassos" IE6 e IE7?  :-k
E com outros browsers que não IE8, FireFox e Chrome? Estes três representam certamente mais de 99% dos utilizadores...
Offline

cgoncalves 
Membro
Mensagens 789 Gostos 0
Feedback +12

Troféus totais: 27
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Gabo-vos a paciência  :popcorn:

Por eu lado eu pouco me preocupo com IE7, e IE6 é como se não existisse...
Vejo se os sites funcionam bem IE8, FireFox e Chrome... e isto já me dá muita dôr de cabeça.

Vale a pena preocupar com os "chassos" IE6 e IE7?  :-k
E com outros browsers que não IE8, FireFox e Chrome? Estes três representam certamente mais de 99% dos utilizadores...


O IE6 representa mais de 5% da quota actual de mercado.
O meu blog, por exemplo, apesar de a maioria das visitas ser do firefox, o 2º browser que mais acede é o IE6, e só o IE6 tem mais acessos que o IE5 + IE 7 + IE 8.
Eu continuo a criar sites que sejam suportados por esses browsers.

No meu site escrevi um artigo que fala um pouco sobre isso.
Mas transcrevo o que disse:

"Reparei também que aboliste por completo o suporte do Internet Explorer 6. O que ADOREI foi a mensagem que adicionaste “Actualiza o teu Browser” ao site do teu cliente, sem dúvida sem a sua permissão. Admiro a tua determinação — porquê aborreceres-te a gastar uma hora a mais para deixares o site a funcionar no IE6? Deixa o visitante do site a sofrer por usar o IE6 e ao mesmo tempo o teu cliente perder um potencial negócio — não precisas de dores de cabeça para lidares com o IE6. Uma inteligente filosofia."

Enquanto o IE6 continuar a ser usados por mais de 5% da quota de mercado, continuarei a dar suporte.
Offline

jpcasado 
Membro
Mensagens 6 Gostos 0
Troféus totais: 16
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 First Post Karma Eighth year Anniversary Seventh year Anniversary

O IE6 representa mais de 5% da quota actual de mercado.
O meu blog, por exemplo, apesar de a maioria das visitas ser do firefox, o 2º browser que mais acede é o IE6, e só o IE6 tem mais acessos que o IE5 + IE 7 + IE 8.
Eu continuo a criar sites que sejam suportados por esses browsers.

...

Enquanto o IE6 continuar a ser usados por mais de 5% da quota de mercado, continuarei a dar suporte.

Boas tardes.

É isso mesmo cgonçalves, por mais que nos custe, temos de garantir a compatibilidade, continuidade e manutenção dos sistemas.

O meu problema foi mesmo esse, quando actualizei para IE8 a configuração (CSS) continuou a funcionar em IE6 mas baralhou-se / ficou sobreposto. A dificuldade surgiu quando acertei para IE8 e desacertou no 6.

Como não sei como resolver nos dois o que fiz foi dividir o mal pelas aldeias e o site ficou (só) meio desalinhado em cada um.

Obrigado pela ajuda de todos.

Pedro Casado