Question

I am using jQuery.cycle to show three images. Keeping with other answers on this site, I used a combination of min-width and overflow:hidden to remove the horizontal scrollbar, which only appears in Internet Exploder Nein.

In case it’s relevant, the site uses both the Yii framework and Blueprint.

The horizontal scrollbar is not going away. Why?

Action

<?php
class IndexAction extends CAction
{
    public function run()
    {
        $ds = DIRECTORY_SEPARATOR;
        $cs = Yii::app()->clientScript;

        $cs->registerScriptFile( $ds. 'js' . $ds .
                  'jquery.cycle.all.js', CClientScript::POS_HEAD );

        $cs->registerScript( 'cycle', "$('.pics').cycle({
            fx: 'scrollLeft',
            containerResize: false,
            slideResize: false,
            width:960,
            height:300,
            fit:true
        });", CClientScript::POS_END );

        $this->controller->render('index');
    }
}

View

<?php
Yii::app()->clientScript->registerCss('ServicesCycleSlideShow',"
.pics {  
    min-width:960px;  
    height:300px;  
    padding:0;
    margin:0;
    overflow:hidden;
} 

.pics img {  
    padding: 0;
    margin: 0;
    border:  none;  
    min-width:  960px; 
    height: 300px; 
    overflow:hidden;
}");
?>
<div class="pics"> 
    <img src="/images/1.png" width="960" height="300" /> 
    <img src="/images/2.png" width="960" height="300" /> 
    <img src="/images/3.png" width="960" height="300" /> 
</div> 

Answer 1

I found the problem. jQuery.cycle introduces overflow-x:scroll, which took precedence over overflow:hidden. Adding overflow-x:hidden removes the scrollbar.