Problemas con firefox

Adolfiten · #1 (**permalink**) 30/01/2009, 06:36

Me dedico a hacer sitios web y ahora quiero ver si puedo cambiar de win a linux para el desarrollo, pero me surgió un problema, firefox en linux no interpreta de la misma manera que firefox en windows, ¿por qué?. Tengo un mismo formulario y está todo desfasado, el código es el mismo.

¿Alguien pasó por esto? ¿Ideas? ¿Cómo hacer para diseñar para el usuario final que debe ver bien sí o sí con cosas como ésta?

Calizman · #2 (**permalink**) 30/01/2009, 11:58

Saludos Adolfiten!!

Realmente... yo me cambie de windows a linux hace mucho... y no tuve ningun problema! de hecho... me funciona mejor!

Estas seguro que es tu mismo codigo? y si lo es... Esta bien tu codigo? porque posiblemente sea que no esta bien...

Es mi criterio... ya que uso FireFox en Linux y lo interpreta igual que FireFox en Windows...

No se si estas usaste DreamWeaver para la realizacion de esa web... posiblemente ese sea el problema! porque no intentas crear un nuevo formulario desde 0 con un editor de texto plano, como el Gedit o utilizas un editor WYSIWYG como KompoZer.

Adolfiten · #3 (**permalink**) 30/01/2009, 13:05

El código no creo que sea, porque en win me muestra un formulario con los labels e inputs bien alineados ¡y en el FF de linux no! Eso es lo raro, deberían interpretar de la misma forma. Hay algo que hace que cambie de una plataforma a otra, no sé.

El código si mal no recuerdo lo hice con notepad++, así que cosas añadidas no tiene.

Voy a probar Kompozer, acabo de instalarlo. ¡Aún no he podido instalar eclipse para php ni aptana! Siempre al instalarlo tengo algún problema.

Gracias Calizzz.

Calizman · #4 (**permalink**) 30/01/2009, 13:14

jmm... Kompozer tiene una opcion para editar codigo php.. no se que tan bueno sea, ya que no me gusta php (algunos dicen que es un gran error... pero que vamos a hacer...) pero te puedo decir que me han hablado muy pero muy bien de NetBeans, de hecho lo tengo! no lo uso en lo absoluto, pero lo tengo...

podrias poner tu formulario aca? para compararlo en mis exploradores?

Adolfiten · #5 (**permalink**) 30/01/2009, 13:25

He usado netbeans para desarrollo de java y me resultó bastante pesado, pero si vas a trabajar son swing es lo mejor.

Te paso los scripts.

adolfo.css

Código:

#formulario label, #datostipo label{

display:block;

font-weight:bold;

text-align:right;

width:160px;

float:left;

line-height: 40px; 

}

#formulario input, #formulario select{

float:left;

font-size:12px;

padding:4px 2px;

width:200px;

margin:4px 0 10px 10px;

}

#formulario button{

clear:both;

margin-left:170px;

width:200px;

float:left;

height:30px;

text-align:center;

line-height:31px;

font-size:11px;

font-weight:bold;

}

#formulario textarea{

float:left;

font-size:12px;

padding:4px 2px;

width:200px;

margin:2px 0 10px 10px;

}

ventanita.css

Código:

/*SECCION DE VENTANITA EMERGENTE*/

img {

	border: none;

}



//----------------------------------------------

#hideshow {

	position: absolute;

	width: 100%;

	height: 100%;

	top: 0;

	left: 0;

}

#fade {

	background: #000; 

	position: fixed; 

	width: 100%;

	height: 100%;

	filter:alpha(opacity=80);

	opacity: .80;

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*--IE 8 Transparency--*/

	left: 0;

	z-index: 10;

}

.popup_block {

	background: #ddd;

	padding: 10px 20px;

	border: 10px solid #fff;

	float: left;

	width: 480px;

	position: fixed;

	top: 20%;

	left: 50%;

	margin: 0 0 0 -250px;

	z-index: 100;



}

