Botones CSS

[codek_orz]

Hola buenas tengo un problema con los botones de esta web www.liberartumovilenalicante.com como veis salen descolocados, quiero que se ajusten al div negro que hay de fondo. No se porqué motivo se hechan para arriba. El código es el siguiente

Código HTML:

<div class="menu2">
<a href="index.php" class="button">Inicio</a>
<a href="noticias.php" class="button">Noticias</a>
<a href="modelos.php" class="button">Modelos</a>
<a href="conocenos.php" class="button">Conocenos</a>
</div>
 

Código CSS:

.menu2 {
    background-color:#000;
    width: 800px;
    height:50px;
    margin-left:auto;
    margin-right:auto;
}
.button {
   border-top: 1px solid #666666;
   background: #cccccc;
   background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
   background: -webkit-linear-gradient(top, #999999, #cccccc);
   background: -moz-linear-gradient(top, #999999, #cccccc);
   background: -ms-linear-gradient(top, #999999, #cccccc);
   background: -o-linear-gradient(top, #999999, #cccccc);
   padding: 12px 25px;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 15px;
   font-family: Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #0099cc;
   background: #0099cc;
   color: #ffffff;
   }
.button:active {
   border-top-color: #999999;
   background: #999999;
   }
 

Además, no me funcionan en IE, y se supone que estan con valores para cuando detecta IE, porque los webkit son para IE ¿no?... Bueno espero respuesta, un saludo y gracias!

[emprear]

Agregando esto al css

Código CSS:

a {
display: block;
float: left;
width: 200px;
height: 49px;
line-height: 49px;
text-align: center;
}
 

Y removiendo
esto
padding: 12px 25px; de .button
Por supuesto pod´s variar los anchos segun tu criterio, yo te lo hice para que se aji¡uste a los 800px de tu div. lo más frecuente es que para dicho tipo de menues utilices una lista desordenada <ul>

lo vas a corregir bastante, webkit es para Chrome y Safari, no para IE
El gradient y el BorderRadius no te va a funcionar en IE (sólo a partir de IE 10)
Para aplicarlo necesitas de un fix como el de http://css3pie.com/

Saludos

[codek_orz]

Iniciado por emprear

Agregando esto al css

Código CSS:

a {
display: block;
float: left;
width: 200px;
height: 49px;
line-height: 49px;
text-align: center;
}
 

Y removiendo
esto
padding: 12px 25px; de .button
Por supuesto pod´s variar los anchos segun tu criterio, yo te lo hice para que se aji¡uste a los 800px de tu div. lo más frecuente es que para dicho tipo de menues utilices una lista desordenada <ul>

lo vas a corregir bastante, webkit es para Chrome y Safari, no para IE
El gradient y el BorderRadius no te va a funcionar en IE (sólo a partir de IE 10)
Para aplicarlo necesitas de un fix como el de http://css3pie.com/

Saludos

¿Una lista desordenada, un <ul> para cada boton o envolver todos en un <ul> y no utilizar un div?

un saludo y gracias por contestar

[emprear]

http://www.buayacorp.com/archivos/me...-css-y-listas/

[codek_orz]

Iniciado por emprear

http://www.buayacorp.com/archivos/me...-css-y-listas/

Muchisimas gracias, voy a verlo, por cierto utilice el css3pie pero no me funciona.
Puse el behavior: url(css/PIE.htc); subí el archivo pero en IE no se me ve el gradient...
Puedes verlo en www.liberartumovilenalicante.com en mozilla va pero en IE ni del palo.

Muchas gracias!!

[emprear]

en este momento tu archivo PIE.htc arroja estos encabezados
Date: Tue, 27 Sep 2011 20:21:06 GMT
Server: Apache
Last-Modified: Tue, 27 Sep 2011 19:47:08 GMT
Etag: "80390c90-9ee1-4adf18a76eac7"
Accept-Ranges: bytes
Content-Length: 40673
Content-Type: text/plain

lee la info en http://css3pie.com/documentation/kno.../#content-type

Basicamente dice que tenes que pasarlo como text/x-component, lo cual podés hacer poniendo en tu raíz un archivo .htaccess (o editandolo si ya lo tenés) y agregar en una linea la directiva
AddType text/x-component .htc

Saludos

[codek_orz]

cree un archivo .htaccess ya que en mi servidor no esta y le puse la línea: AddType text/x-component .htc pero sigue sin funcionar :S

[emprear]

Existe la posibildad de que no tengas habilitado el uso de htaccess, pero si te fijas en el zip de piecss hay un pie.php, subilo al server y llamalo desde el css en lugar del htc

.myElement {

behavior: url(PIE.php);
}

Ese php carga el htc y le pasa el mimetype correcto a traves de un header.
Si no, no sabría decirte, yo lo uso y funciona correctamente

Saludos

[codek_orz]

Ahora sí!!! Muchas gracias tio, me has sido de mucha ayuda te lo agradezco de verdad. Un saludo :) EDIT: Mierda, funcionan los gradientes, pero no el hover correctamente... ¿a qué se puede deber eso?

[codek_orz]

Iniciado por codek_orz

Ahora sí!!! Muchas gracias tio, me has sido de mucha ayuda te lo agradezco de verdad. Un saludo :) EDIT: Mierda, funcionan los gradientes, pero no el hover correctamente... ¿a qué se puede deber eso?