Entrar

Por que se ve tan mal en IE?

josesd · · Solicitar retirada
Vereis, he creado una web que en google chrome se ve perfecta, pero en internet explorer se ve fatal..
por mas que rebusco en el codigo no consigo encontrar que falla para que se vea asi :?

aqui teneis la direccion de mi web:

http://josesd.onlinewebshop.net/

gracias por adelantado
Liaranort · · Solicitar retirada
En mi caso es al reves se ve solo en ie, la verdad que es un poco desesperante...
Yaneth · · Solicitar retirada
mira, estoy viendo tu codigo

te irè traduciendo mas o menos sale???

aqui le dices:
quiero un div que mida el 100 por ciento de ancho de la pantalla
sea cual sea el tipo de resolucion este div debe medir el totalidad de ancho y que tenga una altura fija de 50px mas colores, bordes, etc etc
hasta aqui vamos mas o menos bien

<div id="head">
Josesd
</div>

#head { width: 100% ; height: 50px ; background-color:#f0faff ; border-bottom: 2px solid ; border-color: #5cc4ff }

luego seguimos con
aqui dices:
has un div que mida 1000px de ancho
luego DENTRO de el metes un div que se llama menu el cual mide 220px de ancho y debe flotar a la izquierda y tiene una altura de 600px, hasta aqui seguimos bien solo que....olvidaste ponerle el contenido, abriste y cerraste menu sin ponerle nada dentro, entonces te queda ese espacio vacio, aqui empiezo a entender cada vez menos el efecto que deseas conseguir

luego.... metes un div llamado content el cual...mide 1000px de ancho y 600 de altura... ok, dime, este div donde se supone que debe estar???,
al ver el contenido supongo que deseas que estè a un lado de donde DEBERIA estar el menu, o no?????, entonces, si hacemos cuentas
dentro de all debe estar menu y conten uno al lado del otro
si all mide 1000px y dentro de el metemos menu que mide 220px entonces.. cuanto espacio sobra para content??? 780px pero tambien debes tomar en cuenta los pixeles de los bordes margenes y demàs

#all { width: 1000px ; margin: 0px auto ; text-align: center}
#menu { float: left ; width: 220px;background-color: pink; border-right: 1px solid ; border-left: 1px solid; border-color: #5cc4ff ; height: 600px}
#content { width: 1000px; height: 600px; background-color: white ; border-right: 1px solid ; border-bottom: 1px solid; border-color: #5cc4ff}

<div id="all">
<div id="menu">
????????????
</div>
<div id="content">


haber.... esperame tantito que mas abajito me encontrè otro menu en css!!!
#menu { width: 200px; padding: 0; border-bottom: solid #5cc4ff 1px; }
este mide 200px de ancho!!! tonces.... como este està despues... el primero ya no vale jejeje

bueno....me retracto del div menu vacio, ya se lo que va ahi jeje sorry, es que conforme voy mirando voy escribiendo jeje

espero que no te haya enrredado mas de la cuenta, peero, te copiarè aqui como me han quedado mis codigos despues de tanta movedera



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Josesd - Inicio</title>
<link rel="stylesheet" href="ayuda2.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<!-->
<script language="JavaScript" type="text/javascript">
<!--