.popup_block .popup {

	float: left;

	width: 100%;

	background: #fff;

	margin: 10px 0;

	padding: 10px 0;

	border: 1px solid #bbb;

}

.popup h3 {

	margin: 0 0 20px;

	padding: 5px 10px;

	border-bottom: 1px solid #bbb;

	font-size: 1.5em;

	font-weight: normal;

}

.popup p {

	padding: 5px 10px;

	margin: 5px 0;

}

.popup img.cntrl {

	position: absolute;

	right: -20px;

	top: -20px;

}



/*--Making IE6 Understand Fixed Positioning--*/



*html #fade {

	position: absolute;

	top:expression(eval(document.compatMode &&

	document.compatMode=='CSS1Compat') ?

	documentElement.scrollTop : document.body.scrollTop);

}



*html .popup_block {

	position: absolute;

	top:expression(eval(document.compatMode &&

	document.compatMode=='CSS1Compat') ?

	documentElement.scrollTop

	+((documentElement.clientHeight-this.clientHeight)/2)

	: document.body.scrollTop

	+((document.body.clientHeight-this.clientHeight)/2));

	

	left:expression(eval(document.compatMode &&

	document.compatMode=='CSS1Compat') ?

	documentElement.scrollLeft 

	+ (document.body.clientWidth /2 ) 

	: document.body.scrollLeft 

	+ (document.body.offsetWidth /2 ));

}



/*--IE 6 PNG Fix--*/



img{ behavior: url(iepngfix.htc) }

/*FIN SECCION DE VENTANITA EMERGENTE*/

formus.js

Código:

//FUNCIONES PARA MANEJO DE VENTANAS.

function hideDiv() { 

if (document.getElementById) { // DOM3 = IE5, NS6 

document.getElementById('hideshow').style.visibility = 'hidden'; 

} 

else { 

if (document.layers) { // Netscape 4 

document.hideshow.visibility = 'hidden'; 

} 

else { // IE 4 

document.all.hideshow.style.visibility = 'hidden'; 

} 

} 

}



function showDiv() { 

if (document.getElementById) { // DOM3 = IE5, NS6 

document.getElementById('hideshow').style.visibility = 'visible'; 

} 

else { 

if (document.layers) { // Netscape 4 

document.hideshow.visibility = 'visible'; 

} 

else { // IE 4 

document.all.hideshow.style.visibility = 'visible'; 

} 

} 

} 





//FUNCIONES PARA MANEJO DE FORMULARIOS DE ATRIBUTOS.

function cargarDetalles(){

	

	  valor = document.formulario.combotipo.value;

	  

	  tipotexto = "<label>LONGITUD:</label><input type='text' name='longitud' id='longitud' tooltipText='Esto determina la longitud del campo' />";

	  tiponumero = tipotexto + "<label>DECIMALES:</label><input type='text' name='decimal' id='decimal' tooltipText='Esto indica cuántas cifras decimales tendrá el campo. <br /><br /> Ejemplo: <br /><br /> ->numeric(longitud, decimal) <br /><br /> -> numeric(6,2) <br /><br /> ->1234,56 <br /><br />' />";

	  tipofecha = "";

	  tipoboolean = "";

	  

	  if(valor == "texto"){

		document.getElementById("datostipo").innerHTML = tipotexto;

		document.getElementById("longitud").focus();

	  }else if(valor == "numerico"){

		document.getElementById("datostipo").innerHTML = tiponumero;

		document.getElementById("longitud").focus();

	  }else if(valor == "fecha"){

		document.getElementById("datostipo").innerHTML = tipofecha;

	  }else if(valor == "boolean"){

		document.getElementById("datostipo").innerHTML = tipoboolean; 

	  }

}

index.html

Código HTML:

<!--TEST PARA PROBAR AJAX-->

