Tengo un pequeño problema con mis css en firefox, el caso es q este navegador no aplica el estilo correspondiente a algunos botones de mi submenu; lo mas extraño es que esto sucede de manera aleatoria (a veces ocurre y a veces no, y no siempre ocurre a los mismos botones).
el codigo del menu es el siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "este doctipe ta mal xq soy nuevo y no puedo publicar urls/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SG Jatix</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script language="javascript"type="text/javascript" src="mootools.js"></script>
<script language="javascript" type="text/javascript" src="sgjatix-components.js"></script>
</head>
<body onLoad="onLoad();">
<div class="banner"><div class="logo"></div></div>
<div id="menu_header" class="menu_header">
<div class="hl"></div>
<div class='menu_item_sel'>Clientes</div><a href='' class='menu_item'>
<div>Sucursales</div></a><a href='' class='menu_item'>
<div>Cajas</div></a><a href='' class='menu_item'>
<div>Sellos</div></a><a href='' class='menu_item'>
<div>Datos</div></a><div class="hr"></div>
</div>
<div class="bar">
<div class="hl_bar"></div><div class="hr_bar"></div>
</div>
<div class="page_content" id="page_content">
<div id="sub_menu" class="sub_menu">
<div class="container_header"></div>
<a href='' class='submenu_item'><div>Alta Clientes</div></a>
<a href='' class='submenu_item'><div>Edicion Clientes</div></a>
<a href='' class='submenu_item'><div>Planes Validos x Sellos</div>
</a>
</div>
<div id="Container" class="layout_content" align="center">
<div align="center">
</div>
</div>
</div>
<div class="foot"><div class="fl"></div><div class="fr"></div> </div>
</body>
</html>
el css q uso para los botones del submenu es el siguiente:
.sub_menu
{
position:absolute;
background-color: #FFFFFF;
left:25px;
top:5px;
width:200px;
height:406px;
}
a.submenu_item div
{
cursor:pointer;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#666666;
margin-bottom:2px;
width:200px;
height:25px;
text-decoration:none;
line-height:25px;
text-indent:5px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #999999;
}
a.submenu_item:hover div
{
background-image:url(../img/subitem.png);
color:#000000;
}
div.submenu_item_active
{
color:#FF0000;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
margin-bottom:2px;
background-image:url(../img/subitem.png);
width:200px;
height:25px;
line-height:25px;
text-indent:5px;
}
Usando firebug me encontre con q en el DOM este item se dibuja mal, es decir mientras q todos los otros son:
<a href='' class='submenu_item'><div>NOMBRE SUBMENU</div>
</a>
el que sale mal queda:
<div>
<a href='' class='submenu_item'>Planes Validos x Sellos
</a>
</div>
lo q causa indudablemente q el estilo no se aplique, lo q no logro deducir es csi esto es un bug de firefox, un error css, o una incompatibilidad de algun tipo con algun otro componente de la pagina...
desde ya agradesco cualquier aporte al respecto...