Problema con css, y html en diferentes navegadores.

[minombreesmm]

Hola colegas
lo que pasa es que estaba haciendo mi pagina basandome en chrome.
luego vi en firefoz, internet explorer y opera y no se veia igual la pagina. y eh batallado en eso.
y luego descargue el safari, y alli se ve peor. entonces
en que me baso o como puedo hacer para que el css se vea igual en todos los exploradores?
osea esta acomodado todo con divs, pero el safari no le importa.
ese es el que lo muestra mas diferente aun.
ya que tengo un video con alto y ancho en un div. y el safari no le importa lo alto y lo muestra todo largo :S
como hace twitter para tener la misma apariencia en cualquier navegador?
y que otros navegadores debo tomar en cuenta antes de lanzar mi pagina web?

encontre esto.
es bueno? http://www.cristalab.com/tutoriales/como-ver-igual-tu-pagina-en-todos-los-navegadores-con-css-c57247l/

viene esto

Código CSS:

.div {margin-bottom:20px;   /* se verá en todos los navegadores */
      #margin-bottom:15px;  /* en todos los IE, se verá con 15px */
      //margin-bottom:15px; /* este hack, es equivalente al anterior: todos los IE */
      _margin-bottom:10px;  /* en todos los IE6, o inferior, se verá con 10px */
}
 

esta linea

Código CSS:

#margin-bottom:15px;  /* en todos los IE, se verá con 15px */
 

va tal y como esta?
la clase .div puede ser cualquier nombre supongo
no se si estoy en lo correcto
pero no entiendo como es que el css le dice al explorador que agarre esa linea.
alguien sabe?

entonces investigare sobre reglas css para navegadores. o con que termino deberia investigar?

[memoadian]

Yo no uso ese tipo de hacks, y mis webs se ven casi igual en todos los navegadores, solo debes respetar las reglas comunes de css, las personas que usan ese tipo de hacks, es por que no saben usar css como debe ser, en mi experiencia, nunca he tenido que usar esos hacks, a ultimas si de plano no puedes usa un stylesheet diferente para IE pero no ensucies tu css con esas cosas.

[BloodShadow]

Iniciado por memoadian

Yo no uso ese tipo de hacks, y mis webs se ven casi igual en todos los navegadores, solo debes respetar las reglas comunes de css, las personas que usan ese tipo de hacks, es por que no saben usar css como debe ser, en mi experiencia, nunca he tenido que usar esos hacks, a ultimas si de plano no puedes usa un stylesheet diferente para IE pero no ensucies tu css con esas cosas.

Muy de acuerdo a lo que dice el pana @memoadian.... yo usaba hack cuando comence pero luego tu css se ve muy sucio... con el tiempo aprenderas a maquetar sin hack llegando a cierto punto que ni sera necesario usar hack, ni hojas de estilos separadas y con muchisima mas experiencia tendras la confiaza de decir "ESTO SE VE BIEN EN TOOODOS LOS BROWSER :)" y si los revisar solo sera por etica de programador/maketador en este caso :D

[cristian_cena]

Como han dicho, los hacks son malos de cara al cumplimiento del standard y la limpieza de tus estilos, simplemente tu hoja de estilos no pasará la validación w3c.
Por lo general el drama con el "css crossbrowser" es que escapa a css: ni con html (comentarios condicionales para ie) ni con css (hacks) podemos cubrir todas las posibilidades (Léase: Renderizado de x versión de x browser en x sistema operativo) con lo cual debemos recurrir a un lenguaje de programación que permita hacer validaciones utilizando el agente de usuario del navegador, o mejor aún usando librerías. Una muy popular (en javascript) es modernizr (1 | 2) que por decirlo de algún modo invierte la forma de pensar ya que con ella te ocupas de detectar propiedades (no navagadores) y dar distintas experiencias según el soporte de propiedades de ese navegador.
Podes usar html5please y caniuse para ver el soporte de propiedades por navegador.
Hacer sitios pixelperfect a día de hoy no es utópico pero si que da muchísimo trabajo, por lo que es bueno considerar propuestas como mejora progresiva o degradación elegante.

[minombreesmm]

Muchas gracias todo este tema lo hice por un conflicto que tengo con el codigo de insercion de videos de youtube.

Código PHP:

foreach($urls as $url)
             { 
        
        $rs["video"]=$url;
        $rs["video"]=str_replace("watch?v=","v/",$rs["video"]);
        
        $videos[$i]='<object width="150" height="150"><param name="movie" value="'.$rs["video"].'&hl=es&fs=1&rel=0"></param>
        <param name="type" value="application/x-shockwave-flash"> 
        <param name="allowFullScreen" value="true"></param>
        <param name="allowscriptaccess" value="always"></param>
        <param name="wmode" value="opaque" />
        <embed src="'.$rs["video"].'&hl=es&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always"            allowfullscreen="true" width="408" height="300"></embed>
        </object>';
            
             
               $videos[$i]=parse_youtube_url(youtubeId($url),'embed','150','150','',$emociones);//le agrego marco al mismo tiempo que convierto en video de youtube para que se pueda ver en video
               $urlList[$i]=$url;
               $i++;
            }
 

