CSS : Firefox vs.IE7

chantas

Power Member
Boas malta.

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

Imagem do IE7:




Imagem do Firefox:




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.
 
Boas,

Não sei se será

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

Experimenta fixar uma altura a ver se fica igual.
Para centrar um DIV

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:
Back
Topo