Foros del Web - Ver Mensaje Individual

edisonx · #1 (**permalink**) 31/08/2010, 17:11

Un saludo ante todo a toda la comunidad, tengo un gran problema y es que intento colocar un menu vertical dentro de una tabla usando por supuesto sus respectivas clases, el problema es que cada boton del menu esta en divs con su respectivo hover, y firefox lo reconoce perfectamente pero ie no reconoce las imagenes solo me deja el espacio en blanco, para que puedan entender os dejo primero el html y despues el css.

Código HTML:

<!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ítulo</title>
<link href="estilos.css" rel="stylesheet" type="text/css" />
</head>

<body class="bg">
<table width="100%" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <th scope="col" height="102" bgcolor="#cc0000">&nbsp;</th>
    <th scope="col" width="956" height="102">
    	<table width="100%" border="0" cellspacing="0" cellpadding="0">
    	  <tr>
    	    <th colspan="6" scope="col" width="956" height="30"><img src="imágenes/guia.png" width="956" height="30" alt="guia" /></th>
   	      </tr>
    	  <tr>
    	    <th rowspan="2" scope="row" width="24" height="70">&nbsp;</th>
    	    <td rowspan="2" width="308" height="70"><img src="imágenes/logo.png" width="308" height="70" alt="logo" /></td>
    	    <td width="234" height="35">&nbsp;</td>
    	    <td width="234" height="35">&nbsp;</td>
    	    <td width="132" height="35"><img src="imágenes/mail.png" width="132" height="26" alt="mail" /></td>
    	    <td rowspan="2" width="24" height="70">&nbsp;</td>
  	    </tr>
    	  <tr>
    	    <td width="234" height="35">&nbsp;</td>
    	    <td width="234" height="35">&nbsp;</td>
    	    <td width="132" height="35">&nbsp;</td>
   	      </tr>
    	  <tr>
    	    <th colspan="6" scope="row" width="956" height="2"><img src="imágenes/lineareperida.png" width="956" height="2" alt="repeat" /></th>
   	      </tr>
  	  </table>
    	<table width="100%" border="0" cellspacing="0" cellpadding="0">
    	  <tr>
    	    
   	      </tr>
    	
  	  </table>
    	<table width="100%" border="0" cellspacing="0" cellpadding="0">
     
    </table></th>
    <th scope="col" height="102" bgcolor="#cc0000">&nbsp;</th>
  </tr>
  <tr>
    <th bgcolor="#ffffff" scope="row" height="264">&nbsp;</th>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th rowspan="21" scope="col" width="24" height="264">&nbsp;</th>
        <th scope="col" height="19" width="185">&nbsp;</th>
        <th rowspan="21" scope="col" width="21" height="264">&nbsp;</th>
        <th rowspan="21" scope="col" width="703" height="264"><img src="imágenes/flash.png" width="703" height="264" alt="flash"/></th>
        <th rowspan="21" scope="col" width="24" height="264">&nbsp;</th>
      </tr>
      <tr>
        <td>
        	<div id="bot1"><a></a></div>
            <div id="bot2"><a></a></div>
            <div id="bot3"><a></a></div>
            <div id="bot4"><a></a></div>
            <div id="bot5"><a></a></div>
            <div id="bot6"><a></a></div>
            <div id="bot7"><a></a></div>
            <div id="bot8"><a></a></div>
            <div id="bot9"><a></a></div>
            <div id="bot10"><a></a></div>
        </td>

        </tr>
    </table></td>
    <td bgcolor="#ffffff" height="264">&nbsp;</td>
  </tr>
  <tr>
    <th bgcolor="#cccccc" scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td bgcolor="#cccccc">&nbsp;</td>
  </tr>
  <tr>
    <th bgcolor="#cc0000" scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td bgcolor="#cc0000">&nbsp;</td>
  </tr>
</table>
</body>
</html>

CSS

Código:

@charset "utf-8";
/* CSS Document */


.bg {
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}

.menu a {
display:block;
border:none;
background-repeat:no-repeat;
}

.c1 {
	background-image:url(im%C3%A1genes/b1a.png)
}

#bot1 {
    border: 0 0 0 0;
    padding: 0;
    }

#bot1 a{
    background-image:url(im%C3%A1genes/b1a.png);
    background-position: center top;
    height:22px;
    width:185px;
    display: block;
    text-decoration: none;
    padding-top: 0px;
    background-repeat: no-repeat;
    }