este codigo me inserta un video con todo y el tamaño definido y lo uso por que es la unica forma de que el video este atras de mi barra de menus fija, ya que me daba problemas de que el video se veia sobre la barra y no atras.

este problema lo tube en Internet explorer, safari y chrome. en los demas exploradores firefoz y opera no lo tube
ahora el problema con este codigo nuevo es que a pesar de que funciona bien ya en chrome y los demas, no funciona en internet explorer- osea lo del video SOBRE la barra se soluciono, pero llego otro problema
y es que ahora no me respeta el tamaño que le defino en el pbject en el resto de los exploradores. solo lo detecta el chrome. y los demas le ponen tamaño por default.. la verdad ya me hice bolas con todo esto. es un lio
de antemano gracias, no se si conoscan algo que detecte las url de videos y las convierta todas a videos y ademas las ponga atras de una barra de menus fija que siempre permanece en el mismo lugar, como la de face y twitter.
de antemano gracias

[memoadian]

Es que yo no veo nada de css ahí. por que no usas el código de youtube, que te dan? el de iframe, igual si usas por ejemplo php, con file_get_contents o cURL puedes extraer ese código y extraerlo pero ese es otro tema.

lo de la barra que este siempre por encima, creo que z-index es la respuesta, pero como digo, no veo nada de css ene se código.

[minombreesmm]

Iniciado por memoadian

Es que yo no veo nada de css ahí. por que no usas el código de youtube, que te dan? el de iframe, igual si usas por ejemplo php, con file_get_contents o cURL puedes extraer ese código y extraerlo pero ese es otro tema.

lo de la barra que este siempre por encima, creo que z-index es la respuesta, pero como digo, no veo nada de css ene se código.

Bueno ya resolvi lo del codigo ese que tengo alli y es que no me habia fijado que hay
otros parametros height y widht que no tome en cuenta para el tamaño

y por que no uso el que me da youtube?
por que se supone que el usuario solo copia links de video no todos los usuarios copian el iframe, hay unos que copian el de "empezar en" otros el codigo antiguo, otros copian el de la barra de direcciones, y el de la barra de direcciones varia mucho tambien.
y pues la idea no es que el usuario copie todo el codigo del iframe
bueno la cosa es que el usuario puede poner link en el textArea y posteriormente yo extraer el id del video y mostrarlo.

bueno lo del css, es que la barra de menus aparece debajo de los videos y no sobre.
pero ya lo resolvi, el z-index no funciono en este caso, pero funciono el mismo codigo que tengo aqui. excepto en internet explorer. aun no eh encontrado manera de hacer que los videos no se muestren sobre la barra en internet explorer.

[memoadian]

por eso, si tu haces esto:

$video = file_get_contents(cualquier url de youtube por más larga que sea);

tendrás en $video todo el código de esa página y con expresiones regulares sacar el código que te interesa. tan tan. :D

[minombreesmm]

Iniciado por memoadian

por eso, si tu haces esto:

$video = file_get_contents(cualquier url de youtube por más larga que sea);

tendrás en $video todo el código de esa página y con expresiones regulares sacar el código que te interesa. tan tan. :D

jejes bueno estoy muy familiarizado con el filegetcontents, lo he usado para extraer contenido de archivos, solo que este extrae todo.
segun yo es como usar el contenido del text area. XD
bueno jejes ya extraje los id de las diferentes urls que pueda tener
http://www.youtube.com/v/rd7V6A2bIIw
http://www.youtube.com/watch?v=rd7V6A2bIIw&feature=context-gflo http://www.youtube.com/embed/rd7V6A2bIIw
http://youtu.be/rd7V6A2bIIw
mi problema es que si estan de esta forma no los pone todos bien.
osea no deben tener un enter.

pueden tener espacios y otros caracteres pero si detecta un enter ya no lee la url bien.

pero fuera de eso no hay problema. por que ademas ya se ve bien en chrome, aunque aun no se ve bien en internet explorer, en los demas exploradores ya se ve bien.

tambien tengo otro problemita si el usuario pone esto.

Código HTML:

<iframe width="560" height="315" src="http://www.youtube.com/embed/rd7V6A2bIIw" frameborder="0" allowfullscreen></iframe>
 

o esto

Código HTML:

<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/rd7V6A2bIIw?version=3&amp;hl=es_MX"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/rd7V6A2bIIw?version=3&amp;hl=es_MX" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
 

Osea si pone el codigo de insercion de youtube, me lee las cosas mal. el que extrae urls.
bueno en una seccion lo lee mal en la otra bien.
y el problema es que agrega una comilla cuando extrae la url de ese codigo

¿como podria reemplazar esa comilla?

str_replace('"',' ');
no funciona
nose como reemplazar una comilla por espacio
str_replace("""," ");
nada
de antemano gracias XD