Problemas con Cross-Browser reset.css

[eybel]

Bueno es la 1era vez que me surge la duda de usar el reset.css o no:

Código PHP:

  @charset "UTF-8";
/* CSS Document */
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,
b, u, i, center,
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-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-decoration:none;
}
body {
    line-height: 1;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-spacing: 2px; 
    *border-collapse: collapse; 

}  
   

Yo cree una tabla con 3 columnas y 3 filas asi:

Código PHP:

  <table>
       
    <tr>
          <td>&nbsp;E-mail</td><td>Password</td><td></td>
    </tr> 
    <tr>
           <td><input name="email" type="text" id="email" size="25"></td>
           <td><input name="password" type="password" id="password" size="25"></td>
           <td style="vertical-align:bottom;"><img src="images/login.png" alt="login" width="70" height="23"></td>
    </tr>
    <tr>
        <td><input type="checkbox" name="keep_loggedin" id="keep_loggedin"><span id="mini_link"> Keep me logged in</span></td>
        <td><a href="password_reset.php"><span id="mini_link"> &nbsp;Forgot your password?</span></a></td>
        <td></td>
    </tr>
  
 </table>  
   

Cuando lo visualizo la imagen que esta ubicada en la columna 3 fila 2 se ve desplazada hacia arriba y me deja un espacio hacia abajo.

En la fila 2 tengo los 2 input type "text" y esta imagen que uso de boton. Pero solamente los 2 input type "text" estan alineados y la imagen se va hacia arriba en la ultima celda de la fila 2. Entonecs lo que hice fue ponerle a esta celda donde esta la imagen <td style="vertical-align:bottom;"> hay algo que tengo que arreglar en el reset.css?

Por otro lado y para mi lo mas importante de este post es que la visualizacion en SAFARI y FIREFOX es distinta. En firefox los input type text estan pegados y en safari hay un espacio de 1 o 2 px.

Tengo que usar reset.css? o no es necesario? Estoy tratando de encontrar una manera de solucionar problemas cross-browser... gracias

Lo de la imagen

[emiliodeg]

este problema con las imagenes es siempre el mismo ponele a la celda line-height:0 y se solucina

[eybel]

intente eso y no se corrigió. Lo puse en la <td> de la imagen. Adjunto imagenes, el codigo html en Dreamweaver, Safari, Firefox y el css para los inputs:
(No estoy muy familiarizado con line-heigth, es una propiedad para que elemento o cual es la funcion?)


Dreamweaver:


Safari:


Firefox:


Firefox con Firebug:




Mi HTML:

Código PHP:

  <table>
    <tr>
            <td>E-mail</td>
           <td>Password</td>
            <td>&nbsp;</td>
    </tr> 
    
    <tr>
          <td><input name="email" type="text" id="email"></td>
          <td><input name="password" type="password" id="password"></td>
         <td style="line-height:0"><img src="images/login.png" alt="login" name="login" width="70" height="28" id="login" onClick="test()"></td>

   </tr>
    <tr>
          <td><input type="checkbox" name="keep_loggedin" id="keep_loggedin">
            <span id="mini_link"> Keep me logged in</span></td>
          <td><a href="password_reset.php">
            <span id="mini_link"> &nbsp;Forgot your password?</span></a></td>
         <td>&nbsp;</td>
   </tr>
  
</table>  
   

template.css:

Código PHP:

  #mini_link {
    color: #039;
    font-size: 11px;
}
#email {
    width: 140px;
    height: 28px;
}
#password {
    width: 140px;
    height: 28px;
}
#login {
    cursor: pointer;
}  
   

reset.css:

Código PHP:

  @charset "UTF-8"; /* CSS Document */
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,b,u,i,center,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-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-decoration: none;
}

body {
    line-height: 1;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

ol,ul {
    list-style: none;
}

blockquote,q {
    quotes: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-spacing: 2px;
    *border-collapse: collapse;
}

input {
    border: 0;
}  
   

[eybel]

La imagen se posiciona arriba y los inputs abajo. Cuando me posicione con el firebug arriba de los inputs tambien veia un espacio arriba de los inputs. Se ve que los inputs se posicionan abajo y las imagenes arriba. Lo solucione con

td {vertical-align: middle;}

[ZoroRoronoa]

me pregunto si esto saldrá bien si los "td" que contiene el texto de "password" y el "&nbsp;"
si ambos los unes para formar un solo <td>.

Solamente elimina el <td> que dice &nbsp;
y al <td> donde dice password dale un rowspan="2"

Código HTML:

<tr>
            <td>E-mail</td>
           <td rowspan="2">Password</td>
    </tr>
 

Saludos.

[eybel]

no, porque los inputs email y password tenian un espacio arriba no deseado tambien. La imagen tenia este espacio no deseado abajo en cambio. Al alinear todos los elementos vertical-align: middle; todo se alinea al medio y desaparecen los espacios.

[ZoroRoronoa]

A ok ya entiendo, lo que pasa que no cale tu code.
solo me base en la captura de Dreamweaver y la de los navegadores.

Y note la diferencia en el boton del login.
PD: la verdad, no me habia dado cuenta que era un IMG, yo crei que era un input submit (:

Tonces todo queda allí, Saludos.