#bot1 a:hover{
	background-image: url(im%C3%A1genes/b1b.png);
	color: #FFF;
    }


#bot2 {
    border: 0 0 0 0;
    padding: 0;
    }

#bot2 a{
    background-image:url(im%C3%A1genes/b2a.png);
    background-position: center top;
    height:22px;
    width:185px;
    display: block;
    text-decoration: none;
    padding-top: 0px;
    background-repeat: no-repeat;
    }

#bot2 a:hover{
    background-image: url(im%C3%A1genes/b2b.png);
    }


#bot3 {
    border: 0 0 0 0;
    padding: 0;
    }

#bot3 a{
    background-image:url(im%C3%A1genes/b3a.png);
    background-position: center top;
    height:22px;
    width:185px;
    display: block;
    text-decoration: none;
    padding-top: 0px;
    background-repeat: no-repeat;
    }

#bot3 a:hover{
    background-image: url(im%C3%A1genes/b3b.png);
    }

#bot4 {
    border: 0 0 0 0;
    padding: 0;
    }

#bot4 a{
    background-image:url(im%C3%A1genes/b4a.png);
    background-position: center top;
    height:22px;
    width:185px;
    display: block;
    text-decoration: none;
    padding-top: 0px;
    background-repeat: no-repeat;
    }

#bot4 a:hover{
    background-image: url(im%C3%A1genes/b4b.png);
    }

#bot5 {
    border: 0 0 0 0;
    padding: 0;
    }

#bot5 a{
    background-image:url(im%C3%A1genes/b5a.png);
    background-position: center top;
    height:22px;
    width:185px;
    display: block;
    text-decoration: none;
    padding-top: 0px;
    background-repeat: no-repeat;
    }

#bot5 a:hover{
    background-image: url(im%C3%A1genes/b5b.png);
    }

#bot6 {
    border: 0 0 0 0;
    padding: 0;
    }

#bot6 a{
    background-image:url(im%C3%A1genes/b6a.png);
    background-position: center top;
    height:35px;
    width:185px;
    display: block;
    text-decoration: none;
    padding-top: 0px;
    background-repeat: no-repeat;
    }

#bot6 a:hover{
    background-image: url(im%C3%A1genes/b6b.png);
    }

#bot7 {
    border: 0 0 0 0;
    padding: 0;
    }

#bot7 a{
    background-image:url(im%C3%A1genes/b7a.png);
    background-position: center top;
    height:22px;
    width:185px;
    display: block;
    text-decoration: none;
    padding-top: 0px;
    background-repeat: no-repeat;
    }

#bot7 a:hover{
    background-image: url(im%C3%A1genes/b7b.png);
    }

#bot8 {
    border: 0 0 0 0;
    padding: 0;
    }

#bot8 a{
    background-image:url(im%C3%A1genes/b8a.png);
    background-position: center top;
    height:22px;
    width:185px;
    display: block;
    text-decoration: none;
    padding-top: 0px;
    background-repeat: no-repeat;
    }

#bot8 a:hover{
    background-image: url(im%C3%A1genes/b8b.png);
    }

#bot9 {
    border: 0 0 0 0;
    padding: 0;
    }

#bot9 a{
    background-image:url(im%C3%A1genes/b9a.png);
    background-position: center top;
    height:35px;
    width:185px;
    display: block;
    text-decoration: none;
    padding-top: 0px;
    background-repeat: no-repeat;
    }

#bot9 a:hover{
    background-image: url(im%C3%A1genes/b9b.png);
    }

#bot10 {
    border: 0 0 0 0;
    padding: 0;
    }

#bot10 a{
    background-image:url(im%C3%A1genes/b10a.png);
    background-position: center top;
    height:22px;
    width:185px;
    display: block;
    text-decoration: none;
    padding-top: 0px;
    background-repeat: no-repeat;
    }

#bot10 a:hover{
    background-image: url(im%C3%A1genes/b10b.png);
    }

.bgrep {
	background-image: url(im%C3%A1genes/repmed.png);
	background-repeat:repeat-x;
}

Mi correo es [email protected] si alguien es tan amable de ayudarme se lo agradeceria y puedo enviarte los archivos para que los veas mejor (no pesan mas de 900k) muchas gracias de antemano.... disculpen mi ignorancia y falta de conocimientos.