Foros del Web » Creando para Internet » CSS »

Problema con el Width en FireFox

Estas en el tema de Problema con el Width en FireFox en el foro de CSS en Foros del Web. Estoy contruyendo un control en el cual uno puede seleccionar un letra, y en base a esa letra (que es un Link) me muestra algo, ...
  #1 (permalink)  
Antiguo 13/10/2006, 15:25
 
Fecha de Ingreso: octubre-2006
Ubicación: La Plata - Argentina
Mensajes: 3
Antigüedad: 11 años, 2 meses
Puntos: 0
Pregunta Problema con el Width en FireFox

Estoy contruyendo un control en el cual uno puede seleccionar un letra, y en base a esa letra (que es un Link) me muestra algo, bueno la cosa esta en que le puse un Background al hover del link y no toma el ancho de imagen sino el de la fuente el FireFox, en el IE6 se ve perfecto.
Si alguien me puede ayudar se lo agradeceria muchisimo .

aca les muestro el div, y mas a bajo los css.
Código HTML:
<div id="ByNameTitleContainer">
	<h2>Dog Breeds By Name</h2>
	<div id="BreedByName">
	<span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">A</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">B</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">C</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">D</span>
	<span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">E</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">F</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">G</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">H</span>
	<span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">I</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">J</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">K</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">L</span>
	<span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">M</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">N</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">O</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">P</span>
	<span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">Q</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">R</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">S</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">T</span>
	<span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">U</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">V</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">W</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">X</span>
	<span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">Y</span><span class="Alphabetic" onMouseOver="this.className='AlphabeticOn'" onMouseOut="this.className='Alphabetic'">Z</span>
	</div>
</div> 

Código HTML:
#ByNameTitleContainer {
	width: 736px;
	height:auto;
	position: relative;
	top:0px;
	left:0px;
	text-align: left;
	background-color: #FFFFFF;
}
#ByNameTitleContainer h2{
	font-family: Arial;
	font-size: 20px;
	font-weight: bold;
	line-height:100%;
	color:#8B3827;
	text-align: left;
	text-decoration:none;
	height: 43px;
	margin-top: 17px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
}
#BreedByName {
	width: 100%;
	height: 21px;
	border-bottom-color: #DFB462;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-top-color: #DFB462;
	border-top-style:solid;
	border-top-width: 1px;
	text-align: center;
}
#BreedByName span.Alphabetic{
	font-family: Verdana;
	font-size: 12px;
	font-weight: normal;
	line-height: 120%;
	color:#662428;
	text-align: center;
	background-image: url(../i/ucBreedByNameOff.jpg);
	width: 17px;
	height:15px;
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 0px;
	margin-top:1px;
	display: inline;
	cursor: pointer;
	word-spacing: 2px;
	text-decoration: none;
}
#BreedByName span.AlphabeticOn{
	font-family: Verdana;
	font-size: 12px;
	font-weight: bold;
	line-height: 120%;
	color:#FFFFFF;
	text-align: center;
	background-image: url(../i/ucBreedByNameOn.jpg);
	width: 17px;
	height:15px;
	margin-left: 6px;
	margin-right: 6px;
	margin-bottom: 0px;
	margin-top:1px;
	display: inline;
	cursor: pointer;
	word-spacing: 2px;
	text-decoration: none;
}

#BreedByName a.Alphabetic:hover{
	font-weight: bold;
	line-height: 120%;
	color:#FFFFFF;
	background-image: url(../I/ucBreedByNameOn.jpg);
}

Última edición por aeayala; 17/10/2006 a las 14:48
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:51.