Foros del Web » Creando para Internet » CSS »

Problema don division

Estas en el tema de Problema don division en el foro de CSS en Foros del Web. Estoy utilizando el paquete de coda slider para hacer una galeria de imagenes, necesito manejar las siguientes divisiones para que se pueda ver correctamente el ...
  #1 (permalink)  
Antiguo 16/06/2009, 16:00
Avatar de mark_ant0n  
Fecha de Ingreso: enero-2009
Ubicación: Comitan, Chiapas mx
Mensajes: 388
Antigüedad: 8 años, 10 meses
Puntos: 6
Problema don division

Estoy utilizando el paquete de coda slider para hacer una galeria de imagenes, necesito manejar las siguientes divisiones para que se pueda ver correctamente el efecto, El problema esta que todo eso lo quiero poner el <div id="page-wrap"> dentro de otro div que esta regido mediante css, en firefox se ve perfecto, pero en internet explorer 6 div del slider queda fuera y deforme, intente manejar una tabla pero igual, internet explorer 7 se ve bien, pero como le puedo hacer para que funcione¿?, espero me pueda ayudar

Código HTML:
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    
   <title>Featured Content Slider</title> 
    
   <link rel="stylesheet" type="text/css" href="style.css" /> 
 
   <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script> 
   <script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script> 
 
   <script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script> 
   <script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script> 
   <script type="text/javascript"> 
    
      var theInt = null; 
      var $crosslink, $navthumb; 
      var curclicked = 0; 
       
      theInterval = function(cur){ 
         clearInterval(theInt); 
          
         if( typeof cur != 'undefined' ) 
            curclicked = cur; 
          
         $crosslink.removeClass("active-thumb"); 
         $navthumb.eq(curclicked).parent().addClass("active-thumb"); 
            $(".stripNav ul li a").eq(curclicked).trigger('click'); 
          
         theInt = setInterval(function(){ 
            $crosslink.removeClass("active-thumb"); 
            $navthumb.eq(curclicked).parent().addClass("active-thumb"); 
            $(".stripNav ul li a").eq(curclicked).trigger('click'); 
            curclicked++; 
            if( 6 == curclicked ) 
               curclicked = 0; 
             
         }, 3000); 
      }; 
       
      $(function(){ 
          
         $("#main-photo-slider").codaSlider(); 
          
         $navthumb = $(".nav-thumb"); 
         $crosslink = $(".cross-link"); 
          
         $navthumb 
         .click(function() { 
            var $this = $(this); 
            theInterval($this.parent().attr('href').slice(1) - 1); 
            return false; 
         }); 
          
         theInterval(); 
      }); 
   </script> 
</head> 
 
<body> 
   <div id="page-wrap"> 
   <div class="slider-wrap"> 
      <div id="main-photo-slider" class="csw"> 
 
         <div class="panelContainer"> 
            <div class="panel" title="Panel 1"> 
               <div class="wrapper"> 
                  <img src="images/tempphoto-1.jpg" alt="temp" /> 
                  <div class="photo-meta-data"> 
                      
                     <span>"Free Tibet" Protest at the Olympic Torch Rally</span> 
 
                  </div> 
               </div> 
            </div> 
            <div class="panel" title="Panel 2"> 
               <div class="wrapper"> 
                                    <div class="photo-meta-data"> 
                     Chicago Bears at Seattle Seahawkss<br /> 
 
                     <span>Fifth field goal, overtime win for the Seahawks smarco</span> 
                  </div> 
               </div> 
            </div>       
            <div class="panel" title="Panel 3"> 
               <div class="wrapper"> 
                   
                  <img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/> 
                   
                  <h1>How to Cook a Scotch Egg</h1> 
 
                   
                  <ul> 
                     <li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li> 
                     <li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li> 
                     <li>1/2 cup AP flour</li> 
                     <li>1-2 eggs, beaten</li> 
                     <li>3/4 cup panko-style bread crumbs</li> 
 
                     <li>Vegetable oil for frying</li> 
                  </ul> 
               </div> 
            </div> 
            <div class="panel" title="Panel 4"> 
               <div class="wrapper"> 
                  <img src="images/tempphoto-4.jpg" alt="temp" /> 
                  <div class="photo-meta-data"> 
 
                     A Poem by Shel Silverstein<br /> 
                     <span>Falling Up</span> 
                  </div> 
               </div> 
            </div> 
            <div class="panel" title="Panel 5"> 
               <div class="wrapper"> 
                  <img src="images/tempphoto-5.jpg" alt="temp" /> 
 
                  <div class="photo-meta-data"> 
                     New Video on CSS-Tricks<br /> 
                     <span>Using Wufoo for Web Forms</span> 
                  </div> 
               </div> 
            </div> 
            <div class="panel" title="Panel 6"> 
               <div class="wrapper"> 
 
                  <h1>A Tale of Two Cities</h1> 
                  <p><em>Charles Dickins</em></p> 
                  <blockquote>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</blockquote> 
               </div> 
            </div> 
 
         </div> 
      </div> 
 