<html>

	<head>

	

		<link rel="stylesheet" type="text/css" href="adolfo.css" media="screen" />

		<link rel="stylesheet" type="text/css" href="ventanita.css" media="screen" />

		<script src="formus.js" type="text/javascript"></script>

		<script src="miAJAXlib.js" type="text/javascript"></script>

		

		<script language="javascript">

			function usarinfo(texto){

				var respuesta = texto;

				document.getElementById("ventana").innerHTML = respuesta;

				showDiv();

			

			}

			function mostrar(texto){

				alert("MENSAJE: "+texto);

			}

			function alertar(){

				alert("USTED HA INVOCADO UN JS COMUN");

			}

		</script>

		

	</head>

	

	<body>

		<button name="boton"  id="boton"  onclick="doAjax('formularioAlta.php', '', 'usarinfo', 'GET', '0')">CUADRO DE DIÁLOGO</button>

		<button name="boton2" id="boton2" onClick="doAjax('dimeHora.php','','mostrar','post','0')">DEL EJEMPLO</button>

		<button name="boton3" id="boton3" onclick="alertar()">ALERTAR, JS COMUN</button>

		

		<div id="hideshow" style="visibility:hidden;">

			<div id="fade"></div>

			<div class="popup_block">

				<div class="popup">

					<a href="javascript:hideDiv()"><img src="icon_close.png" class="cntrl" title="Close"></a>

					<h3>Titulo</h3>

					<div id="ventana"></div>

				</div>

			</div>

		</div>

		

	</body>

</html>

Despueś hay unas librerías de ajax y demás pero con esto basta para ver lo que es maquetación que es por lo que empecé el topic.

Todo va a una misma carpeta.

Espero entiendas algo, las aspirinas corren por mi cuenta.

Calizman · #6 (**permalink**) 30/01/2009, 13:32

Pues... lo he probado... y voy a intentar graficar con palabras lo que sucedio.

Hay 3 botones, estan alineados a la izquierda, uno a la par de otro, al precionar los botones no sucede nada... asi que... no se que mas tenga que pasar?

Copie el texto tal y como esta, lo grabe tal y como tu lo pusiste, y solo eso pasa, estan alineados los 3 hacia la izquierda y no se como deberia verse realmente.

Adolfiten · #7 (**permalink**) 30/01/2009, 13:36

Sí, disculpá, me comí un archivo.

formularioAlta.php

Código PHP:

  <?php 
 
 
 
$formulario = 
 
" 
 
<form action='aclase.php' method='post' name='formulario' id='formulario'> 
 
    <label>NOMBRE:</label><input type='text' id='nombre' name='nombre' tooltipText='Este es el nombre que llevará la variable <br /><br />' /> 
 
    <label>NOMBRE CAMPO:</label><input type='text' id='campo' name='campo' tooltipText='Este es el nombre que llevará el campo en la BD <br /><br />' /> 
 
                 
 
    <label>TIPO:</label> 
 
    <!-- --> 
 
    <select id='combotipo' name='combotipo' onchange='cargarDetalles();' > 
 
        <option value='texto'>TEXTO</option> 
 
        <option value='numerico'>NUMERICO</option> 
 
        <option value='fecha'>FECHA</option> 
 
        <option value='boolean'>BOOLEAN</option> 
 
    </select><br /> 
 
    <div id='datostipo'></div> 
 
        <label>DESCRIPCION:</label><textarea name='descripcion' id='descripcion' tooltipText='Este comentario se adjuntará a la declaración del atributo <br /><br />'></textarea> 
 
         
 
        <br /><br /><br /> 
 
         
 
        <button onclick='javascript:validar();'>GUARDAR</button> 
 
</form> 
 
"; 
 
 
 
echo $formulario; 
 
 
 
 
 
?>

Calizman · #8 (**permalink**) 30/01/2009, 13:41

ya decia yo...

pero sigue sin pasar nada! =S=S

Mejor dime si lo solucionaste ya con KompoZer! asi voy por una taza de cafe!

porque si nos ponemos a solucionar el problema de porque yo no puedo ver nada... da la noche y seguimos en esto, asi que mejor intentemos arreglar el tuyo y luego lo subes! asi todos lo vemos

Adolfiten · #9 (**permalink**) 30/01/2009, 13:55

¿Lo estás ejecutando con apache?

