IE y Chrome fastidian mucho!!!!!

juan_14nob · #1 (**permalink**) 16/08/2011, 17:27

buenas foreros.! acudo aqui porque todo el dia de hoy y granb parte de la noche de ayer, el diseño que les presento me ha robado mis sueños..

Código HTML:

Ver original<html>
<head>
<style type="text/css">
 
 
#cv_001 h2{
    color:#FFFFFF;
    font-size:110%;
    
    margin:10px 10px 10px 10px;
    font-weight:bold !important;
}
 
#cv_001 h2 span{
    font-size:100%;
    font-weight:normal !important;
}
 
 
#cv_001 input {
    margin:0px 10px 3px 20px;
    padding:2px;
    display:block;
    border:0px;
    width:150px;
    color:#FFF;
}
#cv_todo{
 
    display:block;
    position:absolute;
    height:110px;
    right:0px;
    top:50%;
    z-index:90;
 
 
}
 
#cv_001 li a{
    width:100%;
}
 
#cv_001 li a:link,#cv_001 li a:visited{
    color:#FFFFFF;
    display:block;
    font-family:verdana;
    font-size:100%;
    margin:0px 0px 0px 0px;
    padding:0px;
    text-decoration:none;
    width:100%;
}
 
#cv_001 li a:hover{
    color:#FFFFFF;
    text-decoration:underline;
}
 
#cv_001{
    background:url('css/photo/cv_2.png');
    float:left;
    height:110px;
    
    right:0px;
    top: 50%;
    
    z-index:89;
 
    width:25px;
    
}
 
#cv_002{
    float:left;
    height:110px;
    width:28px;
    border:0px;
}
 
#cv_002 img{
    border:0px solid #FFFFFF;
}
 
#cv_002:active{
    border:0px;
}
#hacia_i{
 
 
}
#cv_003{
    float:left;
    overflow:hidden !important;
    width:200px;
    height:110px;
    background:#000;
}
 
#cv_004{
    width:200px;
}
#cv_004 h2{color:white;}
 
</style>
<script src="jquery-1.5.js" type="text/javascript"></script>
    <script type="text/javascript">
    var isExtended = 0;
    $(document).ready(function(){
    $('#cv_001').click(function(){
    $('#cv_003').toggle("slow");
                
        if(isExtended==0){
            $('#cv_001').css('background', 'url(cv_2_on.png)');
            //  $('#cv_001').attr("src","cv_2_on.png");
            //  document.getElementById('cv_001').childNodes[0].src = document.getElementById('cv_001').childNodes[0].src.replace(/(\.[^.]+)$/, '_on$1');
            isExtended++;
        }else{
            $('#cv_001').css('background', 'url(cv_2.png)');
            //  $('#cv_001').attr("src","cv_2.png");    
            //  document.getElementById('cv_001').childNodes[0].src = document.getElementById('cv_001').childNodes[0].src.replace(/_on(\.[^.]+)$/, '$1');
            isExtended--;
        }
        });
                            
    });
                            
    
    </script>
</head>
<body>
<div id="contenedor" align="center">
    <div id="cv_todo">
    <div id="cv_001">
    </div>  
        <div id="cv_003" style="display:none;">
            <div id="cv_004">
                <h2>Contrase&ntilde;a:</h2>
                <form id="" method="post" action="contac.php">
                    <input type="password" name="contrasena_cv"><br />
                    <input type="button" id="boton_entrar" style="background:#294659;color:white;" value="Entrar"> 
                </form>
            
            </div>
        </div>
    
    </div>
</div>
</body>
</html>

en mozilla firefox anda bien, el problema es en los demas , que hago mal ?

mariomon17 · #2 (**permalink**) 16/08/2011, 20:13

Cual es tu problema exactamente? Que se ve malo diferente?

Un saludo :)

PD: Creo que abusas demasiado de los !important en el CSS.

emprear · #3 (**permalink**) 16/08/2011, 20:37

Primero hacé un html correcto, poné un doctype, un <title></title>, y despues señalá las diferencias entre lo que ves en uno y otro navegador

Saludos

juan_14nob · #4 (**permalink**) 16/08/2011, 21:02

en chrome se despareja todo al iniciar el efecto generado con jquery!!..

mariomon17 · #5 (**permalink**) 17/08/2011, 08:22

Entonces no es problema de CSS si no de JQuery, no?

juan_14nob · #6 (**permalink**) 17/08/2011, 10:52

Cita:

Iniciado por mariomon17

Entonces no es problema de CSS si no de JQuery, no?

y no, porque con firefox funciona bien, pero al hacer el efecto despareja todo!