Error en borde derecho en IE

Chico3001 · #1 (**permalink**) 27/12/2011, 00:42

Hola.... tengo la siguiente pagina:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="templates/admin.css" />
	<script type="text/javascript" src="include/funciones.js"></script>
</head>
<body onload="ini()">

<div id="header">
	<img src="templates/images/logo.png" width="80" height="80" alt="" title="" />
	<ul id="menu">
		<li><a href="index2.php"><b>Inicio</b></a></li>
		<li><a href="empresa.php"><b>Directorio</b></a></li>
		<li><a href="stats.php"><b>Estadisticas</b></a></li>
		<li><a href="index2.php?action=salir"><b>Salir</b></a></li>

	</ul>
</div>
<div id="contenido">
	<div id="col2">
		<div id="menulat">
			<ul>
				<li><h1>Opciones</h1></li>
				<li>
					<ul>

						<li><a href="stats.php?action=borrar_visitas">Borrar Visitas</a></li>
						<li><a href="index2.php?action=salir">Salir</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
	<div id="col1">

		<div class="directorio">
						<table>
				<thead>
					<tr>
						<th>#</th>
						<th>IP</th>
						<th>Navegador</th>

						<th>Pagina</th>
						<th>Fecha</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<td class="cancel" colspan="7"><table><tr><td>
							<span>&nbsp;</span>

							<span class="iconoder"><a href="/stats.php?action=visitas&amp;num=4"><img src="templates/images/arrow-r0.png" /></a></span>
							<span class="iconoder"><a href="/stats.php?action=visitas&amp;num=2"><img src="templates/images/arrow-r1.png" /></a></span>
						</td></tr></table></td>
					</tr>
				</tfoot>
				<tbody>
					<tr class="odd">
						<td class="center">1</td>

						<td class="center"><span onmouseover="mostrar('127.0.0.1')" onmousemove="mover()" onmouseout="ocultar()">127.0.0.1</span></td>
						<td class="center">Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0) G</td>
						<td class="center">/index2.php</td>
						<td class="center">24/dic/2011 - 11:10 AM</td>
					</tr>
					<tr class="even">
						<td class="center">2</td>

						<td class="center"><span onmouseover="mostrar('127.0.0.1')" onmousemove="mover()" onmouseout="ocultar()">127.0.0.1</span></td>
						<td class="center">Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0) G</td>
						<td class="center">/index2.php</td>
						<td class="center">24/dic/2011 - 01:00 PM</td>
					</tr>
				</tbody>
			</table>

			<div class="cat_links">
				<ul>
					<li class="current"><a href="stats.php">Visitas</a></li>
					<li><a href="stats.php?action=blanca">Lista Blanca</a></li>
					<li><a href="stats.php?action=negra">Lista Negra</a></li>
				</ul>
			</div>

			<div id="ayuda"></div>
		</div>
	</div>
</div>
<div class="push"></div>
<div id="footer"></div>
</body>
</html>

Con el siguiente codigo CSS:

Código:

* {
	padding:0;
	margin:0;
	outline: 0;
	border: none;
	}
html, body {
	background: #FAFAFA;
	font-family:  arial, helvetica, sans-serif;
	font-size:    10pt;
	}
#header {
	height: 100px;
	background: #2C4257;
	}
#header img{
	float: right;
	padding: 10px 50px 0 0;
	}
#menu { padding: 65px 0 0 1em; margin: 0 0 0 0; list-style:none; height:40px; position:relative; background:transparent url('/templates/images/pro_five_0c.gif') repeat-x left bottom; font-size:12px; }
#menu li { float:left; height:40px; margin-right:1px; }
#menu li a { display:block; float:left; height:40px; line-height:35px; color:#333; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 4px; cursor:pointer; background:url(/templates/images/pro_five_0a.gif) no-repeat; }
#menu li a b {float:left; display:block; padding:0 16px 5px 12px; background:url(/templates/images/pro_five_0b.gif) no-repeat right top;}
#menu li.current a {color:#000; background:url(/templates/images/pro_five_2a.gif) no-repeat;}
#menu li.current a b {background:url(/templates/images/pro_five_2b.gif) no-repeat right top;}
#menu li a:hover {color:#000; background: url(/templates/images/pro_five_1a.gif) no-repeat;}
#menu li a:hover b {background:url(/templates/images/pro_five_1b.gif) no-repeat right top;}
#menu li.current a:hover {color:#000; background: url(/templates/images/pro_five_2a.gif) no-repeat; cursor:default;}
#menu li.current a:hover b {background:url(/templates/images/pro_five_2b.gif) no-repeat right top;}
.push {
	clear: both;
	}
