Problema con CSS en firefox

maik656 · #1 (**permalink**) 09/01/2008, 12:30

Hola, el caso es que los estilos CSS que tengo puestos de mi pàgina web no se visualizan correctamente en firefox pero si en internet explorer, agradeceria que me dijerais que está mal hecho(es la primera vez que hago una página web XD) os adjunto el codigo y el css:

codigo de plantilla:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<!-- TemplateBeginEditable name="doctitle" -->

<title>Plantilla pagina web castellano</title>

<!-- TemplateEndEditable -->

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="../Templates/estilos%20css%20para%20plantilla%20pagina%20web.css" rel="stylesheet" type="text/css">

<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->

<link href="../esp/hoja%20de%20estilos%20español.css" rel="stylesheet" type="text/css">

</head>

 
<body>

<div id=global>

<TABLE width="100%" height="91" border=0 align="center" cellPadding=0 cellSpacing=0>

  <TBODY>

    <TR>

      <TD colspan="3" bgColor=#FFFFFF><div align="center"><img src="../Imatges/logo%20astroweb.jpg" width="100%" height="121" border="0"></div></TD>

    </TR>

  </TBODY>

</TABLE>

<hr>

<br>

<div><table class="tablamenu" width="133" border="0" align="left" cellpadding="5" cellspacing="5" hspace="20">

  <tr class>

      <td class="menu"><a class="vinculomenu" href="../esp/main.htm">Inicio</a></td>

  </tr>

  <tr>

    <td class="menuidquierza"><a class="vinculomenu" href="../esp/universo.htm">El Universo</a> </td>

  </tr>

  <tr>

    <td class="menuidquierza"><a class="vinculomenu" href="../esp/sistemasolar.htm">Sistema solar</a> </td>

  </tr>

  <tr>

    <td class="menuidquierza"><a class="vinculomenu" href="../esp/tierrayluna.htm">Tierra y Luna</a> </td>

  </tr>

  <tr>

    <td class="menuidquierza">Noticias</td>

  </tr>

  <tr>

    <td class="menuidquierza">Fotos</td>

  </tr>

  <tr>

    <td class="menuidquierza">Personajes</td>

  </tr>

  <tr>

    <td class="menuidquierza"><a class="vinculomenu" href="../index.htm">Selec. Idioma</a> </td>

  </tr>

</table>

</div>

<table class="texto" width="556"  border="0">

  <tr>

    <td><!-- TemplateBeginEditable name="EditRegion3" -->      EditRegion3<!-- TemplateEndEditable --></td>

  </tr>

</table>

<div align="left"><br class="menú">

  </div>

</div>

</body>

</html>

Aquí el codigo CSS:

Código PHP:

  #global {border: 1px solid black;}

.menu {background-image:url('boton real d verdad redondeado.png');font-size:16px; font-family:verdana; text-align:center;}

.menuidquierza {background-image:url('boton real d verdad cuadrado.png');font-size:16px; font-family:verdana; text-align:center; }

.tablamenu {margin-left:20px;}

.vinculo {text-decoration:none;}

.tratar {display:block;}

.vinculomenu {text-decoration:none; display:block; font-size:16px; font-family:verdana; text-align:center;}

aquí otro archivo CSS:

Código PHP:

   #letrafoto {margin: 0px 0px 0px 10px;}

#foto {margin: 0px 0px 0px 10px; margin-right:20px; margin-left:20px;}

.texto {margin-left:75px; margin-right:20px;}

.vinculo{text-decoration:none;}

.estilomark {color:#00FF99; font-style:oblique; font-size:20px; margin-left:75px;}

a:hover {text-decoration:underline;}

Finalmente de ejemplo el codigo de una página con la plantilla aplicada:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html><!-- InstanceBegin template="/Templates/plantilla pagina web español.dwt" codeOutsideHTMLIsLocked="false" -->

<head>

<!-- InstanceBeginEditable name="doctitle" -->

<title>Plantilla pagina web castellano</title>

<!-- InstanceEndEditable -->

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="../Templates/estilos%20css%20para%20plantilla%20pagina%20web.css" rel="stylesheet" type="text/css">

<!-- InstanceBeginEditable name="head" -->

<link href="../Templates/estilos%20css%20para%20plantilla%20pagina%20web.css" rel="stylesheet" type="text/css">

<link href="hoja%20de%20estilos%20español.css" rel="stylesheet" type="text/css">

<!-- InstanceEndEditable -->

<link href="hoja%20de%20estilos%20español.css" rel="stylesheet" type="text/css">

</head>

 
<body>

<div id=global>

<TABLE width="100%" height="91" border=0 align="center" cellPadding=0 cellSpacing=0>

  <TBODY>

    <TR>

      <TD colspan="3" bgColor=#FFFFFF><div align="center"><img src="../Imatges/logo%20astroweb.jpg" width="100%" height="121" border="0"></div></TD>

    </TR>

  </TBODY>

</TABLE>

<hr>

<br>

<div><table class="tablamenu" width="133" border="0" align="left" cellpadding="5" cellspacing="5" hspace="20">

  <tr class>

      <td class="menu"><a class="vinculomenu" href="main.htm">Inicio</a></td>

  </tr>

  <tr>

    <td class="menuidquierza"><a class="vinculomenu" href="universo.htm">El Universo</a> </td>

  </tr>

  <tr>

    <td class="menuidquierza"><a class="vinculomenu" href="sistemasolar.htm">Sistema solar</a> </td>

  </tr>

  <tr>

    <td class="menuidquierza"><a class="vinculomenu" href="tierrayluna.htm">Tierra y Luna</a> </td>

  </tr>

  <tr>

    <td class="menuidquierza">Noticias</td>

  </tr>

  <tr>

    <td class="menuidquierza">Fotos</td>

  </tr>

  <tr>

    <td class="menuidquierza">Personajes</td>

  </tr>

  <tr>

    <td class="menuidquierza"><a class="vinculomenu" href="../index.htm">Selec. Idioma</a> </td>

  </tr>

</table>

</div>

<table class="texto" width="556"  border="0">

  <tr>

    <td><!-- InstanceBeginEditable name="EditRegion3" -->

      <h1 class="texto">Las capas de la Tierra </h1>

      <p align="left"><img class="texto" src="../Imatges/capatierra.jpg" width="204" height="204" border="0" align="left"> Si hacemos un corte que atraviese la Tierra por el centro encontraremos que, bajo la corteza, hay diversas capas cuya estructura y composici&oacute;n var&iacute;a mucho. La Tierra es uno de los planetas s&oacute;lidos o, al menos, de corteza s&oacute;lida, ya que no todas las capas lo son. <br>

          <br>

          Por debajo de la corteza, una serie de capas en estado pastoso, muy calientes, y con una densidad creciente hasta llegar al <div class="texto">n&uacute;cleo de la Tierra, de nuevo, s&oacute;lido, met&aacute;lico, denso, ...</div> <br>

        </p>

      <p>&nbsp;</p>

      <h2 class="texto"> La corteza terrestre </h2>

      <p class="texto">La corteza terrestre tiene un grosor variable que alcanza un m&aacute;ximo de 75 km bajo la cordillera del Himalaya y se reduce a menos de 7 km en la mayor parte de las zonas profundas de los oc&eacute;anos. La corteza continental es distinta de la oce&aacute;nica. <br>

          <br>

          La capa superficial est&aacute; formada por un conjunto de rocas sedimentarias, con un grosor m&aacute;ximo de 20-25 km, que se forma en el fondo del mar en distintas etapas de la historia geol&oacute;gica. La edad m&aacute;s antigua de estas rocas es de hasta 3 800 millones de a&ntilde;os. Por debajo existen rocas del tipo del granito, formadas por enfriamiento de magma. Se calcula que, bajo los sistemas monta&ntilde;osos, el grosor de esta capa es de m&aacute;s de 30 km. La tercera capa rocosaest&aacute; formada por basaltos y teniene un grosor 15-20 km, con incrementos de hasta 40 km. <br>

          <br>

          A diferencia de la corteza continental, la oce&aacute;nica es geol&oacute;gicamente joven en su totalidad, con una edad m&aacute;xima de 180 millones de a&ntilde;os. Aqu&iacute; tambi&eacute;n encontramos tres capas de rocas: la dedimentaria, de anchura variable, formada por las acumulaciones constantes de fragmentos de roca y organismos en los oc&eacute;anos; la del basalto de 1.5 a 2 km de grosor, mezclada con sedimentos y con rocas de la capa inferior y una tercera capa constituida por rocas del tipo del gabro, semejante al basalto en composici&oacute;n, pero de origen profundo, que tiene unos 5 kil&oacute;metros de grosor. Parece que la corteza oce&aacute;nica se debe al enfriamiento de magma proveniente del manto superior. <br>

        </p>

      <div><table class="texto" width="448"  border="1" align="center" cellspacing="2" bordercolor="#999999">

  <tr>

    <th bordercolor="#999999" bgcolor="#7171FF" scope="col"><strong>Capa Interna </strong></th>

    <th bgcolor="#F3CC70" scope="col"><strong>Longitud aproximada </strong></th>

    <th bgcolor="#75F766" scope="col"><strong>Estado F&iacute;sico </strong></th>

  </tr>

  <tr>

    <td bordercolor="#999999" bgcolor="#AEA8FD"><div align="center">Corteza</div></td>

    <td bgcolor="#F8DFA5"><div align="center">7-70 Km</div></td>

    <td bgcolor="#A9FAA0"><div align="center">S&oacute;lido</div></td>

  </tr>

  <tr>

    <td bordercolor="#999999" bgcolor="#AEA8FD"><div align="center">Manto Superior </div></td>

    <td bgcolor="#F8DFA5"><div align="center"> &nbsp; 650-670 Km&nbsp; </div></td>

    <td bgcolor="#A9FAA0"><div align="center">Pl&aacute;stico</div></td>

  </tr>

  <tr>

    <td bordercolor="#999999" bgcolor="#AEA8FD"><div align="center">Manto Inferior </div></td>

    <td bgcolor="#F8DFA5"><div align="center">2230 Km </div></td>

    <td bgcolor="#A9FAA0"><div align="center">S&oacute;lido</div></td>

  </tr>

  <tr>

    <td bordercolor="#999999" bgcolor="#AEA8FD"><div align="center">N&uacute;cleo Externo </div></td>

    <td bgcolor="#F8DFA5"><div align="center">2220 Km</div></td>

    <td bgcolor="#A9FAA0"><div align="center">L&iacute;quido</div></td>

  </tr>

  <tr>

    <td bordercolor="#999999" bgcolor="#AEA8FD"><div align="center">N&uacute;cleo Interno</div></td>

    <td bgcolor="#F8DFA5"><div align="center">1250 Km </div></td>

    <td bgcolor="#A9FAA0"><div align="center">S&oacute;lido</div></td>

  </tr>

</table></div>

<p align="center"><br>

</p>

    <!-- InstanceEndEditable --></td>

  </tr>

</table>

<div align="left"><br class="menú">

  </div>

</div>

</body>

<!-- InstanceEnd --></html>

hades87 · #2 (**permalink**) 09/01/2008, 13:27

para empezar elimina todas las mayúsculas de los atributos, en vez de bgColor pon bgcolor, y todo en minúsculas.

Luego te recomiendo que no uses tablas para maquetar, ya que el código queda muy sucio y poco profesional, utiliza los divs y css para maqueta tus paginas y que queden bien.