function Menu(){
this.actual;
this.estado = false;
this.total;
this.principal;

this.stringfunc = "\" onClick=\"menu1.despliega(";

this.altosfinales = new Array();

this.velocidad;

this.escribe = function(contenedor,alto,velocidad){

this.principal = document.getElementById(contenedor);
this.total = this.items.length;
this.velocidad = velocidad;

for(var i=0;i<this.total;i++){
this.principal.innerHTML+= "<div id=\"" + this.items[0] + "\"><a href=\"" + this.items[1] + this.stringfunc + i + ");\" alt=\"" + this.items[2] + "\">" + this.items[2] + "</a></div>";

this.principal.innerHTML+= "<ul id=\"sub" + this.items[0] + "\">";

for(var k=0;k<this.subitems.length;k++){
document.getElementById("sub" + this.items[0]).innerHTML+= "
  • <a href=\"" + this.subitems[1] + "\" alt=\"" + this.subitems[0] + "\">" + this.subitems[2] + "</a>";
    }
    this.principal.innerHTML+= ""

    document.getElementById("sub" + this.items[0]).style.height = "0px";

    this.altosfinales = this.subitems.length * alto;

    }

    }

    this.despliega = function(itemdiv){

    for(var i=0;i<this.total;i++){
    var principal = document.getElementById("subitem-" + i);
    if(itemdiv == i){
    if(itemdiv == this.actual && this.estado == false){
    principal.style.height = "0px";
    this.estado = true;
    }else{
    principal.style.height = this.altosfinales + "px";
    this.estado = false;
    }
    }else{
    principal.style.height = "0px";
    }
    }
    this.actual = itemdiv;
    }

    }


    function Desplegable(){

    this.stringfunc = "\" onClick=\"menu1.despliegaacor(";

    this.alturaparciala = 0;

    this.ultimosubmenu;

    this.estadoclick = true;

    this.escribeacordeon = function(contenedor,alto,velocidad){
    this.escribe(contenedor,alto,velocidad);
    }


    this.despliegaacor = function(itemdiv){

    if(this.estadoclick == true){

    var raiz = this;
    var principalactual;
    var sigueabriendo;

    function abre(principal,est){

    raiz.estado = false;

    if(est){
    principalactual = principal;
    }

    raiz.alturaparciala = raiz.alturaparciala + raiz.velocidad;

    if(raiz.alturaparciala >= principalactual.alturaparcialc){
    raiz.ultimosubmenu = principalactual;
    clearTimeout(inter);
    raiz.alturaparciala = 0;
    raiz.estadoclick = true;
    //alert(raiz.estadoclick);

    }else{
    principalactual.style.height = raiz.alturaparciala + "px";
    var inter = setTimeout(abre,10);
    }

    }

    function cierra(principal,est,sigue){

    if(est){
    principalactual = principal;
    sigueabriendo = sigue;
    }

    principalactual.alturaparcialc = principalactual.alturaparcialc - raiz.velocidad;

    if(principalactual.alturaparcialc <= 0){
    clearTimeout(inter);
    principalactual.style.height = "0px";
    if(sigueabriendo){
    abre(sigueabriendo,true);
    raiz.estadoclick = false;
    }else{
    raiz.estadoclick = true;
    }
    //alert(raiz.estadoclick);
    }else{
    principalactual.style.height = principalactual.alturaparcialc + "px";
    var inter = setTimeout(cierra,10);
    }

    }



    for(var i=0;i<this.total;i++){

    var principal = document.getElementById("subitem-" + i);

    principal.alturaparcialc = this.altosfinales;

    if(principal.alturaparcialc > 0){

    if(itemdiv == i){
    if(itemdiv == this.actual && this.estado == false){
    cierra(principal,true);
    this.estado = true;
    this.ultimosubmenu = undefined;
    }else{
    if(this.ultimosubmenu){
    cierra(this.ultimosubmenu,true,principal);
    }else{
    abre(principal,true);

    }
    }

    }

    }

    }

    this.actual = itemdiv;

    }

    if(this.total == 0){
    this.estadoclick = true;
    }
    }

    }

    Desplegable.prototype= new Menu();
    //-->
    </script>
    <script language="JavaScript" type="text/javascript">
    <!--
    var menu1= new Desplegable();

    menu1.items = new Array(["item-0","javascript:;","Inicio"],["item-1","javascript:;","Josesd"],["item-2","javascript:;","Proyectos"],["item-3","javascript:;","Sigueme"]);
    menu1.subitems = new Array([["subitem-0","javascript:;","Inicio"],["subitem-1","javascript:;","Tour"]],[["subitem-0","javascript:;","&#65533;Quien soy?"],["subitem-1","javascript:;","Historia"]],[["subitem-0","javascript:;","1"],["subitem-1","javascript:;","2"],["subitem-2","javascript:;","3"],["subitem-3","javascript:;","4"]],[["subitem-0","javascript:;","Email"],["subitem-1","javascript:;","Twitter"],["subitem-2","javascript:;","Facebook"],["subitem-3","javascript:;","Tuenti"],["subitem-4","javascript:;","Skype"]]);
    -->
    </script>

    </head>

    <body onLoad="menu1.escribe('menu',22,8);">
    <div id="head">
    Josesd
    </div>
    <div id="all">
    <div id="menu"></div>
    <div id="content">


    <h5>Seguimos trabajando para mejorar el dise&ntilde;o, disculpe las molestias.</h5>
    <table border="0" width="79%" align="center">
    <tr>
    <td>

    <table class="post">
    <tr>
    <td width="20%">Autor:</td>
    <td width="120%">Titulo:</td>
    </tr>
    <tr>
    <td colspan="2">
    coment
    <td>
    </tr>
    </table>


    </td>
    </tr>
    <tr>
    <td>

    <table class="post">
    <tr>
    <td width="20%">Autor:</td>
    <td width="120%">Titulo:</td>
    </tr>
    <tr>
    <td colspan="2">
    coment
    <td>
    </tr>
    </table>


    </td>
    </tr>
    <tr>
    <td>

    <table class="post">
    <tr>
    <td width="20%">Autor:</td>
    <td width="120%">Titulo:</td>
    </tr>
    <tr>
    <td colspan="2">
    coment
    <td>
    </tr>
    </table>


    </td>
    </tr>
    </table>
    </div>
    <div id="foot">
    <font size="1.5">&copy; Copiright josesd.tk</font>
    </div>
    </div>
    </body>
    </html>


    @charset "utf-8";
    /* CSS Document */
    body {margin: 0px 0px 0px 0px;background-color: #DAD8D8 }
    #head { width: 1000px ; height: 50px ; background-color:pink ; border-bottom: 2px solid ; border-color: #5cc4ff }
    #all { width: 1000px ; margin: 0px auto ; text-align: center}
    #menu { float: left ; width: 200px;background-color: pink; border-right: 1px solid ; border-left: 1px solid; border-color: #5cc4ff ; height: 600px; padding: 0; border-bottom: solid #5cc4ff 1px;}
    #content { width: 797px; height: 600px; background-color: green ; border-right: 1px solid ; border-bottom: 1px solid; border-color: #5cc4ff; float:left}
    #foot { width: 999px ; background-color: #f0faff; border-left: 1px solid; border-right: 1px solid ; border-color: #5cc4ff; }
    body { font-family: "Trebuchet MS"; }

    #menu div { border-top: solid #5cc4ff 1px; background: #c2e9ff; }
    #menu a { padding-left: 10px; text-decoration: none; color: #00598c; font-weight: 700; display: block; width: 190px; font-size: 1em; }
    #menu a:hover { background: #d1eeff; }
    #menu ul { margin: 0; padding: 0; font-size: 0.9em; background: #f0faff; overflow: hidden; }
    #menu li { list-style: none; font-size: 0.8em; padding: 0; }
    #menu li a { padding-left: 0px; width: 200px; }
    #menu li a:hover { color: #0086d2; background: #daf3ff; }
    .post {border: 1px solid ; border-color: #5cc4ff; text-align: left}



    pd, por los colores ni te apures, solo son de prueba para verlo mejor
    tu pones los que tu quieras (como si fuera necesario que te lo dijera verdad jje)

    si aun te queda alguna duda, por aqui ando.
    • josesd · · Solicitar retirada
    wow muchas gracias por toda tu atencion y tu tiempo.

    resulta que realice los cambios y cuando fui a comprobarlo no funcionaba la web, supongo que sera cosa del hosting, asique estoy esperando a que funcione

    de todos modos gracias de nuevo.