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

[RESOLVIDO] Mesmo site diferente em Firefox e IE7

Discussão em 'Web Development' iniciada por xuxaki, 11 de Setembro de 2008. (Respostas: 10; Visualizações: 1082)

  1. xuxaki

    xuxaki Power Member

    Boas pessoal,
    fiz um site muito simples e fui sempre fazendo os testes com o IE7. Quando finalmente ficou como queria, vou por acaso ao firefox e reparo que a minha secção do meio aparece muito mais pequena...

    A diferença é a seguinte:

    IE7
    [​IMG]


    Firefox
    [​IMG]


    Alguma ajuda?! :confused:
     
    Última edição: 12 de Setembro de 2008
  2. MPalhas

    MPalhas Power Member

    podes mostrar o HTML e o CSS dessa página?
     
  3. xuxaki

    xuxaki Power Member

    Segue o css e o index.php, ambos completos.O site foi baseado num template, o qual eu alterei ligeiramente para poder ter uma coluna na direita também. O que adicionei e alterei estão assinalados com //EU. No css as alterações são apenas no final do ficheiro.

    CSS

    Código:
    h1 {
        font: bold 1.3em Arial, Sans-Serif;
        letter-spacing: -1px;
        color: #fff;
    }
    
    h1 a {
        color: #BF3E17;
    }
    
    tr, p, div {
        font-family: "Trebuchet MS", Arial,Verdana, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 1.5em;
        color:#666666;
    }
    hr {
        background:#999999;
        height:1px;
        width:100%;
    }
    ul {
        list-style:none;
    }
    li {
        padding-left: 25px;
        padding-top: 0;
        background-image: url(../images/arrow.png) ;
        background-repeat: no-repeat;
        background-position: 10px 5px;
    }
    ol{
        margin-left:40px;
        list-style-position:inherit;
    }
    
    .header {
        background: #fff url(../images/header.gif) repeat-x;
        margin: 0 0 10px 0;
        height: 170px;
        padding: 1px 0 3px 10px;
    }
    
    .logo {
        float: left;
        
    }
    
    body.published {
    background: #AADDFF;
    }
    
    body.mceContentBody {
    background: white;
    }
    
    #mainlevel-nav {
        float: right;
        font-size: 1.1em;
        color: #FFF;
        width: 600px;
        text-align: right;
        padding: 0 20px 0 0;
            
    }
    
    #mainlevel-nav ul { font-size: 1.1em; margin: 0;  padding: 0;}
    
        #mainlevel-nav li { 
            color: #fff;
            background: none;
            display: inline;
        }
        
        #mainlevel-nav li a { 
            font-weight: bold;
            color: #FFF; 
        } 
        
        #mainlevel-nav li a:hover { 
            color: #fff;
                    text-decoration   : underline;
        } 
                
    #searchform {
        background: #F0F0F0;
        text-align: right;
        color: #FFFFFF;
        height: 40px;
        padding: 10px 10px 0 0;
    }
    
    form {
        display: inline;
        margin: 0;
         padding: 0;
    }
    
    .pathway {
        font-family:  Arial,Verdana, Helvetica, sans-serif;
        font-size: 9px;
    }
    a.pathway:link, a.pathway:visited {
        color            : #141297;
        font-weight      : normal;
    }
    a.pathway:hover {
        color            : #ff3300;
        font-weight      : normal;
        text-decoration   : none;
    }
    
    #active_menu {
        color: #141297;
        text-decoration: underline;
        font-weight: bold;
    }
    a.mainlevel:link, a.mainlevel:visited {
        display: block;
        color: #666;
        padding: 4px 0 4px 10px;
        margin: 0 0 1px 0;
        border-bottom: 1px solid #eee;
        text-decoration: none;
    }
    a.mainlevel:hover {
        color: #0a9ede;
        background: #D8D8D8;
    }
    a.mainmenu:link, a.mainmenu:visited {
        color: #ffffff; 
        font-family:  Arial,Verdana, Helvetica, sans-serif;
        font-weight: bold;
        font-size: 10px;
    }
    a.mainmenu:hover {
        color: #333333; 
    }
    .pollstableborder {
        border: 1px solid;
        padding: 1px;
    }
    a.sublevel:link, a.sublevel:visited {
        font-size: 11px;
        color: #ffffff;
        text-indent:33px;
        line-height: 20px;
        display:block;
        margin-bottom:3px;
        width:100%;
        background-color:#c6c6c6;
    }
    a.sublevel:hover {
        color: #000000; text-decoration: none;
    }
    table.moduletable {
        padding: 0 0px 5px 0px;
        width: 200px;
        margin-bottom:5px;
    }
    
    /* small titles */
    
    table.moduletable th {
        font: bold 1.1em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        color: #666;
        width: 100%;
        font-weight:bold;
        padding: 3px 10px;
        text-align: left;
            
    }
    table.moduletable li {
        color: #FFF;
        
    }
    table.moduletable ul {
        padding: 0px;
    }
    table.moduletable td {
        font-size: 11px;
        font-weight: normal;
    }
    .poll {
        font-family      : Arial, Helvetica, sans-serif;
        font-size        : 10px;
        color            : #666666;
        line-height      : 14px;
    }
    table.pollstableborder {
        border: 1px solid #cccccc;
    }
    .sectiontableheader {
        background-color : #cccccc;
        color            : #333333;
        font-weight      : bold;
        padding:5px;
    }
    .sectiontableentry1 td{
        border-bottom:1px solid #CCCCCC;
        padding:3px 3px 3px 6px;
    
    }
    .sectiontableentry2 td {
        border-bottom:1px solid #CCCCCC;
        padding:3px 3px 3px 6px;
    }
    .small {
        font-family      : Arial,Verdana, Helvetica, sans-serif;
        font-size        : 10px;
        color            : #999999;
        text-decoration  : none;
        font-weight      : bold;
    }
    .smalldark {
        font-family      : Arial,Verdana, Helvetica, sans-serif;
        font-size        : 10px;
        color            : #000000;
        text-decoration  : none;
        font-weight      : normal;
    }
    .contentpane {
    }
    .contentpaneopen {
        border : 0px ridge #0099cc;
        width: 100%;
        padding: 1px;
    }
    
    /* big titles */
    .contentheading, .componentheading {
        font: bold 1.3em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
        letter-spacing: -1px;
        color: #666;
        text-align: left;
        margin: 0 0 10px 0;
        
    }
    .createdate {
        font-family      : Arial, Helvetica, sans-serif;
        font-size        : 10px;
        color:  #666666;
        text-align       : left;
        text-indent:18px;
        font-weight:bold;
        top:-5px;
        vertical-align: top;
        padding-bottom:2px;
        background:url(../images/date.png) no-repeat;
    }
    .button {
        font-family: Arial,Verdana, Helvetica, sans-serif;
        font-style: normal;
        font-size: 11px;
        font-weight: bold;
        background-color : #6dbc0f;
        color: #ffffff;
        border: 1px solid #757575;
    }
    
    /* search form input */
    
    .inputbox {
        color: #757575;    
        padding: 2px;
        border: 1px solid #808080;
        margin: 0 0 4px 0;
    }
    
    #searchform .inputbox {
        color: #757575;    
        width: 300px; 
        border: 1px solid #808080;
        background: #fff;
        float: right;
    }
    
    
    a:link, a:visited {
        color: #0a9ede;
        text-decoration: none;
    }
    a:hover {
        color: #76c41d;
    }
    a.contentpagetitle:link, a.contentpagetitle:visited {
        font-family: Arial,Verdana, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
         color: #76c41d;
        text-align:left;
        text-decoration: underline;
        }
    a.contentpagetitle:hover {
        font-family: Arial,Verdana, Helvetica, sans-serif;
        font-size: 12px;
        font-weight: bold;
        text-align:left;
        color: #666666;
        text-decoration: none;
        font-weight: bold;
        }
    a.category:link, a.category:visited {
        color            : #333333;
        font-weight      : bold;
        font-size: 11px;
        font-weight: bold;
    }
    a.category:hover {
        color            : #999999;
    }
    .ontab {
        background-color: #ffae00;
        border-left: outset 2px #99cb46;
        border-right: outset 2px #808080;
        border-top: outset 2px #99cb46;
        border-bottom: solid 1px #d5d5d5;
        text-align: center;
        font-weight: bold;
        color: #FFFFFF;
    }
    .offtab {
        background-color : #e5e5e5;
        border-left: outset 2px #E0E0E0;
        border-right: outset 2px #E0E0E0;
        border-top: outset 2px #E0E0E0;
        border-bottom: solid 1px #d5d5d5;
        text-align: center;
        font-weight: normal;
    }
    .tabpadding {
    }
    .tabheading {
        background-color: #ffae00;
        text-align: left;
    }
    .pagetext {
        visibility: hidden;
        display: none;
        position: relative;
        top: 0;
    }
    .back_button {
        text-align: center;
        margin-top: 40px;
    }
    table.contenttoc {
        color: #333300;
        background-color: #e0e0e0;
        border: 1px solid #ccc;
        padding:5px;
    }
    table.contenttoc td {
        font-size: 8pt;
        font-weight: normal;
        text-align:left;
        padding-left:5px;
        padding-right:5px;
    }
    table.contenttoc th {
        font-size: 8pt;
        font-weight: normal;
        text-align:left;
        padding:5px;
        background-color:#333333;
        color:#FFFFFF;
    }
    table.searchintro {
        width: 100%;
    }
    table.searchintro td {
        background-color: #293C43;
        color: #ffffff;
        font-weight: bold;
    }
    .readon {
        display:block;
        background:url(../images/read_more.gif) no-repeat;
        color:#333333;
        text-indent: -5000px;
        width:100px;
        height:20px;
    }
    .mosimage {
        border: 1px solid #cccccc;
        margin: 5px
    }
    .mosimage_caption {
        margin-top: 2px;
        background-color:#cccccc;
        padding: 1px 2px;
        color: #fff;
        text-transform: normal;
        font-size: 10px;
        border-top: 1px solid #cccccc;
    }
    #core {
        padding:0px 5px 5px 5px;
        }
    
    
    #mod_down1 {
        width:48%;
        float:left; 
        margin: 10px 2px 0 0;
    }
    #mod_down2 {
        width: 50%;
        float:right;
        margin: 10px 2px 0 0;
    }
    
    #banner {
        float: right;
        background: #FFF;
        width: 468px;
        height: 60px;
        border: 1px solid #ccc;
    }
    
    .joomladesignsfooter { 
        clear: both; 
        text-align: center;
        line-height: 1.8em;
        color: #808080;
        background: #FFF;
        padding: 10px 0 10px 0;
        border-top: 1px solid #eee;
            font-weight: bold;
    }
    
    .joomladesignsfooter a {
        color: #000;
        background: #fff;
    }
     
    
    .wrap {
        padding: 0;
        margin: 10px auto;
        text-align: left;
        width: 880px; 
    }
    
    .content { 
        border: 1px solid #E3E3E3;
        padding: 5px;
        margin: 10px auto;
        text-align: left;
        width: 880px; 
        background: #fff;
    }
    
    .left {
        float: left;
        width: 23%;
        margin: 0 0 10px 5px;
    }
    
    .center {  //EU (não existia)
        float: center; //EU
        width: 58%;  //EU
        margin: 0 0 10px 0; //EU
    }
    
    .right {
        float: right;
        width: 17%; //EU (estava a 76%)
        margin: 0 0 10px 0;
    }
    
    php
    Código:
    <?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );$iso = split( '=', _ISO );echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';?>
    <!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>
    <?php mosShowHead(); ?>
    <meta http-equiv="Content-Type" content="text/html;><?php echo _ISO; ?>" />
    <?php if ( $my->id ) { initEditor(); } ?>
    <link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe-> getTemplate(); ?>/css/template_css.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div class="content">
            <div class="header">
                <div class="wrap">
                    <div id="mainlevel-nav">
                        <?php mosLoadModules ( 'user3' ); ?>
                    </div>
                    <div class="logo">
                        <h1><?php echo $mosConfig_sitename; ?></h1>
                    </div>
                </div>
            </div>
            <div class="left">
                <?php mosLoadModules ( 'left' ); ?>
                <?php mosLoadModules ( 'user1' ); ?>
            </div>    
            
            <div class="right">  //EU (não existia)
                <?php mosLoadModules ( 'right' ); ?> //EU
            </div> //EU
            
            <div class="center">
                <?php mosMainBody(); ?>
            </div>    
            
            <div class="joomladesignsfooter">
                <p>Copyright © 2008. All rights reserved.</p>
            </div>
        </div>
    </body>
    </html>
    
     
  4. xuxaki

    xuxaki Power Member

    Ajudem por favor :(
     
  5. MPalhas

    MPalhas Power Member

    a tua alteração foi adicionar aquela coluna na direita certa? se usares o template original (sem a alteração) já fica correcto?
     
  6. xuxaki

    xuxaki Power Member

    se utilizar o template original, simplesmente não tem a coluna da direita (das noticias e Newsletter).. mas aparece tudo certo, tanto no IE como no Firefox. Portanto deduzo que foi do que alterei, mas não percebo o que está mal :S
     
  7. krunch

    krunch Power Member

    Em vez do ficheiro php, mostra o html final.
     
  8. MPalhas

    MPalhas Power Member

    o site está online?
    é que pelo código não consegui fazer grande coisa. tentei criar uma página com esse código que deste mas como só tenho a estrutura básica, não ficou nem de perto parecido com as tuas imagens


    mas reparei agora numa coisa:

    Código:
    <div class="left">
                <?php mosLoadModules ( 'left' ); ?>
                <?php mosLoadModules ( 'user1' ); ?>
            </div>    
            
            <div class="right">  //EU (não existia)
                <?php mosLoadModules ( 'right' ); ?> //EU
            </div> //EU
            
            <div class="center">
                <?php mosMainBody(); ?>
            </div>
    declaras a div da direita antes da div central. não deveria ser depois?
     
  9. xuxaki

    xuxaki Power Member

    Reparei que fiz uma coisa no css que não existe...

    Código:
    .center {  //EU (não existia)
        float: center; //EU - [COLOR=#ff0000]isto não existe[/COLOR] :paranoid:
        width: 58%;  //EU
        margin: 0 0 10px 0; //EU
    }
     
    Última edição: 12 de Setembro de 2008
  10. eRKULIX

    eRKULIX Suspenso

    experimenta usar float:left para os 3 campos

    depois no index mete a ordem correct, o right depois do center


    edit: já agora visto que tens um valor pré-definido para a área de "content" (880 px) não precisas de usar percentagens para as três colunas podes, visto que irão ter sempre o mesmo tamanho.
     
    Última edição: 12 de Setembro de 2008
  11. xuxaki

    xuxaki Power Member

    Pessoal, muito obrigado! Já funciona em ambos sem deformações.
     

Partilhar esta Página