Incompatibilidade Firefox e IE (Ver Primeiro e Segundo Post)

Ayato · 15 de Fevereiro de 2009

Olá!

Estava agora a tratar de arranjar o site, pouco a pouco. E tentei dividir aquilo a que chamo "Navigation Bar" em 5 (em CSS), porque vai 5 temas: "Home", "GIZ", "Escola", "Contactos" e "Ano Lectivo 2008/2009".
Os primeiros quatro temas vão ser ser "misturados" com JavaScript para que quando "mouseon" apareçam «submenus» clicáveis.

Voltando à minha dúvida, ao fazer a divisão... tive o resultado que vocês podem observar no site:
http://www.projectogiz.com
Não era aquele o meu objectivo... Tentei o elemento "float:left" mas não ajudou... Se alguém me puder ajudar... Vou colocar os códigos aqui.

P.S.: O que acham do "logótipo", acham melhor com sombras, ou dar uma cor a cada sombra?

OS CÓDIGOS

index.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" />
<meta name="description" content="Este Ã© um site referente a um trabalho em desenvolvimento para a disciplina de Ãrea de Projecto da Escola SecundÃ¡ria JosÃ© Gomes Ferreira.
Projecto coordenado pela professora Maria JoÃ£o Ribeiro Rodrigues Alves." />

<link REL=StyleSheet HREF="layout.css" Title="text/css" />

<title>Projecto GIZ (Grupo de InvestigaÃ§Ã£o Zoófila)</title>

</head>

<body>

<div class="container">

<div id="logo"></div>
<div id="navbar-home"><center>HOME</center></div>
<div id="navbar-giz"><center>GIZ</center></div>
<div id="navbar-escola"><center>ESCOLA</center></div>
<div id="navbar-contactos"><center>CONTACTOS</center></div>
<div id="navbar-anolectivo"><center>Ano Lectivo 2008/2009</center></div>
<div id="welcome-section"></div>


<div id="column-left"><br><br><img border="0" alt="free counter" src="http://xyz.freelogs.com/counter/index.php?u=ayato&s=fdg" ALIGN="middle" HSPACE="4" VSPACE="2"><script src=http://xyz.freelogs.com/counter/script.php?u=ayato></script><br>Contador desde 1 de Fevereiro de 2009<br><img src="Testing/not_pass.jpg" width="173,5" height="173"><br><img border="0" alt="hit counter" src="http://xyz.freelogs.com/counter/index.php?u=rahxephon&s=nextgen" ALIGN="middle" HSPACE="4" VSPACE="2"><script src=http://xyz.freelogs.com/counter/script.php?u=rahxephon></script><br>Contador de Usuário desde 1 de Fevereiro de 2009</div>
<div id="sidebar"><img src="Testing/under_construction.gif" width="200" height="200"><img src="Testing/site_construction.jpg" width="200" height="180"></div>


<div id="footer"></div>

</div>

</body>

</html>

layout.css

@charset "utf-8";
/* CSS Document */

/* STANDARD HTML TAG RESET */
form {
border:0;
margin:0px;
padding:0px;
}
li {
border:0;
margin:0px;
padding:0px;
}
ul {
border:0;
margin:0px;
padding:0px;
}
p {
border:0;
margin:0px;
padding:0px;
}
h3 {
border:0;
margin:0px;
padding:0px;
}
h2 {
border:0;
margin:0px;
padding:0px;
}
h1 {
border:0;
margin:0px;
padding:0px;
}
body {
border:0;
margin:0px;
padding:0px;
}
/*END*/

/* STANDARD HTML TAG DEFINITION */

input {
color:#000000;
font-family:Arial, Helvetica, sans-serif, Trebuchet MS;
}

form {
color:#000000;
font-family:Arial, Helvetica, sans-serif, Trebuchet MS;
}

body {
color:#000000;
font-family:Arial, Helvetica, sans-serif, Trebuchet MS;
}
h1{font-size:24px; /* ...other properties... */}
h2{font-size:18px; /* ...other properties... */}
h3{font-size:13px; /* ...other properties... */}

a:visited{color:#0033CC;}

a:link{color:#0033CC;}
a:hover {color:#666666;}
/*END*/

/* PAGE ELEMENTS */
.container{
margin:0;
width:1000px;
}
/* NAVIGATION */
#navbar-home{
margin-left:175px;
background: url(gradient.png);/* navigation gradient image, url or simply from folder, it needs to be repeated through and X-Horizontal Line, check CSS tutorial to do so */
height:35px;
width:165px;
border-right:1px solid #000000;
}

#navbar-giz{
margin-left:340px;
background: url(gradient.png);/* navigation gradient image, url or simply from folder, it needs to be repeated through and X-Horizontal Line, check CSS tutorial to do so */
width:165px;
height:35px;
border-right:1px solid #000000;
}

#navbar-escola{
margin-left:505px;
background: url(gradient.png);/* navigation gradient image, url or simply from folder, it needs to be repeated through and X-Horizontal Line, check CSS tutorial to do so */
width:165px;
height:35px;
border-right:1px solid #000000;
}

#navbar-contactos{
margin-left:670px;
background: url(gradient.png);/* navigation gradient image, url or simply from folder, it needs to be repeated through and X-Horizontal Line, check CSS tutorial to do so */
width:165px;
height:35px;
border-right:1px solid #000000;
}

#navbar-anolectivo{
margin-left:835px;
background: url(gradient.png);/* navigation gradient image, url or simply from folder, it needs to be repeated through and X-Horizontal Line, check CSS tutorial to do so */
width:164px;
height:35px;
border-right:1px solid #000000;
}

/* LOGOTYPE */
#logo{
background:url(logo.jpg) no-repeat;/* background image for "Bem-Vindos ao Projecto GIZ" or repeat X-line from a gradient image */
float:left;
height:175px;
width:175px;
}

/* WELCOME SECTION */
#welcome-section{
background:url(banner.jpg) no-repeat;/* background image for "Bem-Vindos ao Projecto GIZ" or repeat X-line from a gradient image */
height:140px;
margin-left:175px;
}

/* LEFT COLUMN OR THE NEWS PAGE AKA BODY */
#column-left{
float:left;
margin-right:30px;
width:472px;
}
#column-left body{
}
#column-left h1{
border-bottom:solid 1px #DEDEDE;
font-family: Trebuchet MS, Verdana;
margin-bottom:20px;
}
#column-left p{
font-size:14px;
color:#333333;
}
/* RIGHT COLUMN (sidebar) */
#sidebar{
float:left;
width:353px;
}
/* FOOTER (sidebar */
#footer{
clear:both;
color:#666666;
font-size:11px;
}

Ayato · 15 de Fevereiro de 2009

Penso ter dado uma solução temporária (mal-estruturada mas com o resultado pretendido) ao site...

O que fiz foi o seguinte:
-Dei a todas as imagens excepto à do "Bem-vindos..." uma posição ABSOLUTA;
-Criei uma nova imagem para substituir a do "Bem-vindos..." que ficava cortada... e colocada muito acima...;
-A nova imagem do "Bem-vindos..." ficou com mais 35 pixéis de altura na parte de cima, como são brancos e ficam debaixo dos menus ninguém se apercebe...

Isto é tudo uma solução temporária... Continua a precisar da vossa ajuda...

Fui verificar a compatibilidade com o Internet Explorer e vi que havia problemas.... Aqui ficam as comparações com Mozilla Firefox e Internet Explorer...

http://img242.imageshack.us/my.php?image=damnitne3.png

O código HTML manteve-se e alterei o código CSS para:

@charset "utf-8";
/* CSS Document */

/* STANDARD HTML TAG RESET */
form {
border:0;
margin:0px;
padding:0px;
}
li {
border:0;
margin:0px;
padding:0px;
}
ul {
border:0;
margin:0px;
padding:0px;
}
p {
border:0;
margin:0px;
padding:0px;
}
h3 {
border:0;
margin:0px;
padding:0px;
}
h2 {
border:0;
margin:0px;
padding:0px;
}
h1 {
border:0;
margin:0px;
padding:0px;
}
body {
border:0;
margin:0px;
padding:0px;
}
/*END*/

/* STANDARD HTML TAG DEFINITION */

input {
color:#000000;
font-family:Arial, Helvetica, sans-serif, Trebuchet MS;
}

form {
color:#000000;
font-family:Arial, Helvetica, sans-serif, Trebuchet MS;
}

body {
color:#000000;
font-family:Arial, Helvetica, sans-serif, Trebuchet MS;
}
h1{font-size:24px; /* ...other properties... */}
h2{font-size:18px; /* ...other properties... */}
h3{font-size:13px; /* ...other properties... */}

a:visited{color:#0033CC;}

a:link{color:#0033CC;}
a:hover {color:#666666;}
/*END*/

/* PAGE ELEMENTS */
.container{
margin:0;
width:1000px;
}
/* NAVIGATION */
#navbar-home{
margin-left:175px;
background: url(gradient.png);/* navigation gradient image, url or simply from folder, it needs to be repeated through and X-Horizontal Line, check CSS tutorial to do so */
height:35px;
width:164px;
border-right:1px solid #000000;
position:absolute;
}

#navbar-giz{
margin-left:340px;
background: url(gradient.png);/* navigation gradient image, url or simply from folder, it needs to be repeated through and X-Horizontal Line, check CSS tutorial to do so */
width:164px;
height:35px;
border-right:1px solid #000000;
position:absolute;
}

#navbar-escola{
margin-left:505px;
background: url(gradient.png);/* navigation gradient image, url or simply from folder, it needs to be repeated through and X-Horizontal Line, check CSS tutorial to do so */
width:164px;
height:35px;
border-right:1px solid #000000;
position:absolute;
}

