Comunidad de diseño web y desarrollo en internet online

CSS and jQuery vs. IE6

Citar            
MensajeEscrito el 10 Dic 2007 08:31 pm
Mi problema es con el por-todos-querido Internet Explorer 6. Estoy haciendo una página intentando que me quede lo más cool posible, pero IE6 me lo impide. Otras veces soy capaz de solucionarlo, pero esta vez no sé donde está el problema.
Aquí está la página en cuestión.

Problema con CSS
Si se compara con un navegador decente, se ve que en IE aparece una barra de escroll horizontal, que no debería estar, porque #menu_left está movido de sitio (si interesa el layout, salió de aquí).

Problema con jQuery
Con jQuery lo que pasa es que no aparece la caja con el valor del atributo alt de las imágenes, tal i como debería ser.

Si alguien puede ayudarme, con el CSS o con el jQuery, se lo agradeceré.

Por ryuz

350 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 10 Dic 2007 11:10 pm
Mirá, yo no te voy a poder ayudar en esto, porque es muy avanzado para mí...
Pero te escribo para avisarte que el link está mal, no lleva a ninguna página.

Saludos y Gracias! ;)

Por ClickyMouse

52 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 11 Dic 2007 12:42 pm
:? A mí me funcionan los dos.

Por ryuz

350 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 11 Dic 2007 01:07 pm
Correcto, no se puede:

Código :

No se puede mostrar la página 
La página Web solicitada no está disponible en este momento. Puede que el sitio Web tenga problemas técnicos o que necesite ajustar la configuración de su explorador. 

Por york3rs

Claber

561 de clabLevel

1 tutorial

Genero:Masculino  

LA___Chile

msie
Citar            
MensajeEscrito el 17 Dic 2007 12:52 am
Posible solucion al proble de CSS:
Trata de usar overflow-y: hidden / overflow-x: hidden (o si quieres validar, overflow a secas). De esa manera si te sales de algun limite, simplemente se cortará, sin ningun scrollbar molesto.

Posible solucion al proble de jQuery:
No se como estes haciendo para devolver el valor de la imagen. Prueba con

Código :

$("img").each( function(){
  mi_alt = $(this).attr("alt");
  // Esa es la idea...
});

Si eso es lo que estas haciendo y no resulta... recuerda que ie6 tiene peculiares maneras de llenar su DOM (en otras palabras, tienes que recurrir a alguna solucion propietaria).

Me cuentas si alguna de las dos te sirvió ^^

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino  

The dark places where wolves access internet with 46,6 kbps

firefox
Citar            
MensajeEscrito el 17 Dic 2007 04:55 pm
Gracias Lunatic Lycanthrop por intentar solucionar el problema a ciegas. No sé por qué no veis la página en el enlace, probad con este http://www.freewebs.com/ryuz/index2.html.

Y Lunatic Lycanthrop, con lo del overflow, sí que desaparecerá la barra, pero también parte del contenido. Si va el enlace lo verás. Y por si no se ve, aquí el código fuente:

Código :

