Div no se centra en Firefox

JamalDols · #1 (**permalink**) 11/05/2011, 06:11

Hola, resulta que tengo un div que en un footer, que va perfecto en Chrome y Safari, pero no en Firefox.

HTML:

Código:

<div id="footer"> <!-- HTML5 footer tag -->


	<section id="fcolumns">
		<section id="followus">
		     <h3 class="white">siguenos en</h3>
		     
		    
		    	 <a href="#">
		    	 	<img class="imalo" src="<?php bloginfo('template_directory'); ?>/images/icons/Facebook.png">
				</a>
				
				<a href="#">
		    	 	<img class="imalo" src="<?php bloginfo('template_directory'); ?>/images/icons/Twitter.png">
				</a>
				<a href="#">
		    	 	<img class="imalo" src="<?php bloginfo('template_directory'); ?>/images/icons/Linkedin.png">
				</a>
				<a href="#">
		    	 	<img class="imalo" src="<?php bloginfo('template_directory'); ?>/images/icons/RSS.png">
				</a>
				

		</section>
		<section id="archive">
			<h3 class="white">Archivo</h3>
			<ul class="archive">
				<?php wp_get_archives('title_li'); ?> 
			</ul>

		</section>
		
		<section id="aboutus">
			<h3 class="white">About us</h3>
			<ul class="aboutus">
				<?php wp_list_pages('orderby=name&title_li'); ?>
			</ul>


		</section>

	</section>
    	

</div>

Y el CSS es este:

Código:

#footer{ 
padding: 0;
height:190px;
margin-top: 150px; 
background-image: -webkit-gradient(
    linear,
    left bottom,
    right bottom,
    color-stop(0, #274A51),
    color-stop(0.5, #40654D),
    color-stop(1, #274A51)
);
background-image: -moz-linear-gradient(
    left center,
    #274A51 0%,
    #40654D 50%,
    #274A51 100%
);

}


#fcolumns {
width: 800px;
margin: 0 auto !!important;
height: 175px;
padding: 0px;
clear: left;
border: 1px solid white;
}

#followus {
width: 210px;
float: left;
}

#followus img{
margin-left: 10px;
margin-top: 6px;
}

#archive {
width: 230px;
margin-left: 50px;
float: left;
}

#aboutus {
width: 205px;
margin-left: 50px;
float: left;
}

Alguna idea? Porque creo que lo he intentado todo :(

Muchisimas gracias de antemano.

PedroDesing · #2 (**permalink**) 11/05/2011, 06:14

ponerle el ya clásico margin:0 auto?

Es que no se dentro de que que esta. Directamente del body? o de algun tipo de div contenedor???

JamalDols · #3 (**permalink**) 11/05/2011, 06:20

Si, he intentado con eso, pero nada.

Ah y claro, que se me ha olvidado. Lo que quiero centrar es #fcolumns dentro del footer, a su vez fcolumns, tiene los demas divs dentro de él. Que sospecho que es lo que hace que fcolumns tambien flote a la izquierda :(

PedroDesing · #4 (**permalink**) 11/05/2011, 07:19

Lo has mirado con firebug?

Lo mas probable es que el contenedor no mida lo que tiene q medir o algo asi.

JamalDols · #5 (**permalink**) 11/05/2011, 08:11

Si, en el firebug me sale todo correcto. Muy raro todo :/

catska · #6 (**permalink**) 11/05/2011, 12:48

tal vez

margin-left: auto
margin-right: auto

a mi me ha sucedido lo mismo, y aunque por logica no deberia suceder, lo resuelvo de esta manera

baccxus · #7 (**permalink**) 11/05/2011, 16:18

position:relative en footer?
Saludos

angelfcm · #8 (**permalink**) 11/05/2011, 17:30

Hola!,
Mira aquí tienes un error:

Código CSS:

Ver original#fcolumns {
width: 800px;
margin: 0 auto !!important; // quita !!important por eso no funciona

Aunque no estoy seguro si lo pusiste para que vieramos o si en realidad fué un fallo, hehe.

Otra cosa, prueba definiendo un doctype, usa éste:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">

Vá antes de la etiqueta <html>.

Saludos.