Perdón, no había visto el enlace.
Antes de nada: olvídate de un visionado
idéntico entre navegadores basado en CSS, incluso usando medidas fijas y píxeles, porque cada PC es un mundo. La única forma que se me ocurre de hacerlo prácticamente idéntico es usando imágenes para los campos del formulario.
Segundo: Está en modo
quirks, es decir, en modo: Deja al navegador que haga lo que le da la gana con el documento.
Pon un doctype a tu documento, o sea, dile al navegador
qué es lo que va a renderizar.
Por ejemplo, esta estructura básica xhtml:
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <!-- Styles -->
<!-- /Styles -->
<!--/Head-->
<!--Cuerpo Principal-->
<!--Envoltura: wrapper-->
<!--end wrapper-->
Por lo pronto, solo bastaría, en las diferencias que yo veo,
aplicar un ancho al input de la URL.
No obstante, te pego aquí el marcado que yo al menos veo igual, tanto con los resets como sin ellos, en Linux con Firefox 3.6 y Chrome.
* Me he permitido añadir y modificar el marcado de acuerdo a los estándares y mis preferencias.
Por cierto, usa ids en los elementos además de name. Actualmente se sigue usando name por compatibilidad inversa.
Va:
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <!-- Styles -->
<style type="text/css" charset="utf-8"> /* <![CDATA[ */
/**
* Resets.
* -------------------------------------------------------- */
/* Reset de Eric Meyer basado en el Yahoo Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* Selectores Base (reset)
* ----------------------------------- */
/* Body accesible seguro */
html, body {
line-height: 1;
background: white;
color: black;
height: 100%; /* Fix IE! */
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
/**
* End Resets
* ------------------------------------------------------ */
#sugiere {
float: left;
width: 350px;
margin: 0;
padding: 0;
text-align: left;
color: inherit;
border: 0px dashed #FFF;
}
span.required {
font-weight: bold;
color: #FF0000
}
.clear {
clear: both;
height: 1%;
margin: 0;
padding: 0;
}
textarea.estilotextarea {
width: 320px;
height: 100px;
}
/* Comunes. Prefiero usar otra clase para... cosas extra, en tu caso .mul */
select.estilosel {
width: 325px;
height: 20px;
}
/* Añadir clase extra .mul para más altura */
select.estilosel.mul {
height: 120px;
}
/* Fix al ancho del input */
input#url {
width: 326px;
}
input.boton {
width: 330px;
margin: 0;
padding: 0;
}
/* ]]> */
<!-- /Styles -->
<!--/Head-->
<!--Cuerpo Principal-->
<h1>Sugerir web - paso 1
</h1>
<form action="precheck" method="post" enctype="application/x-www-form-urlencoded">
<input id="modulo" name="modulo" type="hidden" value="precheck" />
Direccion web [url]:
<span class="required">*
</span> <input id="url" name="url" type="text" size="50" value="http://" />
<!-- Esto no es necesario: <p class="clear"></p> -->
<p><input class="boton" type="submit" value="Continuar registro" /></p> <!-- En vez de esto <div class="clear"></div>, creo que sobra con br,
aunque es mejor aprovechar algún tipo de pie o footer para escapar el flujo,
y sin necesidad de aplicar la clase clear sino estableciendo el estilo. -->
Aún así recuerda que esos elementos de formulario
tienen estilo, para homogeneizar su aspecto deberías aplicarles tus reglas CSS por completo. En este caso sería importante aplicar reglas a tu submit en concreto, por ejemplo como dije, puedes usar una imagen.
En fin no sé, si es que al final... casi siempre se trata de usar marcado correcto y válido.