A ver, mejor hacemos esto, un solo archivo:

Código HTML:

<!--TEST PARA PROBAR AJAX-->
<html>
    <head>
    
        <style>

.popup_block {
    background: #ddd;
    padding: 10px 20px;
    border: 10px solid #fff;
    float: left;
    width: 480px;
    position: fixed;
    top: 20%;
    left: 50%;
    margin: 0 0 0 -250px;
    z-index: 100;
 
}
.popup_block .popup {
    float: left;
    width: 100%;
    background: #fff;
    margin: 10px 0;
    padding: 10px 0;
    border: 1px solid #bbb;
}
.popup h3 {
    margin: 0 0 20px;
    padding: 5px 10px;
    border-bottom: 1px solid #bbb;
    font-size: 1.5em;
    font-weight: normal;
}
.popup p {
    padding: 5px 10px;
    margin: 5px 0;
}
.popup img.cntrl {
    position: absolute;
    right: -20px;
    top: -20px;
}
 
/*--Making IE6 Understand Fixed Positioning--*/
 
*html #fade {
    position: absolute;
    top:expression(eval(document.compatMode &&
    document.compatMode=='CSS1Compat') ?
    documentElement.scrollTop : document.body.scrollTop);
}
 
*html .popup_block {
    position: absolute;
    top:expression(eval(document.compatMode &&
    document.compatMode=='CSS1Compat') ?
    documentElement.scrollTop
    +((documentElement.clientHeight-this.clientHeight)/2)
    : document.body.scrollTop
    +((document.body.clientHeight-this.clientHeight)/2));
     
    left:expression(eval(document.compatMode &&
    document.compatMode=='CSS1Compat') ?
    documentElement.scrollLeft 
    + (document.body.clientWidth /2 ) 
    : document.body.scrollLeft 
    + (document.body.offsetWidth /2 ));
}
 
/*--IE 6 PNG Fix--*/
 
img{ behavior: url(iepngfix.htc) }
/*FIN SECCION DE VENTANITA EMERGENTE*/

#formulario label, #datostipo label{
display:block;
font-weight:bold;
text-align:right;
width:160px;
float:left;
line-height: 40px; 
}
#formulario input, #formulario select{
float:left;
font-size:12px;
padding:4px 2px;
width:200px;
margin:4px 0 10px 10px;
}
#formulario button{
clear:both;
margin-left:170px;
width:200px;
float:left;
height:30px;
text-align:center;
line-height:31px;
font-size:11px;
font-weight:bold;
}
#formulario textarea{
float:left;
font-size:12px;
padding:4px 2px;
width:200px;
margin:2px 0 10px 10px;
}

/*SECCION DE VENTANITA EMERGENTE*/

img {
    border: none;
}
 
//----------------------------------------------
#hideshow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#fade {
    background: #000; 
    position: fixed; 
    width: 100%;
    height: 100%;
    filter:alpha(opacity=80);
    opacity: .80;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*--IE 8 Transparency--*/
    left: 0;
    z-index: 10;
}


</style>
        
        <script language="javascript">

//FUNCIONES PARA MANEJO DE VENTANAS.
function hideDiv() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideshow').style.visibility = 'hidden'; 
} 
else { 
if (document.layers) { // Netscape 4 
document.hideshow.visibility = 'hidden'; 
} 
else { // IE 4 
document.all.hideshow.style.visibility = 'hidden'; 
} 
} 
}
 
function showDiv() { 
if (document.getElementById) { // DOM3 = IE5, NS6 
document.getElementById('hideshow').style.visibility = 'visible'; 
} 
else { 
if (document.layers) { // Netscape 4 
document.hideshow.visibility = 'visible'; 
} 
else { // IE 4 
document.all.hideshow.style.visibility = 'visible'; 
} 
} 
} 
 
 
//FUNCIONES PARA MANEJO DE FORMULARIOS DE ATRIBUTOS.
function cargarDetalles(){
     
      valor = document.formulario.combotipo.value;
      
      tipotexto = "<label>LONGITUD:</label><input type='text' name='longitud' id='longitud' tooltipText='Esto determina la longitud del campo' />";
      tiponumero = tipotexto + "<label>DECIMALES:</label><input type='text' name='decimal' id='decimal' tooltipText='Esto indica cuántas cifras decimales tendrá el campo. <br /><br /> Ejemplo: <br /><br /> ->numeric(longitud, decimal) <br /><br /> -> numeric(6,2) <br /><br /> ->1234,56 <br /><br />' />";
      tipofecha = "";
      tipoboolean = "";
      
      if(valor == "texto"){
        document.getElementById("datostipo").innerHTML = tipotexto;
        document.getElementById("longitud").focus();
      }else if(valor == "numerico"){
        document.getElementById("datostipo").innerHTML = tiponumero;
        document.getElementById("longitud").focus();
      }else if(valor == "fecha"){
        document.getElementById("datostipo").innerHTML = tipofecha;
      }else if(valor == "boolean"){
        document.getElementById("datostipo").innerHTML = tipoboolean; 
      }
}
            function usarinfo(texto){
                var respuesta = texto;
                document.getElementById("ventana").innerHTML = respuesta;
                showDiv();
            
            }
            function mostrar(texto){
                alert("MENSAJE: "+texto);
            }
            function alertar(){
                alert("USTED HA INVOCADO UN JS COMUN");
            }
        </script>
        
    </head>
    
    <body>
        <button name="boton3" id="boton3" onclick="showDiv()">ALERTAR, JS COMUN</button>
        
        <div id="hideshow" style="visibility:hidden;">
            <div id="fade"></div>
            <div class="popup_block">
                <div class="popup">
                    <a href="javascript:hideDiv()"><img src="icon_close.png" class="cntrl" title="Close"></a>
                    <h3>Titulo</h3>
                    <form action='aclase.php' method='post' name='formulario' id='formulario'>
			<label>NOMBRE:</label><input type='text' id='nombre' name='nombre' tooltipText='Este es el nombre que llevará la variable <br /><br />' />
    			<label>NOMBRE CAMPO:</label><input type='text' id='campo' name='campo' tooltipText='Este es el nombre que llevará el campo en la BD <br /><br />' />
                 
    			<label>TIPO:</label>
			<!-- -->
			<select id='combotipo' name='combotipo' onchange='cargarDetalles();' >
				<option value='texto'>TEXTO</option>
				<option value='numerico'>NUMERICO</option>
				<option value='fecha'>FECHA</option>
				<option value='boolean'>BOOLEAN</option>
			</select><br />
			<div id='datostipo'></div>
				<label>DESCRIPCION:</label><textarea name='descripcion' id='descripcion' tooltipText='Este comentario se adjuntará a la declaración del atributo <br /><br />'></textarea>
				
				<br /><br /><br />
				
				<button onclick='javascript:validar();'>GUARDAR</button>
		</form>
                </div>
            </div>
        </div>
        
    </body>
</html>

poison_mayer · #10 (**permalink**) 30/01/2009, 14:53

Hola Adolfiten aunque se que lo que te preocupa ahora mismo es como se ve en FF de Linux deberías echarle un ojo en IE $%&&%·"·/& Imaginate

Mikmoro · #11 (**permalink**) 31/01/2009, 10:20

Lo más probable es que la diferencia de la que hablas esté en las fuentes de letra. SI por ejemplo has usado la verdana, y en tu linux no has instalado uno de esos paquetes de fuentes de windows para linux, tu máquina no tiene la verdana, y aunque puede que use la DejáVu, no es igual, y las diferencias en anchos y tamaños puede hacer que te descuadre todo.

mediocre · #12 (**permalink**) 31/01/2009, 17:48

Tienes toda la razon Adolfiten, el FF de linux no funciona ni la mitad de bién que en windows.

Me dí cuenta con los radio button de los formularios, que se dibujan cuadrados, con el fondo blanco, por lo que no lo renderiza bien, pero también me he dado cuenta que hay fallos en el posicionamiento de divs, por lo que he decidido dejar de usarlo en linux, por lo menos hasta que funcione como debe.

Es una pena que se le esté dando promoción también en linux, ya que viene por defecto en ubuntu, y se está dejando de lado buenos navegadores como konkeror.

Hay que aguantarse, no es problema nuestro, aunque cuando se está desarrollando en linux estaría bien saber como va a quedar realmente la página...

Saludos y paciencia!

Adolfiten · #13 (**permalink**) 31/01/2009, 18:09

Poison:

IE es una porquería, todos sabemos eso. Interpreta las cosas como se le ocurre, no como debe ser. Paciencia, algún día dejará de existir o se adaptará a los estándares W3C. ¡De todas formas quiero que funcione con FF en donde debería ser igual! Me llamó la atención eso, ¿tendrá que ver la versión? Si mal no recuerdo tengo 3.05b.

Mikmoro:

Es una muy buena teoría la de el tipo de letra, sin duda voy a tener que probar instalar las fuente que trae por defecto cualquier windows, quizá sea eso.

Mediocre:

Yo también uso ubuntu y trae FF por defecto como bien dijiste, es una lástima si no funciona de la misma manera. Lo que busco es un explorador que me sirva de referencia para diseñar para todos, en donde yo pueda ver lo mismo que van a ver los otros, obviamente hablando de cosas estándar.

Konqueror es un gran navegador al igual que muchos otros, así que voy a tener que testear opera, chrome, safari... entre otros para ver si encuentro lo que busco. ¡Seguiremos en la lucha!

GRACIAS A TODOS POR TOMARSE LA MOLESTIA Y CONTESTAR.

Calizman · #14 (**permalink**) 31/01/2009, 19:27

Cita:

Tienes toda la razon Adolfiten, el FF de linux no funciona ni la mitad de bién que en windows.

Me dí cuenta con los radio button de los formularios, que se dibujan cuadrados, con el fondo blanco, por lo que no lo renderiza bien, pero también me he dado cuenta que hay fallos en el posicionamiento de divs, por lo que he decidido dejar de usarlo en linux, por lo menos hasta que funcione como debe.

Es una pena que se le esté dando promoción también en linux, ya que viene por defecto en ubuntu, y se está dejando de lado buenos navegadores como konkeror.

Hay que aguantarse, no es problema nuestro, aunque cuando se está desarrollando en linux estaría bien saber como va a quedar realmente la página...

Saludos y paciencia!

Realmente estas seguro de lo que dices? porque FireFox no funciona la mitad de bien de lo que funciona windows, pero windows no funciona ni la mitad de bien de lo que funciona Ubuntu.

Creo que es solo tener paciencia... yo al menos, prefiero un sistema operativo al 100% con un navegador del 90%, (refiriendome a Ubuntu y FireFox) a tener un sistema operativo que funciona al 30% con un navegador que funciona al 100% (Windows y FireFox)

Creo que lo mejor, como dicen arriba, es probar los navegadores, yo uso Opera, FireFox y tambien un navegador de Solo Texto que me sirve bastante...

Asi que a buscar navegadores! y a votar por el mejor para cada quien!

mediocre · #15 (**permalink**) 01/02/2009, 04:14

CaliZzZ, no me estoy quejando de Linux ni de Firefox, bueno de firefox si, ya que le podrían poner el mismo interés a la versión de Windows, que a la de Linux.
Aunque no les culpo, ya que la mayoría usa windows, yo también programo para que se se vea bien en windows, no en linux.

Aunque funcione peor, el hecho de tener el FireBug, lo convierte con diferencia en la elección a elegir también en Linux para desarrollar páginas web.

webosiris · #16 (**permalink**) 01/02/2009, 09:00

yo uso gnu/linux desde hace varios años ya, y nunca tuve problemas con que firefox se vea diferente en win/lin..... seguro que es la misma versión de firefox??
copié tu archivo, le incluí un doctype, le di a la fuente un tamaño de 10px para probar, y se ve perfecto en Firefox 3 usando Kubuntu