Problemas con bordes para div en IE

[p3rikl3s]

Hola amigos foreros, en esta ocasión tengo un pequeño pero molesto problema. Estoy tratando de colocar los bordes a un div y que se vea bien en Internet explorer. Para eso uso el siguiente css:

.bordes-div{border-left:1px solid #e6e6e6;border-right:1px solid #e6e6e6;}

Se supone que esto coloca bordes del lado izquierdo y derecho del div. En Mozilla Firefox y Opera funciona bien, pero en Internet Explorer el margen izquierdo se ubica junto al borde derecho.

Espero su ayuda colegas. Se les agradece.

Nota: El internet explorer que uso es la versión 7.

Saludos.

[hades87]

y en vez de hacer una clase solo para bordes, por que no se lo aplicas directamente al div qeu quieras?

[p3rikl3s]

Pues esa clase va acompañada de otros atributos, solo que los quite apra facilitar la compresión de mi problema...

Gracias y Saludos

[kseso?]

Siempre que esa caja tenga algún contenido dentro tendrá una superficie (tamaño) y podrá pintar los dos bordes, si es que no hay algo en el resto del código que has quitado que lo impida.

[buzu]

tienes contenido en tu div? si es así asegurate que el contenido de tu div no este flotado o algo parecido.

[p3rikl3s]

Iniciado por kseso?

Siempre que esa caja tenga algún contenido dentro tendrá una superficie (tamaño) y podrá pintar los dos bordes, si es que no hay algo en el resto del código que has quitado que lo impida.

Exacto, y así funciona pero solo en firefox y opera. En internet explorer pinta los bordes (izquierdo y dercho) pero ambos en el lado derecho,es decir, uno junto al otro, es como no si no reconociera el border-LEFT. Entonces pregunto si acaso hay otra manera de declarar los bordes en IE.

Gracias y Saludos.

[kseso?]

Pericles, ¿no será que al no tener un margen el borde izquierdo queda fuera (tapado) por el marco de ie?
Recuerda el "modelo de caja" (el estandar) y que ie no lo respeta.
Prueba a dar un margen a ese contenedor para separarlo de sus adyacentes y ponerle un tamaño:

Código css:

.bordes-div{
border-left:1px solid #000;
border-right:1px solid #000;
width:400px;
height:400px;margin:0 auto;}
 

Con este código ie7 también pone los dos bordes, pero si suprimes el margen, el izquierdo aparentemente desaparece.

Pon todo en código de .bordes-div

[buzu]

puedes intentar con:

Código CSS:

.bordes-div{
border-width: 0 1px;
border-style: solid;
border-color: #e6e6e6;
}
 

Por cierto, ten cuidado con el uso de guines (-) en las clases, si es posible usa mejor guiones bajos (_) o cammelCase.

EDITO: UPS! choqué con Kseso?

[p3rikl3s]

Listo problema resuelto ! Gracias a todos por sus comentarios, tomé un poco de cada comentario, sin embargo con el último aporte de buzu fue el que me dió el mejor resultado. A ciencia cierta no sé porque ocurre esto en IE 7, pero el hecho es que así funciona bien.



Gracias y karmas para todos !