<img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" />
      <div id="movers-row"> 

      </div> 
 
   </div> 
    
   </div> 
 
</body> 
 
</html> 
Y este es el css

Código css:
Ver original
  1. 1.
  2.       /* kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
  3.    2.
  4.           Featured Content Slider
  5.    3.
  6.           by: Chris Coyier
  7.    4.
  8.       */
  9.    5.
  10.        
  11.    6.
  12.        
  13.    7.
  14.        
  15.    8.
  16.       /*
  17.    9.
  18.           UTILITY STYLES
  19.   10.
  20.       */
  21.   11.
  22.        
  23.   12.
  24.       .floatLeft                                  { float: left; margin-right: 0px;}
  25.   13.
  26.       .floatRight                                 { float: right; }
  27.   14.
  28.       .clear                                      { clear: both; }
  29.   15.
  30.       a                                           { outline: none; }
  31.   16.
  32.        
  33.   17.
  34.        
  35.   18.
  36.       /*
  37.   19.
  38.           PAGE STRUCTURE
  39.   20.
  40.       */
  41.   21.
  42.       #page-wrap                                  { width: 500px; margin: 0px auto; position: relative; min-height: 330px;
  43.   22.
  44.                                                     background: url(images/bg.png) top center;
  45.   23.
  46.        
  47.   24.
  48.                                                      }
  49.   25.
  50.        
  51.   26.
  52.        
  53.   27.
  54.       /*
  55.   28.
  56.           TYPOGRAPHY
  57.   29.
  58.       */
  59.   30.
  60.       ul                                          { list-style: square inside; }
  61.   31.
  62.       a, a:visited                                { color: #729dff; text-decoration: none; }
  63.   32.
  64.       a:hover, a:active                           { color: white; }
  65.   33.
  66.       blockquote                                  { padding: 0 20px; margin-left: 0px; border-left: 0px solid #ccc; font-size: 14px;
  67.   34.
  68.                                                     font-family: Georgia, serif; font-style: italic; margin-top: 0px;}
  69.   35.
  70.        /*
  71.   36.
  72.           SLIDER
  73.   37.
  74.       */
  75.   38.
  76.       .slider-wrap                                { width: 419px; position: absolute; left: 0px;
  77.   39.
  78.                                                     border: 1px solid  #000;
  79.   40.
  80.       }
  81.   41.
  82.       .stripViewer .panelContainer
  83.   42.
  84.       .panel ul                                   { text-align: left; margin: 0 15px 0 30px; border: 1px solid  #0C71C2;}
  85.   43.
  86.       .stripViewer                                { position: relative; overflow: hidden; width: 419px; height: 285px; }
  87.   44.
  88.       .stripViewer .panelContainer                { position: relative; left: 0; top: 0; }
  89.   45.
  90.       .stripViewer .panelContainer .panel         { float: left; height: 100%; position: relative; width: 419px; }
  91.   46.
  92.       .stripNavL, .stripNavR, .stripNav           { display: none; }
  93.   47.
  94.       .nav-thumb                                  { border: 1px solid black; margin-right: 5px; }
  95.   48.
  96.       #movers-row                                 { margin: -43px 0 0 62px; }
  97.   49.
  98.       #movers-row div                             { width: 20%; float: left; }
  99.   50.
  100.       #movers-row div a.cross-link                { float: right; }
  101.   51.
  102.       .photo-meta-data                            { background: url(./imagenes/transpBlack.png); padding: 10px; height: 30px;
  103.   52.
  104.                                                     margin-top: -50px; position: relative; z-index: 9999; color: white; }
  105.   53.
  106.       .photo-meta-data span                       { font-size: 13px;}
  107.   54.
  108.       .cross-link                                 { display: block; width: 62px; margin-top: -14px;
  109.   55.
  110.                                                 position: relative; padding-top: 15px; z-index: 9999; }
  111.   56.
  112.       .active-thumb                               { background: transparent url(./imagenes/icon-uparrowsmallwhite.png) top center no-repeat;
  #2 (permalink)  
Antiguo 16/06/2009, 18:10
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Respuesta: Problema don division

Hola mark_ant0n

Sería bueno conocer que doctype estás usando.

Quizás pueda deberse a cierta incapacidad que tiene ie6 para funcionar bien bajo doctype en algunas circunstancias.

Podrías probar cómo resulta la visión en ie6 quitándole el doctype (dejándolo en modo quirks, o sea, en el modo más permisivo y no sujeto a ningún estándard).

Haz la prueba y nos dices (para buscar una solución).

Saludos
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




La zona horaria es GMT -6. Ahora son las 04:16.