Sidebar rebelde

[knsin0]

Hola a todos,
estoy teniendo problemas para conseguir encajar el css en el sidebar de un blog, he pensado que iba a ser mucho lio conseguir explicarme bien en pocas lineas asi que he hecho un dibujo de lo que quiero conseguir (es para un theme de wp, en guiasibarita.com):

Código:

http://img79.imageshack.us/my.php?image=sinttulo1eb7.jpg

El sidebar_bottom es el que yo quiero agregar, los otros tres ya venian. Basicamente son dos problemas (ambos con sidebar_bottom):
1-No consigo hacer que sidebar_bottom ocupe todo el ancho del sidebar (deberia quedar como sidebar_top).
2-Los h2 parece ignorarlos y los muestra sin los parametros que le digo.

Llevo un rato trasteando pero no he conseguido gran cosa, tal y como esta ahora, se ve diferente en firefox y en IE. A ver si alguien me puede hechar una mano con esto
Muchas gracias.

[willyfc]

pero...y como esta lo demás, cuanto mide o cuanto tiene que medir el bottom,coloca el código o cuelga algo

[yosoyraro]

Cambia todo el bloque del sidebar_bottom por este y nos cuentas.

/*+++++++++++++++++++++++ Sidebar: Bottom component ++++++++++++++++++++++++++*/
.sidebar_bottom H2
{
font-family: Verdana, Arial, Georgia, Sans-serif;
font-size: 11px;
background: url(images/cat.jpg) no-repeat 56px 0px;
margin: 0 0 10px;
padding: 0px 0 0 8px;
width: 182px;
color: #FFC600;
text-transform: uppercase;
}
.sidebar_bottom LI
{
list-style: none;
float: left;
}
.sidebar_bottom
{
margin: 6px 0 0;
padding: 8px;
background: #4D4D4D;
width: 369px;
line-height: 12px;
text-align: justify;
border: 0px solid #91D3E9;
font-size: 10px;
font-family: verdana;
float: left;
}
.sidebar_bottom UL
{
list-style: none;
padding: 3px 0px 20px 10px;
}
.sidebar_bottom UL LI
{
padding: 4px 0 0px;
font-family: Arial, Georgia, Sans-serif;
font-size: 11px;
color: #7A888C;
width: 360px;
}
.sidebar_bottom UL LI A:link, .sidebar_bottom UL LI A:visited
{
color: #E7E7E7;
font-weight: 700;
}
.rsidebar UL LI H2
{
font-family: Verdana, Arial, Georgia, Sans-serif;
font-size: 11px;
background: url(images/cat.jpg) no-repeat top left;
margin: 0;
padding: 7px 0 0 8px;
height: 30px;
width: 182px;
color: #FFC600;
text-transform: uppercase;
}
.sidebar_bottom UL UL LI
{
padding: 0 0 0 20px;
line-height: 18px;
font-family: Arial, Georgia, Sans-serif;
background: url(images/arrow_blue.jpg) no-repeat 0px 0px;
}
.sidebar_bottom UL UL UL LI
{
padding: 0 0 0 14px;
line-height: 18px;
font-family: Arial, Georgia, Sans-serif;
font-size: 11px;
background: url(images/sub-cat.jpg) no-repeat 3px 3px;
}
.sidebar_bottom UL UL UL LI A:link, .sidebar_bottom UL UL UL LI A:visited
{
color: #E7E7E7;
font-weight: 700;
}
/*++++++++++++++++++++++++++++++ Footer +++++++++++++++++++++++++++++++++++*/

Si me permites un consejo.... intenta ser más ordenado con las etiquetas html... :)

[knsin0]

Parece que ahora si que funciona como deberia, muchisimas gracias yosoyraro. Veo que has definido los H2, LI y demas de manera independiente, ¿era eso lo que fallaba? ¿como lo has hecho?

Sobre lo del orden de las etiquetas, lo dices por usar H2 para eso no? Quizas deberia usar una etiqueta de menor relevancia como H4?

[yosoyraro]

Hola, me alegro de que te sirva. Para ver lo que he hecho solo tienes que comparar lo que tenías antes con esto.
Sobre lo del código me refiero a que hay un <h2> que tiene delante un <li>, el otro no... y cosas raras de ese tipo. :)

[knsin0]

Tratare de revisarlo para que quede mejor ordenado, gracias por el consejo