Foros del Web » Creando para Internet » CSS »

CSS hack para diferenciar FF de Chrome?

Estas en el tema de CSS hack para diferenciar FF de Chrome? en el foro de CSS en Foros del Web. Amigos : me estoy volviendo loco! tengo algo que logro se vea bien en IE / FF ó bien en IE / Chrome pero no ...
  #1 (permalink)  
Antiguo 19/02/2010, 11:31
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Pregunta CSS hack para diferenciar FF de Chrome?

Amigos: me estoy volviendo loco! tengo algo que logro se vea bien en IE / FF ó bien en IE / Chrome pero no puedo lograr se vea bien en Chrome y FF al mismo tiempo (Chrome / FF)

No quisiera usar otra tecnica como comentarios condicionales porque con esta venia bien hasta el advenimiento de Chrome...... que al principio me parecia renderizaba como FF pero ahora noto que no.

Me ayudan ?

Código:
<style>
#sugiere {
 color : inherit;
 border : 0px dashed #ffffff;
 text-align : left;
 width : 350px;
 float : left;
 margin-left: 0px;
 padding-left : 0px;
 padding-right : 0px; 
}              
</style>

<div id='sugiere'>           

<style>
span.required {font-weight: bold; color: #FF0000} 
p.clear { clear: both; margin: 0; padding: 0; }
textarea.estilotextarea {width:320px;height:100px;}
select.estilosel {width:325px;height:20px;}
select.estilosel_mul {width:325px;height:120px;}

input.boton 
{
  width:330px;   /* 338px para Chrome - como ??? */
  / width:325px;
  #width:325px;
  _width:328px;  /* IE 7 */
  
  height:30px;
}   


input.boton_gen {width:100px;height:20px;}

input.required {border-width: 1px; border-style: solid; border-color: red;}
textarea.estilotextarea-required {width:320px;height:100px; border-width: 1px; border-style: solid; border-color: red; }
</style>

<form  action="ingresar"  method="POST"  ENCTYPE="application/x-www-form-urlencoded" name="q_form_72680528871" >
   <input type="hidden" name="modulo" value="ingresar"/>        
   
   <p><label >Direccion web [url]: <span class="required">*</span></label><br/>
   <input type="text" size="50" name="url" value ="<? if(isset($uri)){ echo $uri; }else{ echo "http://"; } ?>"/></p>
  
	
   <p class="clear"></p>
   <p><input type="submit" class="boton" value="Continuar registro" /></p>  
   
</form>
</div>

Si me pueden decir los hacks para Opera y Safari MUY agradecido
__________________
Salu2!

Última edición por Italico76; 19/02/2010 a las 11:36
  #2 (permalink)  
Antiguo 19/02/2010, 11:42
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: CSS hack para diferenciar FF de Chrome?

Código CSS:
Ver original
  1. /*Opera 9 y anteriores*/
  2. html:first-child {}
  3.  
  4. /*Safari hack*/
  5. html[xmlns*=""] body:last-child {}
  6. body:first-of-type .elementOrClassName{}
  7.  
  8. /*Google Chrome hack*/
  9.  body:nth-of-type(1) .elementOrClassName {}
pero vamos que los probe en su momento aver si te vale...
pero dios para que quieres tanto hack? jaja

Usua un reset CSS.... valida tu codigo XHTML/CSS y usa los elementos XHTML y propiedades CSS correctamente y talvez tengas uno que otro desliz pero para IE6... chao..
  #3 (permalink)  
Antiguo 19/02/2010, 12:19
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Respuesta: CSS hack para diferenciar FF de Chrome?

alexk: ante todo gracias.........

La verdad es que sigue pasandome lo mismo! ahora FF toma los CSS de Chrome!

Mira:

Código:
input.boton 
{
  width:330px;   /* 338px para Chrome - como ??? */
  / width:325px;
  #width:325px;
  _width:328px;  /* IE 7 */
  
  height:30px;
}   

body:nth-of-type(1) .boton { width:338px; }
__________________
Salu2!
  #4 (permalink)  
Antiguo 19/02/2010, 12:39
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: CSS hack para diferenciar FF de Chrome?

Código CSS:
Ver original
  1. input.boton
  2. {
  3.   width:330px;   /* 338px para Chrome - como ??? */
  4.   / width:325px;
  5.   #width:325px;
  6.   _width:328px;  /* IE 7 */
  7.  
  8.   height:30px;
  9. }  
  10.  
  11. body:nth-of-type(1) input.boton { width:338px; }
pero no estoy seguro vamos...

PD: Ahora que me fijo solo varian pocos px... talvez el problema no este alli sino como lo estas haciendo... es decir... QUE ESTAS HACIENDO? jeje... si tiene un bg... y eso te da problema? ponle no-repeat... ahora si te provoca descuadre pon la URL de tu sitio mejor asi nos enteramos mas rapido chao...
  #5 (permalink)  
Antiguo 19/02/2010, 13:49
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Respuesta: CSS hack para diferenciar FF de Chrome?

alex..... amigo... asi ya habia probado tambien y el problema es el largo (en el eje x) relativo entre el input y el boton del formulario: quisiera salgan de la misma longitud en todos los navegadores. Aca el form:

formulario ((gracxias))

pd: solo me interesan los CSS
__________________
Salu2!
  #6 (permalink)  
Antiguo 23/02/2010, 22:15
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 10 años, 8 meses
Puntos: 290
Respuesta: CSS hack para diferenciar FF de Chrome?

Me arriesgo a que me vuelvan a infraccionar..........pero......

Nadie me puede ayudar ???
__________________
Salu2!
  #7 (permalink)  
Antiguo 09/03/2010, 06:58
Avatar de Covids0020  
Fecha de Ingreso: septiembre-2003
Ubicación: España
Mensajes: 217
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: CSS hack para diferenciar FF de Chrome?

Quizá sea pedante pero es que...
La mejor forma de ayudarte a ti mismo créeme que esta:
http://www.w3.org/TR/CSS2/

Como ya te han comentado: olvida los hacks, no puede salir nada bueno de eso ya que se basan en aprovechar errores, comportamientos inadecuados, y en muchos casos bastante imprevisibles, de los navegadores.

Los hacks significan desconocer la especificación y el comportamiento de los navegadores. En la mayoría de los casos no son necesarios. Si los necesitas es que algo anda mal en tu CSS. Normalmente, asumiendo ciertas diferencias que nunca vas a resolver al 100%, te bastará con aplicar herencia y especificidad dependiendo del navegador y del resultado.

Como ya te dijo Alex: primero usa un reset, y empieza desde cero con CSS válido y estándar. Aplica tu diseño y compruébalo en los navegadores que te interesen, cuando veas algo que no te gusta vuelve y aplica, no hacks, si no especificidad o reglas que algunos de ellos no soporten, como por ejemplo !important en IE6.
Ojo: he dicho reglas que no soporten, no provocarles errores o sea hacks. Por ejemplo puedes usar ciertas reglas de CSS3 que aunque no te valide es estándar y lo hará pronto.

Como apunte... siempre ayuda identificar el navegador en una clase por ejemplo aplicada al body. Así no necesitas hacks sino establecer especificidad de acuerdo a esa clase.

Un saludo.
__________________
"La sabiduría comienza donde acaba el conocimiento". Yaris.
http://www.culturadigital.org
  #8 (permalink)  
Antiguo 09/03/2010, 07:53
Avatar de Covids0020  
Fecha de Ingreso: septiembre-2003
Ubicación: España
Mensajes: 217
Antigüedad: 14 años, 2 meses
Puntos: 1
Respuesta: CSS hack para diferenciar FF de Chrome?

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
  4.     <head>
  5.         <title>Test form</title>
  6.         <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  7.         <!-- Styles -->
  8.         <!-- /Styles -->
  9.  
  10.     </head>
  11.     <!--/Head-->
  12.  
  13.     <!--Cuerpo Principal-->
  14.     <body>
  15.  
  16.         <!--Envoltura: wrapper-->
  17.         <div id="wrapper">
  18.         </div>
  19.         <!--end wrapper-->
  20.  
  21.     </body>
  22. </html>

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
  4.     <head>
  5.         <title>Test form</title>
  6.         <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  7.         <!-- Styles -->
  8.         <style type="text/css" charset="utf-8">
  9.         /* <![CDATA[ */
  10.         /**
  11.          * Resets.
  12.          * -------------------------------------------------------- */
  13.         /* Reset de Eric Meyer basado en el Yahoo Reset */
  14.         html, body, div, span, applet, object, iframe,
  15.         h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  16.         a, abbr, acronym, address, big, cite, code,
  17.         del, dfn, em, font, img, ins, kbd, q, s, samp,
  18.         small, strike, strong, sub, sup, tt, var,
  19.         dl, dt, dd, ol, ul, li,
  20.         fieldset, form, label, legend,
  21.         table, caption, tbody, tfoot, thead, tr, th, td {
  22.             margin:                 0;
  23.             padding:                0;
  24.             border:                 0;
  25.             outline:                0;
  26.             font-weight:            inherit;
  27.             font-style:             inherit;
  28.             font-size:              100%;
  29.             font-family:            inherit;
  30.             vertical-align:         baseline;
  31.         }
  32.         /* remember to define focus styles! */
  33.         :focus {
  34.             outline:                0;
  35.         }
  36.  
  37.         /* Selectores Base (reset)
  38.          * ----------------------------------- */
  39.         /* Body accesible seguro */
  40.         html, body {
  41.             line-height:            1;
  42.             background:             white;
  43.             color:                  black;
  44.             height:                 100%;   /* Fix IE! */
  45.         }
  46.         /* tables still need 'cellspacing="0"' in the markup */
  47.         table {
  48.             border-collapse:        separate;
  49.             border-spacing:         0;
  50.         }
  51.         caption, th, td {
  52.             text-align:             left;
  53.             font-weight:            normal;
  54.         }
  55.         /**
  56.          * End Resets
  57.          * ------------------------------------------------------ */
  58.  
  59.         #sugiere {
  60.             float:          left;
  61.             width:          350px;
  62.             margin:         0;
  63.             padding:        0;
  64.             text-align:     left;
  65.             color:          inherit;
  66.             border:         0px dashed #FFF;
  67.         }
  68.         span.required {
  69.             font-weight:    bold;
  70.             color:          #FF0000
  71.         }
  72.         .clear {
  73.             clear:          both;
  74.             height:         1%;
  75.             margin:         0;
  76.             padding:        0;
  77.         }
  78.         textarea.estilotextarea {
  79.             width:          320px;
  80.             height:         100px;
  81.         }
  82.         /* Comunes. Prefiero usar otra clase para... cosas extra, en tu caso .mul */
  83.         select.estilosel {
  84.             width:          325px;
  85.             height:         20px;
  86.         }
  87.         /* Añadir clase extra .mul para más altura */
  88.         select.estilosel.mul {
  89.             height:         120px;
  90.         }
  91.         /* Fix al ancho del input */
  92.         input#url {
  93.             width:          326px;
  94.         }
  95.         input.boton {
  96.              width:         330px;
  97.              margin:        0;
  98.              padding:       0;
  99.         }
  100.         /* ]]> */
  101.         </style>
  102.         <!-- /Styles -->
  103.  
  104.     </head>
  105.     <!--/Head-->
  106.  
  107.     <!--Cuerpo Principal-->
  108.     <body>
  109.         <h1>Sugerir web - paso 1</h1>
  110.  
  111.         <div id="sugiere">
  112.             <form action="precheck" method="post"
  113.                 enctype="application/x-www-form-urlencoded">
  114.                 <input id="modulo" name="modulo" type="hidden"
  115.                     value="precheck" />
  116.  
  117.                 <p><label>
  118.                         Direccion web [url]: <span class="required">*</span>
  119.                     </label><br />
  120.                     <input id="url" name="url" type="text" size="50"
  121.                         value="http://" />
  122.                 </p>
  123.  
  124.                 <!-- Esto no es necesario: <p class="clear"></p> -->
  125.                 <p><input class="boton" type="submit"
  126.                     value="Continuar registro" /></p>
  127.             </form>
  128.         </div>
  129.         <!-- En vez de esto <div class="clear"></div>, creo que sobra con br,
  130.         aunque es mejor aprovechar algún tipo de pie o footer para escapar el flujo,
  131.         y sin necesidad de aplicar la clase clear sino estableciendo el estilo. -->
  132.         <br class="clear" />
  133.  
  134.     </body>
  135. </html>
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.
__________________
"La sabiduría comienza donde acaba el conocimiento". Yaris.
http://www.culturadigital.org

Última edición por Covids0020; 09/03/2010 a las 08:09 Razón: error
  #9 (permalink)  
Antiguo 23/08/2012, 00:59
Avatar de daidalos  
Fecha de Ingreso: enero-2005
Mensajes: 437
Antigüedad: 12 años, 10 meses
Puntos: 7
Respuesta: CSS hack para diferenciar FF de Chrome?

A veces es necesario separar las visualizaciones, chrome lee el alto de las fuentes de manera diferente y también los formularios, no es cuestión de un reset o de las especificaciones

actualmente tengo este mismo problema y la solución

body:nth-of-type(1)

no sirve pues firefox también la está leyendo ¿alguna otra idea?

Etiquetas: chrome, hacks
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:59.