Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/12/2011, 14:21
eybel
 
Fecha de Ingreso: marzo-2007
Mensajes: 782
Antigüedad: 19 años, 7 meses
Puntos: 16
Problemas con Cross-Browser reset.css

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

Última edición por eybel; 15/12/2011 a las 15:08