estoy creando un CSS para un tema de Wordpress que estoy haciendo, pero me ha pasado una cosa extrañisima.
Hubo un momento en que toda funcionaba correctamente, pero de pronto, los titulos de las noticias (controlados por la declaracion .post h1 ) se me empezaron a mostrar con un tamaño de letra considerablemente menor de lo que le tengo puesto.
He validado el CSS con el CSS Validator de la W3C y me da que esta todo correcto, asi que he descartado algun error de sintaxis (como por ejemplo que me hubiera faltado un punto y coma o algo por el estilo), asi que decido centrarme unicamente en la clase que correspondiente.
Los codigos serian los siguientes, a ver si podeis echarme una mano por favor, porque no consigo ver de que puede ser:
XHTML
Código:
<div class="post" id="post-<?php the_ID(); ?>">
<h1 class="titulo_noticia"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
<div id="metadatos1">
<span class="autor_span">Por <b><?php the_author(); ?></b></span>
<span class="fecha_span">El <b><?php the_time('d/m/Y'); ?></b></span>
<span class="categorias_span">En <b><?php the_category(', ') ?></b></span>
</div>
<div id="textomensaje">
<?php the_content(); ?>
</div>
<div class="clearboth">
</div>
<div id="metadatos2">
<div id="tags"><span class="tags_span">Tags: <b><?php the_tags(', ') ?></b></span></div>
<div id="comentarios"><span class="comentarios_span"><b><?php comments_popup_link('No hay comentarios', '1 Comentario', '% Comentarios'); ?></b></span></div>
</div>
</div>
Y este es el CSS que controla las primeras clases de arriba, las del titulo:
CSS
Código:
.post h1 {
font-family: Arial, sans-serif, Helvetica;
font-size: 18px;
text-align: left;
margin: 0 0 6px 0;
}
.post h1 a, a:link, a:visited {
color: #036;
text-decoration: none;
}
.post h1 a:hover {
color: #F90;
}
.titulo_noticia {
background-image: url(imagenes/titulo_noticia.png);
background-repeat: no-repeat;
background-position: top left;
text-indent: 20px;
}
#metadatos1 {
text-align: left;
font-family: Arial, sans-serif, Helvetica;
font-size: 12px;
border-bottom: #999 1px dotted;
padding-bottom: 12px;
color: #333;
}
#metadatos1 a, a:link, a:visited {
color: #036;
text-decoration: none;
}
#metadatos1 a:hover {
color: #F90;
}
.autor_span {
padding-left: 18px;
background: url(imagenes/autor.png) no-repeat top left;
}
.fecha_span {
margin-left: 5px;
padding-left: 18px;
background: url(imagenes/fecha.png) no-repeat top left;
}
.categorias_span {
margin-left: 5px;
padding-left: 18px;
background: url(imagenes/categorias.png) no-repeat top left;
}
#textomensaje {
text-align: center;
}
#textomensaje p {
text-align: justify;
font-family: Arial, sans-serif, Helvetica;
font-size: 12px;
font-weight: normal;
line-height: 1.7em;
color: #333;
}
#textomensaje p a, a:link, a:visited {
font-weight: bold;
text-decoration: none;
color: #036;
}
#textomensaje p a:hover {
color: #f90;
}
#textomensaje img {
border: #CCC 1px solid;
padding: 3px;
}
#metadatos2 {
text-align: left;
font-family: Arial, sans-serif, Helvetica;
font-size: 12px;
margin-bottom: 65px;
color: #333;
}
#metadatos2 a, a:link, a:visited {
color: #036;
text-decoration: none;
}
#metadatos2 a:hover {
color: #F90;
}
#tags {
float: left;
}
#comentarios {
float: right;
}
.tags_span {
padding-left: 18px;
background: url(imagenes/tags.png) no-repeat top left;
}
.comentarios_span {
padding-left: 18px;
background: url(imagenes/comentarios.png) no-repeat top left;
}
Por cierto, deciros que si en la clase ".post h1" cambio el tamaño de letra, es como si no lo reconociera... el titulo se queda del mismo tamaño...
Perdon por el tocho, espero que alguien pueda ayudarme...
MUCHAS GRACIAS
