1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

css: incompatibilidade entre IE e Mozilla no meu arquivo; por favor ajudem

Discussão em 'Web Development' iniciada por victormroberto, 21 de Novembro de 2008. (Respostas: 0; Visualizações: 1183)

  1. Pessoal, estou tentando montar um site pra divulgar meu livro. Usando CSS, fiz uma folha de estilo e index bacanas, que saum bem visualisados no meu IE. Acontece que quando abro no Mozilla, a barra de menu, a esquerda, aparece toda destruida.

    Aqui vai a folha de estilo:
    body {background-color: #666;
    }
    #header {
    width:auto;
    height: 20%;
    background-color: #333;
    border-top: 3px solid #666;
    border-bottom: 3px solid #666;
    texto-align: center;
    position: relative;
    }
    #navbar { height: 10%;
    background-color: #444;
    border-bottom: 3px solid #666; }
    #midsection { height: 50%;
    border-bottom: 3px solid #666;
    background-color: #555;

    }
    #footer { height: 10%;
    background-color: #666;
    border-bottom: 3px solid #666; }
    .leftcol { background-color: #f6f6b8;
    position: relative;
    margin-top: 1%;
    width: 20%;
    left: 1%;
    float: left;
    ul#menutt {
    width: 20em;
    list-style:none;
    font-family: "monotype corsiva",vivaldi, cursive;
    font-size: 1.4em;
    }
    ul#menutt li{
    position:relative;
    }
    ul#menutt a {
    width: 7em;
    display: block;
    text-align:left;
    padding: 0.4em 0.8em;
    margin-bottom: 0.1em;
    text-decoration: none;
    color: #000;
    background: #0033FF;
    border-left: 0.5em solid #000066;
    border-right: 0.15em solid #000066;
    voice-family: "\"}\"";
    voice-family:inherit;
    }
    >#pagebody>ul#menutt a {
    width:10em;
    }
    /* Fix IE. Hide from IE Mac \*/
    * html ul#menutt li { float: left; height: 1%; }
    * html ul#menutt li a { height: 1%; }
    /* End */
    ul#menutt a:hover {
    color: #fff;
    background: #0000CD;
    border-right: 0.15em solid #000066;
    border-left: 0.5em solid #000066;
    }
    ul#menutt a span {
    display: none;
    }
    ul#menutt a:hover span {
    display: block;
    position: absolute;
    top: 0;
    left: 8em;
    width: 6.0em;
    padding: 0.2em;
    margin-left: 0.1em;
    color: #fff;
    background:#191970;
    font-size: 1em;
    text-align:left;
    border: 0.02em solid #000;
    }
    .midcol {background-color: #f6f6b8;
    position: relative;
    margin-top: 1%;
    width: 20%;
    left: 10%;
    float: left;
    }




    Agora, aqui embaixo, vai a index:






    <html>
    <head>
    <title>
    </title>
    <link rel="stylesheet" href="estilo.css">
    </head>
    <body>
    <div id="header">cabeçalho</div>
    <div id="navbar"> barra de navegação</div>
    <div id="midsection">
    .
    <div class="leftcol">
    <ul id="menutt">
    <li align="top">
    <a href="#">Página inicial
    <span>
    Página de entrada do site Além da terra do gelo.
    </span>
    </a>
    </li>
    <li><a href="#">O livro
    <span>
    Nesta seção você encontrará mais informações do livro "Além da Terra do Gelo - A Jornada do Elohim"
    </span>
    </a>
    </li>
    <li>
    <a href="#">Autor
    <span>
    Saiba um pouco mais do autor da obra.
    </span>
    </a>
    </li>
    <li>
    <a href="#">Novidades
    <span>
    Acompanhe as novidades.
    </span>
    </a>
    </li>
    <li>
    <a href="#">Contos
    <span>
    Contos ambientados dentro e fora do mundo de Kether.
    </span>
    </a>
    </li>
    <li>
    <a href="#">Links
    <span>
    Alguns links interessantes.
    </span>
    </a>
    </li>
    <li>
    <a href="#">Contato
    <span>
    Entre em contato conosco! Comentários sobre o livro serão muito bem vindos.
    </span>
    </a>
    </li>
    </ul>
    </div>
    <div class="midcol">...</div>
    </div>
    <div id="footer">embaixo da tela</div>

    </body>
    </html>




    Soh gostaria de acrescentar que a pagina esta no meio da construcao, ainda tenho que colocar os panos de fundo, texto do miolo, configurar tudo etc. Mas gostaria de ajuda pra ver pq ele aparece bem no IE, e atrapalhado no Mozilla. Agradeço
     

Partilhar esta Página