Dúvida de CSS

Anderson Buzzi · Agosto 10, 2008

Postei um tópico ontem sobre uma duvida no meu CSS (que funcionava só no firefox).

Agora o problema é o inverso :(

Reparem o comportamente no IE e no FF. No FF o rodapé não inicia após o final do conteúdo, ele fica perdido no meio da página.

O que fiz de errado?

index.html:

<html>
<head>
<title> Site </title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="tudo">
    <div id="cabecalho">
       cabeçalho
    </div>

    <div id="menu">
      <ul>
      <li id="link1" class="menuoff" onclick="Cor(this)"><a href="#" onclick="ExpandeDiv('div1');">Início</a></li>
      <li id="link2" class="menuon" onclick="Cor(this)"><a href="#" onclick="ExpandeDiv('div2');">Cadastro</a></li>
      <li id="link3" class="menuoff" onclick="Cor(this)"><a href="#" onclick="ExpandeDiv('div3');">Login</a></li>
      <li id="link4" class="menuoff" onclick="Cor(this)"><a href="#" onclick="ExpandeDiv('div4');">FAQ</a></li>
      <li id="link5" class="menuoff" onclick="Cor(this)"><a href="#" onclick="ExpandeDiv('div5');">Sobre</a></li>   
      </ul>
    </div>

    <div id="div2">
       <br><br>
       Cadastro......
       <p> </p>
       <div id="divcadastro">
         <form name="frmAjax" style="width: 415px; height: 195px">
                <p> Nome:<br>
                 <input type="text" name="nome" size="20"><br>
                <p> Data de nascimento:<br>
                     <input type="text" name="nascimento" size="20"><br>
                <p> Login:<br>
                     <input type="text" name="login" size="20"><br>
                <p> Senha:<br>
                     <input type="password" name="senha" size="20"><br>
                <p> País:<br>
                     <select name="listPaises" onChange="Dados(this.value, 1);">
                    <option value="0">--Selecione o país --</option>
                    
                       <option value="">
                       </option>
                    
                    </select><br>
                <p> Estado:<br>
                     <select name="listEstados" onChange="Dados(this.value, 2);">
                        <option id="opcoesestados" value="0">--Primeiro selecione o país--</option>
                    </select><br>
                <p> Cidade:<br>
                     <select name="listCidades" onChange="alert(this.value);">
                        <option id="opcoescidades" value="0">--Primeiro selecione o estado--</option>
                    </select><br>
          </form>      
       </div>
       <br><br>
    </div>

    <div id="rodape">
      <a href="#" onclick="ExpandeDiv('div6'); Cor(link1)">Política de privacidade</a>
    </div>

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

style.css:

input { 
    background-color: #FFFFFF; 
    font: 12px verdana, arial, helvetica, sans-serif;
    color:#003399;
    border:1px solid #000000;
}

.menuon {
    text-align:left;
    /*border-bottom:1px solid #59619F;*/
    background-color:#444;
}

.menuoff {
}

body {
    background: #EEE;
    color: #000;
    font-size: 11px;
    font-family: Verdana, sans-serif;
    margin: 0; padding: 0;
    text-align: center;
}

a, a:visited {    
    color: #FFFFFF;
    background: inherit;
    text-decoration: none;
}
a:hover {
    color: #FFFFFF;
    background: inherit;
    text-decoration: underline;
}

#tudo {
    background: #FFF;
    border: #000 1px solid;
    width: 800px;
    margin: auto;
    padding: 0px;
    text-align: left;
    }

#cabecalho {
    background: #CCC;
    font-size: 18px;
    text-align: center;
    padding: 30px;
}

#menu {
    background: #000;
    height: 21px;
    margin: 0; padding: 0;
}

#menu ul {
    margin: 0; padding: 0;
    margin-left: 6px;
}

#menu ul li {
    display:block;
    float:left;
}

#menu ul li a {
    color: #FFF;
    float: left;
    padding: 4px 7px;
    text-decoration: none;
}
    
#menu ul li a:hover {
    background: #444;
    color: #FFF;
    border-bottom: none;
    text-decoration: none;
}

#conteudo {
    clear: both;
    font-size: 12px;
    padding: 5px;
    text-align: center;
}

#rodape {
    clear: both;
    background: #000;
    color: #FFF;
    padding: 5px;
    text-align: center;
}

Obrigado!

Anderson Buzzi · Agosto 10, 2008

Achei uma maneira de arrumar isso, porém é uma gambiarra:

Coloquei o form dentro de um table.. e funcionou

<table>

<form>

....

</form>

</table>

Entrar

Dúvida de CSS

Pergunta

Anderson Buzzi

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Anderson Buzzi

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades