problemas con Mozilla

JONNA · 21 Jul 2008, 11:00 · Solicitar retirada

Muy buenas!!!

Vereis, mi problema es sencillo, una de mis páginas no se ve como debiera en Mozilla aunque se ve sin problemas en internet explorer.

Lo que no se ve bien es lo siguiente:

Algunos enlaces, simplemente no estan, el texto está en pantalla, pero paso el cursor por encima y no cambia de color ni se puede picar sobre él.

Os dejo el código HTML:

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

<html>
<head>
<title>OC arquitectura y urbanismo</title>
<link rel="stylesheet" href="css_estudioOC.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="JavaScript" src="no-tocar.txt" type="text/javascript"></script>
<script language="JavaScript" src="numero-de-menus.txt" type="text/javascript"></script>

</head>
<body onload="init();">

<div id="global">
<div id="quienes somos" style= "position:absolute; left:352; top:102; width:200; height:40; background-color:none">
<a href="index.html">
<font size=2 face=isocteur>quienes somos<font></a>
</div>
<div id="donde estamos" style= "position:absolute; left:500; top:102; width:200; height:40; background-color:none">
<a href="situacionestudio.html">
<font size=2 face=isocteur>donde estamos<font></a>
</div>

<div id="inicio" style= "position:absolute; left:268; top:102; width:200; height:40; background-color:none">
<a href="index.html">
<font size=2 face=isocteur>inicio<font></a>
</div>
<div id="contacto" style= "position:absolute; left:645; top:102; width:100; height:40; background-color:none">
<a href="http://www.sctarquitectos.com">
<font size=2 face=isocteur>contacto<font></a>
</div>

<div id="desplegable3" style= "position:absolute; left:654; top:348; width:200; height:22; background-color:none">
<a href="#">
<font size=2 face=isocteur>urbanismo<font></a>
</div>

<div id="desplegable1" style= "position:absolute; left:268; top:348; width:200; height:22; background-color:none">
<a href="#">
<font size=2 face=isocteur>proyectos edificación<font></a>
</div>

<div id="desplegable2" style= "position:absolute; left:760; top:348; width:200; height:22; background-color:none">
<a href="#">
<font size=2 face=isocteur>concursos<font></a>
</div>

<div id="otros trabajos" style= "position:absolute; left:860; top:348; width:140; height:40; background-color:none">
<a href="http://www.sctarquitectos.com">
<font size=2 face=isocteur>otros trabajos<font></a>
</div>

<div id="separacion1" style= "position:absolute; left:333; top:102; width:200; height:40; background-color:none">
<font size=1 color=white face=isocteur>|<font>
</div>

<div id="separacion2" style= "position:absolute; left:482; top:102; width:200; height:40; background-color:none">
<font size=1 color=white face=isocteur>|<font>
</div>

<div id="separacion3" style= "position:absolute; left:628; top:102; width:200; height:40; background-color:none">
<font size=1 color=white face=isocteur>|<font>
</div>

<div id="separacion4" style= "position:absolute; left:744; top:348; width:200; height:40; background-color:none">
<font size=1 color=white face=isocteur>|<font>
</div>

<div id="separacion5" style= "position:absolute; left:849; top:348; width:20; height:40; background-color:none">
<font size=1 color=white face=isocteur>|<font>
</div>

<script language="JavaScript" src="definir-menus.txt" type="text/javascript"></script>

</div>

</body>
</html>

Os he dejado una capa en negrita que es uno de los enlaces que se ve.
La capa subrayada es uno de los enlaces que no se ven (hay varios)

Como se ve no hay diferencias entre ambos por lo que no se cual es la razón de que no funcione.

Os dejo tambien la hoja de estilos:

#global {width:980px;height:560px; margin:auto auto auto auto; padding:auto auto auto auto; background-image: url(objetos/paginaOC2.png); background-repeat: no-repeat; background-position: center center}
body {background-color: black}
a {color: white; text-decoration:none}
a:hover {color:#8b8989; text-decoration:none

Tambien tengo un problema con el menú desplegable de esta misma página, que aunque en internet explorer sale bien en Mozilla el desplegable sale dentro de un cuadrado gris transparente.
Os dejo la hoja de estilos del menu desplegable.

/* this is the clipping region for the menu. it's width and height get set by script, depending on the size of the items table */
.transMenu {
position:absolute;
overflow:hidden;
left:-1000px;
top:-1000px;
text-align: left;
}

/* this is the main container for the menu itself. it's width and height get set by script, depending on the size of the items table */
.transMenu .content {
position:absolute;
}

/* this table comprises all menu items. each TR is one item. It is relatively positioned so that the shadow and background transparent divs can be positioned underneath it */
.transMenu .items {
position:relative;
left:0px; top:0px;
border:NONE;
z-index:2;
}

.transMenu.top .items {
border-top:none;
}

/* (tipo, color y tamaño letras menu, font weight none para que no este en negrita)each TR.item is one menu item */
.transMenu .item {
color:WHITE;
background-image: none;
font-family: ISOCTEUR;
font-size: 11;
font-weight: NONE;
text-decoration:none;
/* this is a hack for mac/ie5, whom incorrectly cascades the border properties of the parent table to each row */
border:none;
cursor:pointer;
cursor:hand;
}

/* this DIV is the semi-transparent white background of each menu. the -moz-opacity is a proprietary way to get transparency in mozilla, the filter is for IE/windows 5.0+. */
/* we set the background color in script because ie mac does not use it; that browser only uses a semi-transparent white PNG that the spacer gif inside this DIV is replaced by */
.transMenu .background {
position:absolute;
left:0px;
top:0px;
z-index:1;
-moz-opacity:.8;
filter:alpha(opacity=0);
}

/* same concept as .background, but this is the sliver of shadow on the right of the menu. It's left, height, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowRight {
position:absolute;
z-index:3;
top:3px; width:2px;
-moz-opacity:.4;
filter:alpha(opacity=0);
}

/* same concept as .background, but this is the sliver of shadow on the bottom of the menu. It's top, width, and background are set by script. In IE5/mac, it uses a PNG */
.transMenu .shadowBottom {
position:absolute;
z-index:1;
left:3px; height:2px;
-moz-opacity:.4;
filter:alpha(opacity=0);
}

/* (color de fondo de las letras al pasar el cursor) this is the class that is used when the mouse is over an item. script sets the row to this class when required. */
.transMenu .item.hover {
background-image: none;
color:#8b8989;
}

/* (para quitar los pngs de los puntos,mas abajo para dar color a las letras)this is either the dingbat that indicates there is a submenu, or a spacer gif in it's place. We give it extra margin to create some space between the text and the dingbat */
.transMenu .item img {
margin-left:-1010px;
}
.textoNoIdent {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: WHITE;
text-decoration: none;
}
.formError {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: WHITE;
border-top: 1px solid #C4CCCC;
border-right: 1px solid #ACB5B5;
border-bottom: 1px solid #6F7777;
border-left: 1px solid #ACB5B5;
padding: 2px 0 2px 0.25em;
background-color: #F5E984;
}
.txtError {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #990000;
background-color: #E9E9E9;
padding: 5px;
text-align: justify;
}

Perdonad que haga dos preguntas en el mismo mensaje (se que no debería) pero es que ambas preguntas son sobre la misma página y además sobre el Mozilla.

Jugoncan · 21 Jul 2008, 12:06 · Solicitar retirada

Prueba a poner esto:
<a href="index.html">
<font size=2 face=isocteur>inicio<font></a>

Así:
<font size=2 face=isocteur><a href="index.html">
inicio</a></font>

Saludos :wink:

JONNA · 21 Jul 2008, 13:30 · Solicitar retirada

He probado lo que me has dicho y me pasa lo mismo?????????

La verdad es que es muy raro, porque si ves el codigo html que he colgado he marcado en negrita una linea de codigo con el enlace que me sale bien y subrayada la linea que no funciona, y SON IGUALES!!!???? :shock:

gracias de todos modos avisame si se te ocurre algo!!!

Jugoncan · 21 Jul 2008, 13:50 · Solicitar retirada

Puedes ponernos la url pa verla?

JONNA · 21 Jul 2008, 17:42 · Solicitar retirada

Verás todavía no tengo subida la web. Voy probando abriendo las páginas con los distintos exploradores ya que la previsualización del htmlkit es defectuosa.

De todos modos acabo de encontrar la solución.
Si te fijas en mi código fuente, cada enlace forma una div detro de una div global. El problema era el tamaño de estas capas.

Si se pisan varias deja de funcionar el enlace en Mozilla.
Resulta curioso ya que en internet explorer no pasa nada, los enlaces siguen funcionando.

Así que hice más ajustados a los textos los tamaños width y hight de las capas para que no se pisaran unas con otras y ha funcionado!!!!ya funcionan los enlaces!!!

Se me ocurrió mientras probaba lo que me dijiste.

Muchisimas gracias!!!!!!!!

Jugoncan · 21 Jul 2008, 21:16 · Solicitar retirada

ok :wink: