Problema diseño con diferentes navegadores

bLero #1 Jun '11

Hola chicos,

Estoy programando una web para una asignatura y se me exige que en primer lugar sea válida por la w3c tanto el html como el css y en segundo lugar que se vea igual en IE, firefox y chrome.

La página es completamente válida pero la zona del login se ve diferente, a continuación os dejo unas imágenes para que veais que ocurre.

En firefox:

En Chrome:

En IE:

como podreis observar se ve completamente diferente. Me gustaría que en todos los navegadores se viese como en firefox.

El código que he utilizado es el siguiente:

<form action="">
<table>
<tr>
<td><img src="images/icons/popcorn.gif" alt="user"/></td><td>Usuario:</td><td><input type="text" size="10" name="user" /></td>
</tr>
<tr>
<td><img src="images/icons/coke.gif" alt="pw"/></td><td>Contraseña:</td><td><input type="password" size="10" name="pw" /></td>
</tr>
</table>
</form>

Un saludo

Khanser #2 Jun '11 :psyduck:

Ponle width a los td's que tienen los inputs y ponle padding al propio input.. supongo... Ver tablas para hacer un formulario me ha dejado tieso...

bLero #3 Jun '11

nada, el width no funciona, y nose que hay de malo en meter una tabla para un formulario, es lo más normal del mundo, si no crease una tabla no quedaria así de ordenado :S

oho #4 Jun '11

No lo hagas con tablas y más si es para una asignatura.

FouNNdeR #5 Jun '11

Utiliza listas y css, supongo que lo arreglarás aunque siempre hay alguna sorpresa cuando lo abres con otro navegador xD

LzO #6 Jun '11

no recuerdo donde leí, que el ie (tampoco recuerdo que version) el padding, borde y toa la historia lo contaba hacia dentro.

en firefox si tu a un div le pones 400x300 y le metes 2px de borde se te quedaria en 404 de ancho y en ie (no recuerdo version) sigue siendo 400 pero el contenido se estrecha

hay solucion para ello pero tampoco la recuerdo xD

Igneus #7 Jun '11

Metele width a los inputs.

bLero #8 Jun '11

el width no tiene ningun efecto, hacerlo con listas tampoco cambia

2 respuestas

LzO #9 Jun '11

#8 has probado a no usar tablas?

JuSt1 #10 Jun '11

#8 Puedes editarlo con CSS? Yo creo que con algunas propiedades lo solucionaras.

X-Crim #11 Jun '11 Moderador Mario Kart

yo no uso tablas, css y le aplico un ancho

bLero #12 Jun '11

solucionado desde css,

#login input{
	width:80px;
}

gracias

1 respuesta

eagLe__ #13 Jun '11

Acostumbrate ahora a CSS ya que estás aprendiendo hacer páginas

Tira de un reset.css y empieza desde ahí, ojalá me lo hubiesen dicho cuando empecé que aprendiese primero css en vez de ir con tablas como un garrulo.

A parte, que luego cuando quieras modificar cualquier cosa tienes que liarla bastante, con CSS no.

oho #14 Jun '11

simple curiosidad, ¿por qué la relación de las patatas fritas con el usuario y la bebida con la contraseña?

1 respuesta

Khanser #15 Jun '11 :psyduck:

#12 ESE era el width al que nos referíamos, seguramente tu usabas el width como tag html...

1 1 respuesta

LzO #16 Jun '11

#14 porque sino es por la bebida, las patatas no bajan xDD

Igneus #17 Jun '11

son palomitas no? xD

bLero #18 Jun '11

#15

sí, ese fue el problema, utilizaba el width como tag html y no como propiedad css.

Fui un incrédulo al pensar que deberia tener el mismo efecto

bLero #19 Jun '11

Ahora tengo otro "problemilla"

Se me exige que use XML + XSL para mostrar datos en la página web, es una mierda pero es lo que hay.

Tengo un documento XML con información de películas y un XSL con el diseño para ese XML.

Utilizo para cargar el XML y el XSL la siguiente funcion:

<BODY ONLOAD="init()">
<DIV ID="displayDiv"></DIV>
<SCRIPT LANGUAGE="javascript">
   function init() {
     bookXML.async = false;
     bookXML.load("peliculas.xml");
 	var stylesheet = eval("SimpleXSL");
     var result = bookXML.transformNode( stylesheet.documentElement );
     displayDiv.innerHTML = result;
   } 
 </SCRIPT>
<XML ID="bookXML"></XML>
<XML ID="SimpleXSL" SRC="peliculas.xsl"></XML>
</BODY>

el caso es que en internet explorer se me carga, pero en el resto de navegadores no.

¿Alguna idea?

1 respuesta

LzO #20 Jun '11

ni puta idea de xml ni xsl pero...

esa linea no tiene contenido dentro no?

2 respuestas

bLero #21 Jun '11

#20

si que tiene, fíjate

displayDiv.innerHTML = result;

scumah #22 Jun '11

#20, Ese div es el que se rellena mediante el js.

#19, Echa un ojo a esto.

1 respuesta

bLero #23 Jun '11

#22

He intentado hacerlo como ahí pero nada, esta vez no me lo muestra ni IE, me da el aviso de si deseo permitir un control ActiveX, le doy que si pero nada.

En Firefox, Opera, Safari y Chrome directamente no sale nada.

Dejo una muestra del código que tengo, aver si alguien me puede ayudar:

<html>
<head>
<title>XSL en el Cliente</title>
<script>
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}

function displayResult()
{
xml=loadXMLDoc("peliculas.xml");
xsl=loadXMLDoc("peliculas.xsl");
// code for IE
if (window.ActiveXObject)
  {
  ex=xml.transformNode(xsl);
  document.getElementById("displayDiv").innerHTML=ex;
  }
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
  {
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  resultDocument = xsltProcessor.transformToFragment(xml,document);
  document.getElementById("displayDiv").appendChild(resultDocument);
  }
}
</script>
</head>
<body onLoad="displayResult()">
<div id="displayDiv"></div>
</body>
</html>

Problema diseño con diferentes navegadores

Usuarios habituales

Tags