bordes internos no se ven con i6

chugui · #1 (**permalink**) 02/10/2010, 18:17

hola amigo tengo un problemilla todo paso cuando agregue a mi codigo el reset.css para corregir unos problemas de margenes entre los navegadores el cual baje de esta dirección [URL="http://www.objetivocreativo.com/reset.zip"]http://www.objetivocreativo.com/reset.zip[/URL] y ahora los borde de mi tabla quedaron de la siguiente manera en Explorer:

Quiero saber como arreglar ese problema con el IE7 y que se vea como en el chrome! aqui les anexo el codigo HTML y CSS para quien me pueda ayudar por favor

Codigo HTML:

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=UTF-8">
		<title>Documento sin t&iacute;tulo</title>
		<link href="css/reset/reset.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="css/table.css" />
</head>

<body>
		        <table>
                  <thead>
                    <tr>
                      <th scope="col">Top</th>
                      <th scope="col">Usuario</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row">1</th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr class="odd">
                      <th scope="row">2</th>
                      <td><a href="#"> cargaulairtiona</a></td>
                    </tr>
                    <tr>
                      <th scope="row">3</th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr class="odd">
                      <th scope="row">4</th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr>
                      <th scope="row">5</th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr class="odd">
                      <th scope="row">6</th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr>
                      <th scope="row">7</th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr class="odd">
                      <th scope="row">8</th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr>
                      <th scope="row">9</th>
                      <td>&nbsp;</td>
                    </tr>
                    <tr class="odd">
                      <th scope="row">10</th>
                      <td>&nbsp;</td>
                    </tr>
                  </tbody>
                  <tfoot>
                    <tr>
                      <th scope="row"></th>
                      <td><a href="#">ver Top 500 &raquo;</a></td>
                    </tr>
                  </tfoot>
                </table>
		        
</body>
</html>

Codigo CSS:

Código:

table{
  border-collapse: collapse;
  border: 1px solid #CCCCFF;
  width:200px;
  font: 70%	 "Verdana" Helvetica, sans-serif;
  color: #ECF6F0;
  background: #3399FF;
  }

caption {
  	color:#000000;
	font-size:1.1em;
  	background: transparent;
	padding:5px 10px 7px 5px;
	text-align:right;
	font-weight:700;
	text-transform:uppercase;
  }
  
  
tbody tr{
  position:relative;
  background: #3399FF;
}
  
td, th {
  border: 1px dashed #99CCFF;
  padding: .4em;
  color: #F0ECF6;
  }

th { 
	font-weight:700;

}
  
thead th, tfoot th {
  font: bold 0.9em verdana, arial, helvetica, sans-serif;
  border: 1px solid #99CCFF;
  text-align: left;
  background: #6666FF;
  color: #F0ECF6;
  padding-top:6px;
  }
  
tbody td a {
  background: transparent;
  text-decoration: none;
  color: #F0ECF6;
  }
  
tbody td a:hover {
  background: transparent;
  text-decoration: underline;
  color: #FFFFFF;
  }
  
tbody th, tbody td {
  vertical-align: top;
  text-align: left;
  }
  
tfoot td {
  border: 1px solid #CCCCFF;
  background: #6666FF;
  padding-top:6px;
  font: bold 0.9em verdana, arial, helvetica, sans-serif;
  text-align:right;
  }
  
tfoot th a, tfoot td a {
  font: normal 1em verdana, arial, helvetica, sans-serif;
  background: transparent;
  text-decoration: none;
  font-weight:normal;
  color: #F0ECF6;
  }
  
tfoot th a:hover, tfoot td a:hover {
  background: transparent;
  text-decoration: underline;
  color: #FFFFFF;
  }

tbody tr.odd{
  background: #6699FF;
  }
  
tbody tr:hover, tbody tr.odd:hover{
  background: #0066FF;
  }

Les agradezco cualquier opinion por favor!!! graciasss

emprear · #2 (**permalink**) 03/10/2010, 10:05

chugui:
Confunde un poco el titulo de tu post "no se ven bien en IE6"
supongo que habrás querido decir IE7, como en el desarrollo del post.

Acá te dejo los detalles de mis pruebas

http://foros.emprear.com/html/cc/tdif.html

Saludos

chugui · #3 (**permalink**) 03/10/2010, 19:19

ya probe... gracias por la ayuda! me sirvio de mucho, ahora lo que no veo es como arreglar el ancho de la tabla en FIREFOX

si me puedes dar una idea te lo agradeceria....

tienes razon con lo del titulo esta mal escrito... luego que lo publique fue que me di cuenta y no supe como editarlo

emprear · #4 (**permalink**) 03/10/2010, 21:20

chugui:
comparar tu tabla contra todos los navegadores, es algo complicado. tampoco se si justifica usar tbody, tfoot, thead,caption, que son etiquetas poco convencionales. así y todo estuve haciendo algunas modificaciones. Primero creo que en realidad el problema del Firefox es más un "efecto visual", tu tabla no es más ancha, es más alta...
bueno explicarlo me va a llevar mucho más de lo que tardé en hacerlo

http://foros.emprear.com/html/cc/tdif.html

en el código, algunos comentarios
Y tené cuidado con eso resets, acordate que yo solo habilite el default-min.css

Saludos

chugui · #5 (**permalink**) 03/10/2010, 22:36

mil gracias Emprear! de verdad que tu código quedo mucho mejor.... ya lo voy a echar un ojo bien para aplicarlo a la web que estoy haciendo..

saludos