Buenas a todos !!!
Estoy creando un periodico digital con Wordpress, y tengo un problema de css con Firefox, os cuento la pagina es la siguiente:
http://www.popilands.net76.net
Pues bien estrañamente en IExplorer se ve perfecto, en cambio con Firefox, se desborda la columna de enmedio, la Sidebar se encoge i la columna izquierda se engruesa. Llevo toda la tarde dandole y no ser que puede ser, ya que si saco todo el contenido de la columna del medio, mantiene su ancho anormal.
No se a ver si me podeis echar un cable.
Codigo CSS:
Código HTML:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin : 0;
padding : 0;
border : 0;
outline : 0;
font-size : 100%;
vertical-align : baseline;
background : transparent;
}
ol, ul {
list-style : none;
}
blockquote, q {
quotes : none;
}
blockquote:before, blockquote:after, q:before, q:after {
content : '';
content : none;
}
:focus {
outline : 0;
}
table {
border-collapse : collapse;
border-spacing : 0;
}
body {
font : 62.5%/1.3 verdana, 'Lucida Grande', arial, sans-serif;
text-align : center;
background : #fff;
color : #111;
}
#page {
width : 962px;
margin : 0 auto;
text-align : left;
}
#header {
width : 960px;
float : left;
position : relative;
}
#container {
width : 920px;
float : left;
padding : 0 20px;
background : #fff;
}
#rotating {
width : 920px;
float : left;
padding : 20px 0;
border-top : 1px solid #ccc;
border-bottom : 1px solid #ccc;
}
#primary {
width : 750px;
float : left;
}
#secondary {
width : 150px;
float : left;
}
#sidebar-1 {
border-left : 1px solid #ccc;
}
.sidebar {
float : left;
width : 150px;
padding : 10px 0 0 10px;
}
#footer {
width : 920px;
float : left;
clear : both;
}
#esquerracol {
width : 420px;
border-right : 1px solid #b6b6b6;
padding-right : 18px;
text-align : justify;
}
#esquerracol, #dretacol {
margin-top : 10px;
float : left;
}
#dretacol {
width : 282px;
border-right : 1px solid #b6b6b6;
padding-right : 15px;
padding-left : 15px;
text-align : justify;
}
#esquerracol img, #dretacol img {
padding : 1px;
border : 1px solid #999;
}
#dretacol img {
float : left;
margin : 3px 10px 4px 0;
}
#esquerracol img {
float : left;
margin : 3px 10px 4px 0;
}
El Codigo de la pagina es:
Código HTML:
<div id="page">
<?php get_header(); ?>
<?php if(have_posts()) : ?>
<div id="esquerracol">
<?php query_posts('showposts=3&cat=5'); ?>
<h3><?php wp_list_categories('include=5&title_li=&style=none'); ?></h3>
<?php while (have_posts()) : the_post(); ?>
<h2 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" class="title"> <?php the_title(); ?></a></h2>
<div class="entry-byline">
<span class="entry-date"><abbr class="updated" title="<?php the_time('Y-m-d\TH:i:sO'); ?>"><?php the_time('M jS, Y'); ?></abbr></span>
</div>
<?php $values = get_post_custom_values("featuredarticleimage");
if (isset($values[0])) { ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('url'); echo '/'; echo get_option('upload_path'); echo '/'; $values = get_post_custom_values("featuredarticleimage"); echo $values[0]; ?>" alt="" /></a>
<?php } ?>
<?php
// En l'apartat de baix on posa 80 vol dir el numero de paraules que sortiran de l'article MOLT IMPORTANT ?>
<?php the_content_rss('', TRUE, '', 80); ?><br/>
<div class="entry-byline">
<?php comments_popup_link('No hi han comentaris encara', '1 comentari', '% comentaris', 'comments-link', 'Comentaris fora del post'); ?>
<br/><span class="entry-categories"><?php _e('Publicat a: '); ?><?php the_category(', '); ?>.</span>
</div>
<?php endwhile; ?>
</div>
<div id="dretacol">
<?php // ******************* VIDEO ******* ?>
<?php query_posts('showposts=1&cat=15'); ?>
<h3><?php wp_list_categories('include=15&title_li=&style=none'); ?></h3>
<?php while (have_posts()) : the_post(); ?>
<h2 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" > <?php the_title(); ?></a></h2>
<div class="entry-byline">
<span class="entry-date"><abbr class="updated" title="<?php the_time('Y-m-d\TH:i:sO'); ?>"><?php the_time('M jS, Y'); ?></abbr></span>
</div>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"></a>
<?php the_content() ?>
<div class="entry-byline">
<?php comments_popup_link('No hi han comentaris encara', '1 comentari', '% comentaris', 'comments-link', 'Comentaris fora del post'); ?>
<br/><span class="entry-categories"><?php _e('Publicat a: '); ?><?php the_category(', '); ?>.</span>
</div>
<?php endwhile; ?><br/>
<?php // ******************* FI DE VIDEO ******* ?>
<?php $display_categories = array(3,5,9); foreach ($display_categories as $category) { ?>
<?php query_posts("showposts=1&cat=$category");
$wp_query->is_category = false;
$wp_query->is_archive = false;
$wp_query->is_home = true;?>
<h3><a href="<?php echo get_category_link($category);?>">
<?php single_cat_title(); ?></a></h3>
<?php while (have_posts()) : the_post(); ?>
<h2 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" class="title"><?php the_title(); ?></a></h2>
<div class="entry-byline">
<span class="entry-date"><abbr class="updated" title="<?php the_time('Y-m-d\TH:i:sO'); ?>"><?php the_time('M jS, Y'); ?></abbr></span>
</div>
<?php $values = get_post_custom_values("rightcolimage");
if (isset($values[0])) {?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('url'); echo '/'; echo get_option('upload_path'); echo '/'; $values = get_post_custom_values("rightcolimage"); echo $values[0]; ?>" alt="" /></a>
<?php } ?>
<?php the_content_rss('', TRUE, '', 80); ?> <br/><br/>
<?php endwhile; ?>
<?php } ?>
</div>
<?php endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
</div> Gracias de antemano !!!