Problemas con CSS y !DOCTYPE

frank_harbey12 · #1 (**permalink**) 04/04/2011, 16:50

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.

ThomaGutierrez · #2 (**permalink**) 04/05/2011, 12:19

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<html> 
<head> 
   <script language="Javascript"> 
 
//detección del navegador por http://www.quirksmode.org/js/detect.html 
 
var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++) {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {   string: navigator.userAgent,
            subString: "OmniWeb",
            versionSearch: "OmniWeb/",
            identity: "OmniWeb"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            prop: window.opera,
            identity: "Opera"
        },
        {
            string: navigator.vendor,
            subString: "iCab",
            identity: "iCab"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {
            string: navigator.vendor,
            subString: "Camino",
            identity: "Camino"
        },
        {       // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {       // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]
 
};
BrowserDetect.init();
 
//script para poner estilos distintos para cada navegador 
if (BrowserDetect.browser == "Chrome") { 
    document.write("<meta http-equiv='Refresh' content='0;url=chrome.html'>"); 
} 
else { 
    if (BrowserDetect.browser == "NothingNavigator"){  
                 document.write("<meta http-equiv='Refresh' content='0;url=ie.html'>"); 
             }else{ 
                 document.write("<meta http-equiv='Refresh' content='0;url=ie.html'>"); 
             } 
}
</script> 
</head> 
<body> 
 
</body> 
</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<html>
<head></head>
<body>
</body>
</html>

Finalmente PARA CHROME.HTML

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head></head>
<body>
</body>
</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.