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í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