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

CSS : Firefox vs.IE7

Discussão em 'Web Development' iniciada por chantas, 22 de Março de 2008. (Respostas: 2; Visualizações: 1302)

  1. chantas

    chantas Power Member

    Boas malta.

    Tou com um pequeno problema a nivel de compatibillidade CSS em Firefox e Ie7.

    Imagem do IE7:

    [​IMG]


    Imagem do Firefox:

    [​IMG]


    Como podem vêr está ali um espaço no firefox depois do menu que não devia existir....podem ajudar-me a analisar o código para detectar o problema? :)

    Aqui vai o HTML:
    Código:
    <body>
    <div id="wrapper">
    
    <div id="header" class="largura">
    
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="899" height="114">
        <param name="movie" value="images/banner.swf" />
        <param name="quality" value="high" />
        <embed src="images/banner.swf" width="899" height="114" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
      </object>
    
    <div id="menu">
    
    <ul>
    <li><a href="http://www.dynamicdrive.com/"style="border-left: 1px solid #DADADA;">Quem Somos</a></li>
    <li><a href="http://www.dynamicdrive.com/style/">Galeria de Imagens</a></li>
    <li><a href="http://www.cssdrive.com/">Contactos</a></li>
    </ul>
    </div>
    </div>
    
    <div id="corpo">
    <div id="left">
    </div>
    <div id="right">
    <h5>dfgdfgdfgdfgdfgdfgdfg</h5>
    </div>
    </div>
    
    <div id="footer"></div>
    </div>
    </body>
    E o respectivo CSS:

    Código:
    /* CSS Document */
    
    
    
    body {
    	background:url(images/fundo.png) repeat-x;
    	margin:0px;
    	padding:0px;
    
    	}
    
    #wrapper {
    	position:absolute;
    	left: 50%;
    	width: 899px; 	
    	margin-left: -449.5px; 
    	}
    
    #header {
    background:#FFFFFF;
    height:auto;
    
    	}
    	
    #menu{
    font-weight: bold;
    font-size: 90%;
    
    }
    
    #menu:after{ /*Add margin between menu and rest of content in Firefox*/
    
    display: block; 
    height: 0; 
    visibility: hidden;
    
    }
    
    #menu ul{
    border: 1px solid #DADADA;
    width: auto;
    background:url(images/menu.png) repeat-x;
    padding: 5px 0;
    margin: 0;
    text-align: center; /*set value to "right" for example to align menu to the left of page*/
    }
    
    #menu ul li{
    display:inline;
    }
    
    #menu ul li a{
    color: #494949;
    padding: 5px;
    margin:0;
    text-decoration: none;
    border-right: 1px solid #DADADA;
    
    
    
    }
    
    #menu ul li a:hover{
    background: url(images/hover.png) center center repeat-x;
    }
    
    #corpo {
    	background:#ffffff url(images/corpo.png) repeat-x;
    	height:450px;
    	
    	
    	
    	}
    	
    #left {
    	background:url(images/imagem5.jpg) no-repeat 50% 50%;
    	width:262px;
    	height:392px;
    	float:left;
    	}
    	
    #right {
    	width:637px;
    	height:392px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	
    	}
    #footer {
    	background:url(images/menu.png) repeat-x;
    	height:29px;
    	clear:both;
    	}
    Fico a aguardar algum feedback da vossa parte ;)

    Cumps. e obrigado.
     
  2. K0mA

    K0mA Power Member

    Boas,

    Não sei se será

    #header {
    background:#FFFFFF;
    height:auto;
    }

    Experimenta fixar uma altura a ver se fica igual.
    Para centrar um DIV
     
    Última edição: 22 de Março de 2008
  3. chantas

    chantas Power Member

    Já tinha experimentado isso, mas a altura fica sempre diferente entre o IE e o FF. :(

    Já consegui :)

    Alterei o css do header para:

    #header {
    background:#FFFFFF;
    height:120px;
    margin-bottom:20px;
     
    Última edição pelo moderador: 25 de Março de 2008

Partilhar esta Página