Foros del Web » Creando para Internet » CSS »

Problemas con CSS y !DOCTYPE

Estas en el tema de Problemas con CSS y !DOCTYPE en el foro de CSS en Foros del Web. Buen dia, de nuevo requiero de sus conocimientos. El problema que se me presenta es con esta pagina http://frontwebos.web.officelive.com la cual en pantallas widescreen los ...
  #1 (permalink)  
Antiguo 04/04/2011, 17:50
 
Fecha de Ingreso: octubre-2010
Mensajes: 73
Antigüedad: 7 años, 1 mes
Puntos: 1
Exclamación Problemas con CSS y !DOCTYPE

Buen dia, de nuevo requiero de sus conocimientos.
El problema que se me presenta es con esta pagina http://frontwebos.web.officelive.com la cual en pantallas widescreen los menus derechos e izquierdo se salen de su contenedor cuando todo esta establecido en %.

En google Chrome se ve perfecto en pantallas widscreen, los menus no se salen ni nada, pero en Firefox 4 y IE9 funciona erróneamente. Los 2 menus se salen de su contendor, pero cuando le retiro el doctype al documento, en FIrefox 4 e IE9 si funciona pero en Chrome no. Que creen que pueda estar sucediendo?

Aca esta el codigo CSS http://frontwebos.web.officelive.com/general.css
El codigo en el cual esta la configuracion de las imagenes del menu es

ul li img{width:95%;height:95%}

Agradesco su colaboracion.
  #2 (permalink)  
Antiguo 04/05/2011, 13:19
Avatar de ThomaGutierrez  
Fecha de Ingreso: enero-2011
Mensajes: 33
Antigüedad: 6 años, 11 meses
Puntos: 2
Respuesta: Problemas con CSS y !DOCTYPE

Me Sucede Lo Mismo!

Pero se puede usar de manera que identifique el navegador y lo redirija a una pagina diseñada para tal [Navegador]

Asi que vamos por pasos:

1) Crear 3 documentos ie.html, chrome.html y el index.html.
2)EN INDEX.HTML:

Código HTML:
Ver original
  1. <html>
  2. <head>
  3.    <script language="Javascript">
  4.  
  5. //detección del navegador por http://www.quirksmode.org/js/detect.html
  6.  
  7. var BrowserDetect = {
  8.     init: function () {
  9.         this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
  10.         this.version = this.searchVersion(navigator.userAgent)
  11.             || this.searchVersion(navigator.appVersion)
  12.             || "an unknown version";
  13.         this.OS = this.searchString(this.dataOS) || "an unknown OS";
  14.     },
  15.     searchString: function (data) {
  16.         for (var i=0;i<data.length;i++) {
  17.             var dataString = data[i].string;
  18.             var dataProp = data[i].prop;
  19.             this.versionSearchString = data[i].versionSearch || data[i].identity;
  20.             if (dataString) {
  21.                 if (dataString.indexOf(data[i].subString) != -1)
  22.                     return data[i].identity;
  23.             }
  24.             else if (dataProp)
  25.                 return data[i].identity;
  26.         }
  27.     },
  28.     searchVersion: function (dataString) {
  29.         var index = dataString.indexOf(this.versionSearchString);
  30.         if (index == -1) return;
  31.         return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
  32.     },
  33.     dataBrowser: [
  34.         {
  35.             string: navigator.userAgent,
  36.             subString: "Chrome",
  37.             identity: "Chrome"
  38.         },
  39.         {   string: navigator.userAgent,
  40.             subString: "OmniWeb",
  41.             versionSearch: "OmniWeb/",
  42.             identity: "OmniWeb"
  43.         },
  44.         {
  45.             string: navigator.vendor,
  46.             subString: "Apple",
  47.             identity: "Safari",
  48.             versionSearch: "Version"
  49.         },
  50.         {
  51.             prop: window.opera,
  52.             identity: "Opera"
  53.         },
  54.         {
  55.             string: navigator.vendor,
  56.             subString: "iCab",
  57.             identity: "iCab"
  58.         },
  59.         {
  60.             string: navigator.vendor,
  61.             subString: "KDE",
  62.             identity: "Konqueror"
  63.         },
  64.         {
  65.             string: navigator.userAgent,
  66.             subString: "Firefox",
  67.             identity: "Firefox"
  68.         },
  69.         {
  70.             string: navigator.vendor,
  71.             subString: "Camino",
  72.             identity: "Camino"
  73.         },
  74.         {       // for newer Netscapes (6+)
  75.             string: navigator.userAgent,
  76.             subString: "Netscape",
  77.             identity: "Netscape"
  78.         },
  79.         {
  80.             string: navigator.userAgent,
  81.             subString: "MSIE",
  82.             identity: "Explorer",
  83.             versionSearch: "MSIE"
  84.         },
  85.         {
  86.             string: navigator.userAgent,
  87.             subString: "Gecko",
  88.             identity: "Mozilla",
  89.             versionSearch: "rv"
  90.         },
  91.         {       // for older Netscapes (4-)
  92.             string: navigator.userAgent,
  93.             subString: "Mozilla",
  94.             identity: "Netscape",
  95.             versionSearch: "Mozilla"
  96.         }
  97.     ],
  98.     dataOS : [
  99.         {
  100.             string: navigator.platform,
  101.             subString: "Win",
  102.             identity: "Windows"
  103.         },
  104.         {
  105.             string: navigator.platform,
  106.             subString: "Mac",
  107.             identity: "Mac"
  108.         },
  109.         {
  110.                string: navigator.userAgent,
  111.                subString: "iPhone",
  112.                identity: "iPhone/iPod"
  113.         },
  114.         {
  115.             string: navigator.platform,
  116.             subString: "Linux",
  117.             identity: "Linux"
  118.         }
  119.     ]
  120.  
  121. };
  122. BrowserDetect.init();
  123.  
  124. //script para poner estilos distintos para cada navegador
  125. if (BrowserDetect.browser == "Chrome") {
  126.    document.write("<meta http-equiv='Refresh' content='0;url=chrome.html'>");
  127. }
  128. else {
  129.     if (BrowserDetect.browser == "NothingNavigator"){  
  130.                  document.write("<meta http-equiv='Refresh' content='0;url=ie.html'>");
  131.              }else{
  132.                  document.write("<meta http-equiv='Refresh' content='0;url=ie.html'>");
  133.              }
  134. }
  135. </script>
  136. </head>
  137. <body>
  138.  
  139. </body>
  140. </html>
Este Anterior lo pegas en el index.html de manera que cuando entres en el te redirrecione a una de las siguientes paginas:
Codigo PARA IE.HTML [Valido También para Firefox]
Código HTML:
Ver original 

Finalmente PARA CHROME.HTML
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2. </body>
  3. </html>
Listo eso es todo; Simplemente haces las dos paginas con y sin el DOCTYPE, y el index que lo redirrecciona según el navegador.

NOTA: Es Obligatorio que lleven por nombre chrome.html y ie.html.

Etiquetas: !doctype, menus
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 23:03.