#navbar-contactos{
margin-left:670px;
background: url(gradient.png);/* navigation gradient image, url or simply from folder, it needs to be repeated through and X-Horizontal Line, check CSS tutorial to do so */
width:164px;
height:35px;
border-right:1px solid #000000;
position:absolute;
}

#navbar-anolectivo{
margin-left:835px;
background: url(gradient.png);/* navigation gradient image, url or simply from folder, it needs to be repeated through and X-Horizontal Line, check CSS tutorial to do so */
width:164px;
height:35px;
border-right:1px solid #000000;
position:absolute;
}

/* LOGOTYPE */
#logo{
background:url(logo.jpg) no-repeat;/* background image for "Bem-Vindos ao Projecto GIZ" or repeat X-line from a gradient image */
float:left;
height:175px;
width:175px;
position:absolute;
}

/* WELCOME SECTION */
#welcome-section{
background:url(banner.jpg) no-repeat;/* background image for "Bem-Vindos ao Projecto GIZ" or repeat X-line from a gradient image */
height:175px;
margin-left:175px;
}

/* LEFT COLUMN OR THE NEWS PAGE AKA BODY */
#column-left{
float:left;
margin-right:30px;
width:472px;
}
#column-left body{
}
#column-left h1{
border-bottom:solid 1px #DEDEDE;
font-family: Trebuchet MS, Verdana;
margin-bottom:20px;
}
#column-left p{
font-size:14px;
color:#333333;
}
/* RIGHT COLUMN (sidebar) */
#sidebar{
float:left;
width:353px;
}
/* FOOTER (sidebar */
#footer{
clear:both;
color:#666666;
font-size:11px;
}

unsilent · 16 de Fevereiro de 2009

Esse off-set tem a ver com a posição absolute das divs, sempre que puderes evita isso.
É dificil dizer-te como alterar isso portanto:

Código:

<!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=iso-8859-1" />
<title>projecto giz</title>

<style type="text/css">
<!--
body {
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
.header {
    background-color: #CCCCCC;
    width: 1000px;
    height: 175px;
    clear:both;
    margin-top:0;
    margin:auto;
}
.logo{
    width: 175px;
    height: 175px;
    position:relative;
    float:left;
}
.navbar{
height:35px;
width:825px;
float:right;
position:relative;
}
.navbar ul{
    margin: 0;
    padding: 0;
    padding-left:0px;
    list-style-type: none;
    font-family: Arial;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
}

.navbar li{
display: inline;
margin: 0;
}

.navbar li a{
    float: left;
    display: block;
    text-decoration: none;
    color:#FFFFFF;
    width:100px;
    height:35px;
    text-align:center;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    padding-top: 3px;
}

.banner{
float:right;
width:825px;
height:140px;
}
.left_column {
    width: 175px;
    float: left;
    background-color: #FFFF99;
}
.right_column {
    height: auto;
    float: right;
    background-color: #FFFFCC;
    width: 825px;
}
.center_column {
    height: 250px;
    float: center;
    background-color: #FFFFCC;
    width: auto;
}
.footer {
    height: 30px;
    background-color: #666666;
    clear: both;
}
.wrapper {
    width: 1000px;
    clear:both;
    background-color: #666666;
    margin-top:0;
    margin:auto;

}
-->
</style>
</head>
<body>
<div class="header">
  <div class="logo"></div>
    <div class="navbar">
    <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">GIZ</a></li>
    <li><a href="#">ESCOLA</a></li>
    <li><a href="#">CONTACTOS</a></li>
    <li><a href="#">ANO LECTIVO 08/09</a></li>
    </ul>
    </div>
     <div class="banner"></div>
</div>

    <div class="wrapper">
    <div class="left_column">
        <p>menu (p/ exemplo) </p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;    </p>
    </div>

    <div class="right_column">
        <p>podes por aqui o conteudo.... </p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;    </p>
    </div>
    
    <div class="footer">
        espero que ajude... </div>
    </div>
</body>
</html>

Vê se isto assim te safa, a longo prazo acho que é preferivel teres o código assim estruturado.

Incompatibilidade Firefox e IE (Ver Primeiro e Segundo Post)

Ayato

Power Member

Ayato

Power Member

unsilent

Power Member