Espaciado antes H2

[norbertohdez]

Hola señores, tengo un pequeño problema, en un diseño que estoy pasando de psd a xhtml/css en el side bar me da un salto de linea la etiqueta H2.

Miren esto con IE7:

norbertohernandez(punto)com/puntog

(el espacio esta antes de "categorias")
El fragmento de esa parte html es:

Código:

<div id="sidebar">
            	<div id="search_formulary">
                	<form method="get" id="searchform" action="post">
                    	<input type="text" value="" name="s" id="s" size="11" class="texto_buscar"/>
                       	<input type="submit" id="searchsubmit" value=""  class="buscar_btn" />
					</form>
                    <div class="clear">
                    </div>
        		</div>
                <div class="sidebar_module">
                	<h2>Categor&iacute;as</h2>
                	<ul>
                    	<li><a href="#">Cat 1</a></li>
                        <li><a href="#">Cat 1</a></li>
                        <li><a href="#">Cat 1</a></li>
                        <li><a href="#">Cat 1</a></li>
                        <li><a href="#">Cat 1</a></li>
                	</ul>
              </div>
              <div class="sidebar_module_end">
              </div>
          <div class="sidebar_module">
                	<h2>Blogroll</h2>
                	<ul>
                    	<li><a href="#">Blog 1</a></li>
                        <li><a href="#">Blog 1</a></li>
                        <li><a href="#">Blog 1</a></li>
                        <li><a href="#">Blog 1</a></li>
                        <li><a href="#">Blog 1</a></li>
                	</ul>
              </div>
              <div class="sidebar_module_end">                    </div>
                <div class="clear">
            	</div>
            </div>
            <div class="clear">
            </div>
		</div>

el css:

Código:

#sidebar {
width:175px;
position:relative;
float:right;
}

.sidebar_module h2 {
	color:#58585A;
	font-size:15px;
	font-weight:bold;
	padding-bottom:15px;
}

.sidebar_module {
	background-image: url(../images/sidebar_module_bg.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding: 15px 15px 0 15px;
}

.sidebar_module_end {
	background-image: url(../images/sidebar_module_end.png);
	background-repeat: no-repeat;
	background-position: left top;
	margin-bottom:15px;
	height:23px;
	width:174px;
}

Como ven?

Un dato que puede influir es que estoy usando para los PNG's esto:

Código:

<!--[if lt IE 7]>
        <script type="text/javascript" src="scripts/unitpngfix.js"></script>
<![endif]-->

aunque no creo porque esta etiquetado para reconocerse en IE6 para abajo.

GRACIAS DE ANTEMANO :S

[norbertohdez]

Me respondo yo mismo por si les sirve en alguna ocación:

al contenedor de el h2 que brincaba una linea (en este caso lo contenia .sidebar_module) no tenia especificada una anchura....

con eso se ha resuelto el problema.


Se que en otras ocaciones brinca tambien en IE6 en listas <li>. Si les sirve tambien de algo eso se soluciona quitando un posible espacio que quedara antes de cerral la etiqueta </li>. De ser posible y si la situacion lo permite se debe ajustar la altura desde css a los elementos LI

SALUDOS