<!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>ryuz</title>
<style type="text/css">
body {margin:0;padding:0;background:url(pagebgbot.png) bottom repeat-x;font-family:Arial, sans-serif;}
img {border:none;}
.align_left {float:left;} .align_right {float:right;}
.cont img, .img {margin:4px 8px;padding:2px;border:#333 1px solid;background-color:#FAFAFA;position:relative;}
.img span {display:block;text-align:center;font-size:10px;color:#333;padding:2px 3px;background:#EEE;position:absolute;bottom:6px; margin:0 4px;border:#DDD 1px solid;}
.img img {border:#CCC 1px solid;}
#login {display:block;width:100%;height:35px;position:relative;top:0;margin:0;padding:0;background:#000 url(loginbg.png);}
#login .input {
   color:#999;
   background:#333;
   border:1px groove #000;
   margin:8px 5px;
   padding:0 5px;
   font-size:12px;
   width:100px;
   height:16px;
   font-family:"Courier New", Courier, monospace;
}
#login .input_focus {color:#CCC !important;background-color:#000 !important;border:#999 1px ridge !important;}
#login .submit {margin:6px 5px;background:transparent;border:#000 1px solid;color:#CCC;cursor:pointer;}
#header {display:block;width:100%;height:100px;background:#CCC;}

#cw{float: left;width: 100%;background:url(pagebgtop.png) top repeat-x;}
#content {margin: 0 200px 0 128px;}
#content a {color:#900;}
#content a:hover {color:#C00;text-decoration:none;outline:#C00 1px dotted;background-color:#F99;}

#menu_left {float:left;width:128px;margin-left:-100%;}
#menu_left h2 {margin:0;padding:4px 8px 5px 5px;background:url(menult.png) top no-repeat;height:28px;font-size:18px;line-height:28px;color:#333;font-weight:bold;}
#menu_left ul {margin:0;padding:0 0 11px 0;list-style-type:none; background:url(menulb.png) bottom left no-repeat}
#menu_left li {margin:0;width:120px;padding-right:8px; background:url(menuls.png) right repeat-y;}
#menu_left li a {color:#CCC;background-color:#666;height:20px;line-height:20px;width:100%;padding:0;text-indent:5px;display:block;text-decoration:none;font-size:12px;font-weight:bold;}
#menu_left li a:hover {color:#FFF;text-indent:14px;background:#666 url(menulbullet.png) no-repeat left center;}

#rightcolumn {float:left;width:200px;margin-left:-200px;background:#FDE95E;}

.cont p {margin:0;padding:0 0 10px;text-align:justify;text-indent:15px;font-size:12px;font-weight:normal;color:#000;}
.cont h2 {display:block;width:auto;height:25px;line-height:25px;color:#FAFAFA;font-size:18px;font-weight:bold;text-indent:10px;margin:0 0 -28px;padding:0;position:relative;top:-34px;z-index:2;}
.cont {width:auto;height:auto;margin:0 10px;padding:0;}
.cen {width:auto;height:100%;margin:0 13px 0;padding:0;position:relative;}
.itl {background:url(n1.png) top left;}
.itr {background:url(n3.png) top right;}
.ibl {background:url(n6.png) bottom left;}
.ibr {background:url(n8.png) bottom right;padding:0 13px;}
.it {background:url(n2.png) top center;}
.ib {background:url(n7.png) bottom center;padding:39px 13px 12px;}
.il {background:url(n45.png) center left;margin-left:-26px;}
.ir {background:url(n45.png) center right;margin-right:-26px;}
.itl, .itr, .ibl, .ibr {background-repeat:no-repeat;}
.it, .ib {background-repeat:repeat-x;}
.il, .ir {background-repeat:repeat-y;}  

#footer {display:block;width:100%;height:120px;clear:both;}

@media print {
   #login, #header, #menu_left, #rightcolumn, #footer {display:none;}
   #content, .cont, .itl, .itr, .ibl, .ibr {margin:0;padding:0;}
   #cw {float:none;height:auto;}
   body {font-family:"Times New Roman", Times, serif;text-align:justify;font-size:12pt}
}
</style>
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
   $("form#login input[@type=text], form#login input[@type=password]").each(function(){
      $(this).focus(function(){
         $(this).addClass("input_focus");
         if (this.value==this.defaultValue) {this.value='';};
      });
      $(this).blur(function(){
         $(this).removeClass("input_focus");
         if ((1) && (this.value=='')) {this.value=this.defaultValue;};
      });
   });
   $('.cont img').each(function(){
      var alt = $(this).attr('alt');
      var class = $(this).attr('class');
      $(this).removeAttr('class').css({ margin: 0, padding: 0}).wrap('<div class="img '+class+'"></div>').after('<span>'+alt+'</span>');
   });
   $('.cont span').css('opacity',0.8).css('-moz-border-radius', "7px");
   //$('.cont > *').wrapAll('<div class="itl"><div class="itr"><div class="ibl"><div class="ibr"><div class="it"><div class="ib"><div class="il"><div class="ir"><div class="cen"></div></div></div></div></div></div></div></div></div>');
});
//-->
</script>
<!--[if lt IE 7]>
<style type="text/css">
/*body {background-color:#E3DFE0;}
body, #cw {background-image:none;}
#header {border-bottom:1px solid #999;margin:0 0 5px;}*/
.ibr {height:1%;}
</style>
<![endif]-->
</head>
<body>
<form id="login" name="form1" method="post" action="">
   <input type="text" name="textfield" class="input" value="Nombre usuario"/>
   <input type="password" name="textfield2" class="input" value="Contraseña"/>
   <input type="submit" class="submit" value="Log in"/>
</form>
<div id="header"></div>
<div id="cw">
   <div id="content">
      <div class="cont">
      <div class="itl"><div class="itr"><div class="ibl"><div class="ibr"><div class="it"><div class="ib"><div class="il"><div class="ir">
         <div class="cen">
            <h2>Lorem Impsum (dolor sit amet)</h2>
            <p>Lorem ipsum dolor sit amet, demonstraverunt liber clari nisl amet ex formas. Laoreet seacula cum erat te volutpat, at mutationem autem. Feugiat claritas luptatum eua placerat me claritatem tempor. Euismod est aliquam ad odio magna investigationes dolor congue. Imperdiet legentis nibh insitam quod vero ii mirum. Id decima et non lobortis laoreet in eros sit. Veniam eu diam ut seacula facer te, mirum lectorum consectetuer sed me. <a href="#">Anteposuerit aliquip per eodem doming mutationem est. Facit litterarum illum soluta praesent lius modo</a>.</p>
            <img src="anyimg1.png" alt="Imagen Cualquiera número 1" class="align_left" />
            <p><strong>Notare litterarum legunt wisi nam nobis blandit usus liber quam feugiat sit. Fiant eorum formas, soluta, quis aliquip tempor non tincidunt at lectores</strong>. Erat modo futurum odio illum hendrerit habent vulputate ullamcorper typi. Laoreet eleifend quinta videntur ad molestie iusto, sollemnes cum. Hendrerit eua facilisi et eu. Sequitur fiant facit placerat feugiat litterarum congue tincidunt lius consequat. <em>Clari id eum eros sed, erat. Diam soluta futurum ii seacula adipiscing imperdiet praesent tempor veniam</em>.</p>
            <p>Mirum dignissim qui claritatem, in illum eros ex. Quam autem legunt molestie formas te delenit accumsan mutationem me. Clari est odio enim. Consectetuer luptatum non quarta possim eodem at. Legentis placerat ad nihil cum, seacula minim. Euismod augue humanitatis delenit, assum quinta eua sollemnes lobortis placerat. Ipsum anteposuerit claram illum, eorum amet et, clari eu. Augue iriure id aliquam consectetuer illum congue ii in.</p>
            <p>Videntur nulla ex te erat legunt me typi demonstraverunt exerci doming. Volutpat est sit non, dynamicus at investigationes ad. Saepius nostrud cum, facit eodem molestie, quam, veniam mazim eua lorem. Exerci eros quarta insitam usus adipiscing demonstraverunt. Et veniam imperdiet legere eu modo id ii littera feugiat, in, sequitur. Lectorum laoreet lobortis, ex consequat te adipiscing sed nam.</p>
            <p>Lorem ipsum dolor sit amet, demonstraverunt liber clari nisl amet ex formas. Laoreet seacula cum erat te volutpat, at mutationem autem. Feugiat claritas luptatum eua placerat me claritatem tempor. Euismod est aliquam ad odio magna<strong> investigationes dolor congue</strong>. Imperdiet legentis nibh insitam quod vero ii mirum. Id decima et non lobortis laoreet in eros sit. Veniam eu diam ut seacula facer te, mirum lectorum consectetuer sed me. <em>Anteposuerit aliquip per eodem doming mutationem est. Facit litterarum illum soluta praesent lius modo.</em></p>
            <a href="#"><img src="anyimg2.png" alt="Imagen Cualquiera número 2" class="align_right" /></a>
            <p>Notare litterarum legunt wisi nam nobis blandit usus liber quam feugiat sit. Fiant eorum formas, soluta, quis aliquip tempor non tincidunt at lectores. Erat modo futurum odio illum hendrerit habent vulputate ullamcorper typi. <a href="#">Laoreet eleifend quinta videntur</a> ad molestie iusto, sollemnes cum. Hendrerit eua facilisi et eu. Sequitur fiant facit placerat feugiat litterarum congue tincidunt lius consequat. Clari id eum eros sed, erat. Diam soluta futurum ii seacula adipiscing imperdiet praesent tempor veniam.</p>
            <p>Mirum dignissim qui claritatem, in illum eros ex. Quam autem legunt molestie formas te delenit accumsan mutationem me. Clari est odio enim. Consectetuer luptatum non quarta possim eodem at. Legentis placerat ad nihil cum, seacula minim. Euismod augue humanitatis delenit, assum quinta eua sollemnes lobortis placerat. Ipsum anteposuerit claram illum, eorum amet et, clari eu. Augue iriure id aliquam consectetuer illum congue ii in.</p>
            <p>Videntur nulla ex te erat legunt me typi demonstraverunt exerci doming. Volutpat est sit non, dynamicus at investigationes ad. Saepius nostrud cum, facit eodem molestie, quam, veniam mazim eua lorem. Exerci eros quarta insitam usus adipiscing demonstraverunt. Et veniam imperdiet legere eu modo id ii littera feugiat, in, sequitur. Lectorum laoreet lobortis, ex consequat te adipiscing sed nam.</p>
         </div>
      </div></div></div></div></div></div></div></div>
      </div>
   </div>
</div>
<div id="menu_left">
   <h2>Menú</h2>
   <ul>
      <li><a href="#">noticias</a></li>
      <li><a href="#">agenda</a></li>
      <li><a href="#">intranet</a></li>
      <li><a href="#">calendario</a></li>
      <li><a href="#">nosotros</a></li>
      <li><a href="#">cantactar</a></li>
   </ul>
</div>
<div id="rightcolumn"><strong>Right Column: <em>200px</em></strong></div>
<div id="footer"></div>
</body>
</html>

Como ya dije, si alguien puede ayudarme, con el CSS o con el jQuery, se lo agradeceré.

Por ryuz

350 de clabLevel

2 tutoriales

 

firefox
Citar            
MensajeEscrito el 24 Dic 2007 12:31 pm
Ya solucioné el problema con el CSS. El problema estaba en .cont p {text-align:justify;}. Al darle valor left se soluciona (maldito IE).

Pero el jQuery sigue sin funcionar, parce que lo ignora. ¿Alguien tiene alguna idea?

Por ryuz

350 de clabLevel

2 tutoriales

 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.