#footer {
	text-align: center;
	}
#contenido {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	}
#col1 {
	width: 78%;
	margin: 0 20% 0 0;
	padding: 0;
	text-align: justify;
	}
#col2 {
	width: 20%;
	margin: 0 0 0 0;
	padding: 0;
	float: right;
	}
#col_left {
	clear: left;
	float: left;
	width: 49%;
	margin: 0;
	padding: 0;
	}
#col_right {
	float: right;
	width: 49%;
	margin: 0;
	padding: 0;
	}
#alerta {
	width: 100%;
	margin: 20px auto 0 auto;
	padding: 10px;
	color: #6666AA;
	background: #DDEEFF;
	border: 1px solid #6666AA;
	text-align: center;
	font-size: 110%;
	font-weight: bold;
	}
.mensaje {
	margin: 0 auto;
	padding: 20px 0 20px 0;
	width: 50%;
	text-align: center;
	}
.mensaje h1{
	margin: 0;
	padding: 5px;
	color: #6666AA;
	border-top: 1px solid #6666AA;
	border-left: 1px solid #6666AA;
	border-right: 1px solid #6666AA;
	background: #DDEEFF;
	font-size: 180%;
	}
.mensaje p{
	margin: 0;
	padding: 30px;
	color: #6666AA;
	background: #FFF;
	border: 1px solid #6666AA;
	font-size: 130%;
	}
#ayuda {
	visibility: hidden;
	position: absolute;
	background: #EEEEEE;
	font: normal 10px/10px verdana;
	color: black;
	border: solid 1px black;
	text-align: justify;
	padding: 10px 10px 10px 10px;
}
.directorio {
	margin: 0;
	padding: 10px;
	}
.directorio table {
	width: 100%;
	margin: 10px;
	color: #000;
	background: #FFFFFF;
	border: 1px solid #6666AA;
	border-collapse: collapse;
	}
.directorio table thead tr th {
	height: 23px;
	background: #DDEEFF url('/templates/images/bg_table_head.gif') repeat-x 0 -1px;
	color: #6666AA;
	text-align:center;
	}
.directorio table thead tr th a, .directorio table thead tr th a:visited, .directorio table tfoot tr th a, .directorio table tfoot tr th a:visited {
	color: #6666AA;
	text-decoration: none;
	}
.directorio table thead tr th a:hover, .directorio table tfoot tr th a:hover {
	text-decoration: underline;
	}
.directorio table tfoot tr th, .directorio table tfoot tr td{
	padding: 3px 10px;
	border-top: 1px solid #6666AA;
	background-color: #DDEEFF;
	text-align: center;
	}
.directorio table td.center, .directorio table th.center {
	text-align: center;
	}
.directorio table td.right, .directorio table th.right {
	text-align: right;
	}
.directorio table td.left, .directorio table th.left {
	text-align: left;
	}
.directorio table tbody td {
	padding: 2px 5px;
	}
.directorio table tbody tr.even:hover td, .directorio table tbody tr.odd:hover td {
	background: #EEEEEE;
	}
.directorio table tbody tr.even td {
	background: #E7F7FF;
	}
.directorio table td.cancel, .directorio table td.cancel table {
	margin: 0;
	padding: 0;
	border: 0;
	}
.directorio table table span.iconoizq {
	float: left;
	width: 16px;
	height: 16px;
	}
.directorio table table span.iconoder {
	float: right;
	width: 16px;
	height: 16px;
	}
.directorio table tbody input {
	width: 100%;
	background: #DDEEFF;
	border-bottom: 1px solid #6666AA;
	}
.directorio table .enviar input {
	width: 8em;
	background: #FFFFFF;
	border: 2px outset silver;
	}
.directorio table tbody label {
	color: #666;
	font-size: 85%;
	}
