Problema con borde en un link

[merolhack]

Hola, no he encontrado la solución al siguiente problema:

tengo un DIV de 22px de alto, en ese DIV meto un menu de lista desordenada que a su vez contiene un enlace y un span

Código HTML:

<div>
        <ul>
               <li>
                     <a>
                            <span></span>
                     </a>
               </li>
        </ul>
</div> 

El problema viene cuando le deja un espacio de 1 pixel de alto encima del DIV contenedor...

La siguiente imagen muestra el aspecto cuando presiono el enlace:


que podra ser ese borde superior??

[webosiris]

sin el CSS correspondiente va a ser muy difícil adivinar

[Spookysama]

Si pones el codigo que usas css podremos comprender un poco mas y que en que navegador te que genera le borde

asi adiviniando te recomendaria que pongas al ppio del css
*{
border=0px;
margin=0px;
}

[webosiris]

Iniciado por Spookysama

*{
border=0px;
margin=0px;
}

es border:0 y margin:0, con dos puntos, no =...

[merolhack]

Es que esta un poco grande el codigo :S pero bueno ahi va xD

Este es el contenedor de la pestaña gris que con el flash que le pongo arriba(88px) y la pestaña gris de abajo(22px) juntan 110px:

Código:

#ja-headerwrap2 {
border: 0px;
background: url(../images/bg_header.jpg) no-repeat bottom right #669df0;
height: 110px;
padding: 0px;
background-color: #669df0;
margin-top: 0px;
margin-bottom: 0px;
}

Que a su vez contiene otros dos divs de 88px de alto:

Código:

#ja-headerwrap2 #ja-header {
padding: 0px;
margin: 0px;
height: 88px;
text-align: left;
vertical-align: bottom;
background-color: #669df0;
border: 0px;
}
#ja-headerwrap2 #ja-header .moduletable {
padding: 0px;
margin: 0px;
height: 88px;
vertical-align: bottom;
background-color: #669df0;
border: 0px;
}

Para poner la pestaña le pongo:

Código:

#menu_sup2 {
margin: 0px;
padding: 0px 0 0 0;
width: 550px;
height: 22px;
background: url(../images/pleca_gris.png) no-repeat bottom left;
border: 0px;
}

Y por ultimo, los códigos del menu que se encuentra dentro de la pestaña gris:

Código HTML:

div.transmenu-inner1 #ja-transmenu {
margin: 0px 0 0 0;
padding: 0px 0 0 0;
}

Código HTML:

div.transmenu-inner1 #ja-transmenu ul {
margin-bottom: 0px;
padding: 0px 0 0  0;
height: 22px;
vertical-align: text-bottom;
}

Código HTML:

div.transmenu-inner1 #ja-transmenu li {
margin-bottom: 0;
padding: 0 0 0  0;
background: none;
display: inline;
height: 20px;
border: none;
vertical-align: text-bottom;
}

Código HTML:

div.transmenu-inner1 #ja-transmenu li a { /* common styles for 1st level menu */
float: left;
margin: 0 0px 0 0;
padding: 0 0 0 14px;
display: block;
font-size: 100%;
font-weight: bold;
text-decoration: none;
line-height: 20px;
color: #405685;
vertical-align: bottom;
/* background: url(../images/navl-hover.gif) no-repeat center left; */
border: none;
}

Código HTML:

div.transmenu-inner1 #ja-transmenu li a span {
float: left;
padding: 0 14px 0 0px;
display: block;
font-weight: bold;
cursor: pointer;
color: #405685;
border: none;
vertical-align: text-bottom;
height: 20px;
/* background: url(../images/navr-hover.gif) no-repeat center right; */
}

El codigo HTMl sería el siguiente:

Código HTML:

<div id="ja-headerwrap2">
	<div id="ja-header">
		<div class="moduletable">
			<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="1000" height="88">
			<param name="width" value="1000" />
			<param name="height" value="88" />
			<param name="quality" value="high" />
			<param name="src" value="un.swf" />
		
			<embed type="application/x-shockwave-flash" width="1000" height="88" quality="high" src="un.swf"></embed>
			</object>
		</div>
		<div id="menu_sup2">
			<div class="transmenu-inner1">
				<ul id="ja-transmenu">
					<li>
						<a href="#" class="mainlevel-trans-first" id="menu1" title="Inicio">
							<span>Inicio</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div> 

Espero que le entiendan