Hi problema con menu vertical en firefox

Citar

Escrito el 09 May 2007 08:27 pm

Este es el código del style más el div y sus enlaces, el problema que tengo es que en firefox se me va de lado, y el explorer se me ajusta (no comprendo deberia ser al revés) saben si puede ser por algo del padding? si quieren prueban el código en una página de prueba a ver si les funciona =O. y gracias :3

Código :

.menuproductos{
   list-style-type: none;
   margin: 5px 0;
   padding: 0;
   width: 80px;
   border: 1px solid #9A9A9A;
   border-bottom-width: 0;
   margin-left: 20px;
   margin-top: 10px;
}

.menuproductos li a{
background: white url(menugreen.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;

}

* html .menuproductos li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 170px;
}

.menuproductos li a:visited, .menuproductos li a:active{
color: white;
}

.menuproductos li a:hover{
background-image:menugreen.gif;
}

</style>

</head>

<body>
<div align="center"><div id="container">
<div id="top">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="995" height="119">
    <param name="movie" value="swf/top.swf" />
    <param name="quality" value="high" />
    <param name="WMODE" value="TRANSPARENT" />
    <embed src="swf/top.swf" width="995" height="119" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="TRANSPARENT"></embed>
  </object>
</div>

<div id="left"><ul class="menuproductos">
<li><a href="www.google.com" >Boton1</a></li>
<li><a href="www.google.com" >Boton2</a></li>
<li><a href="www.google.com">Boton3</a></li>
<li><a href="www.google.com">Boton4</a></li>
<li><a href="www.google.com">Boton5</a></li>
<li><a href="www.google.com" >Boton6</a></li>
<li><a href="www.google.com" >Boton7</a></li>
<li><a href="www.google.com">Boton8</a></li>
<li><a href="www.google.com">Boton9</a></li>
<li><a href="www.google.com">Boton10</a></li>
<li><a href="www.google.com" >Boton11</a></li>
<li><a href="www.google.com" >Boton12</a></li>
<li><a href="www.google.com">Boton13</a></li>
<li><a href="www.google.com">Boton14</a></li>
<li><a href="www.google.com">Boton15</a></li>
<li><a href="www.google.com" style="border-bottom-width: 0">Boton6</a></li>      
</ul>
</div>

Por onnasama

325 de clabLevel

1 tutorial

Envíale un mensaje privado

Citar

Escrito el 10 May 2007 10:32 am

He solucinado el problema cerrando estas dos etiquetas

Código :

<div align="center"><div id="container">

antes del menú.

De forma que queda así:

Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
.menuproductos{
   list-style-type: none;
   margin: 5px 0;
   padding: 0;
   width: 80px;
   border: 1px solid #9A9A9A;
   border-bottom-width: 0;
   margin-left: 20px;
   margin-top: 10px;
}

.menuproductos li a{
background: white url(menugreen.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;

}

* html .menuproductos li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 170px;
}

.menuproductos li a:visited, .menuproductos li a:active{
color: white;
}

.menuproductos li a:hover{
background-image:menugreen.gif;
}

</style>

</head>

<body>
<div align="center">
<div id="container">
<div id="top">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="995" height="119">
    <param name="movie" value="swf/top.swf" />
    <param name="quality" value="high" />
    <param name="WMODE" value="TRANSPARENT" />
    <embed src="swf/top.swf" width="995" height="119" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="TRANSPARENT"></embed>
  </object>
</div>
</div>
</div>

<div id="left">
<ul class="menuproductos">
<li><a href="www.google.com" >Boton1</a></li>
<li><a href="www.google.com" >Boton2</a></li>
<li><a href="www.google.com">Boton3</a></li>
<li><a href="www.google.com">Boton4</a></li>
<li><a href="www.google.com">Boton5</a></li>
<li><a href="www.google.com" >Boton6</a></li>
<li><a href="www.google.com" >Boton7</a></li>
<li><a href="www.google.com">Boton8</a></li>
<li><a href="www.google.com">Boton9</a></li>
<li><a href="www.google.com">Boton10</a></li>
<li><a href="www.google.com" >Boton11</a></li>
<li><a href="www.google.com" >Boton12</a></li>
<li><a href="www.google.com">Boton13</a></li>
<li><a href="www.google.com">Boton14</a></li>
<li><a href="www.google.com">Boton15</a></li>
<li><a href="www.google.com" style="border-bottom-width: 0">Boton6</a></li>      
</ul>
</div> 
</body>
</html>

Por ryuz

350 de clabLevel

2 tutoriales

Envíale un mensaje privado Web

Citar

Escrito el 11 May 2007 06:02 pm

Oye muchas gracias, aplicare esto al menu css gracias muchas gracias

Por onnasama

325 de clabLevel

1 tutorial

Envíale un mensaje privado

Hi problema con menu vertical en firefox

Escribe una respuesta rapida