.directorio table tbody textarea {
	height: 8em;
	margin: 3px auto;
	background: #DDEEFF;
	border: 1px solid #6666AA;
	}
.directorio table tbody select {
	width: 98%;
	background: #DDEEFF;
	border: 1px solid #6666AA;
	}
.cat_links {
	margin: 0;
	}
.cat_links ul{
	list-style-type: none;
	padding: 0;
	margin: -10px 0 10px 10px;
	float: left;
	width: 100%;
	}
.cat_links ul li{
	display: inline;
	text-align: center;
}
.cat_links ul li a {
	float: left;
	margin: 0 5px 0 0;
	height: 20px;
	padding: 2px 10px;
	color: #6666AA;
	background-color: #EEEEEE;
	text-decoration: none;
	border-bottom: 1px solid #6666AA;
	border-left: 1px solid #6666AA;
	border-right: 1px solid #6666AA;
	}
.cat_links ul li.current a {
	float: left;
	margin: 0 5px 0 0;
	height: 20px;
	padding: 2px 10px;
	color: #6666AA;
	background-color: #DDEEFF;
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px solid #6666AA;
	border-left: 1px solid #6666AA;
	border-right: 1px solid #6666AA;
	}
#col2 #menulat {
	margin: 20px;
	padding: 0;
	background: #FFFFFF;
	border: 1px solid #6666AA;
	color: #363636;
	}
#menulat ul h1 {
	height: 20px;
	padding: 2px 0px 0px 10px;
	background: #DDEEFF url('/templates/images/bg_table_head.gif') repeat-x 0 -1px;
	border-bottom: 1px solid #6666AA;
	color: #6666AA;
	font-size: 100%;
	font-weight:bold;
	}
#menulat ul a {
	color: #363636;
	text-decoration: none;
	}
#menulat ul a:hover {
	color: #FFF;
	background: #99BCBF;
	text-decoration: underline;
	}
#menulat ul li {
	margin: 0px 0px 10px 0px;
	list-style-type: none;
	}
#menulat ul li {
	margin: 0px 0px 10px 0px;
	list-style-type: none;
	}
#menulat ul li li {
	margin: 3px 0px 3px 15px;
	padding: 0 0 0 20px;
	list-style-position: inside;
	background: #FFF url(/templates/images/bullet.png) no-repeat 0;
	}

Pero por alguna razon en IE9 no muestra el borde derecho de la tabla en la seccion THEAD y en TBODY si le dejo el TFOOT... en cambio si lo quito (el TFOOT) si aparece el borde...

Alguna idea de que puede estar pasando?

Gracias...

emprear · #2 (**permalink**) 27/12/2011, 07:32

El código que pasaste muestra todos los bordes, derecho incluido, tanto en IE9/Firefox/Opera, dónde no los muestra es en Chrome y Safari, intenté de varias maneras, pero de la única forma en que consegui que aparezca, es definiendo una nueva clase y aplicándola directamente a las celdas

Código CSS:

Ver original.xborder {
    border-right: solid 1px #6666AA;
    }

en celdas

Código HTML:

Ver original<th class="xborder">Fecha</th>
<td class="center xborder">24/dic/2011 - 11:10 AM</td>
<td class="center xborder">24/dic/2011 - 01:00 PM</td>

Saludos

Chico3001 · #3 (**permalink**) 27/12/2011, 11:29

Gracias.. ahora lo pruebo

Pregunta?? tendra algo que ver el colspan=100%? se me hace muy raro que si elimino todo el footer de la tabla si aparece el borde....

emprear · #4 (**permalink**) 27/12/2011, 12:33

sinceramente ni me fijé en eso, pero el valor de colspan es un numero (de columnas) no un porcentaje. lo que si te aseguro, que el code tal cual está posteado, en ie9/ff/opera se ve bien.
Saludos

Chico3001 · #5 (**permalink**) 27/12/2011, 14:18

mmm que curioso.... en mi computadora en IE9 no se ve el borde derecho... pero si se ve en mozilla... no lo he probado en otros navegadores...

El colspan lo puse asi por un bug de IE... originalmente lo tenia en "0" por que la tabla la genero de PHP y no se cuantas columnas se van a mostrar, pero IE no lo aceptaba asi que en la red me encontre que en vez de 0 tenia que ser 100% para que lo aceptara...