Flash of all banners in IE – WordPress Content Slide

I came up with a quick and dirty fix for this problem. I set a height on the container div of the slider. The content still flashes as it loads, but most of it is hidden. There’s two parts – a function to calulate the height and adding the height to the css.

In the file: content_slide.php, look for lines 211-217, which look like this:

<?php $total_width=$wpcs_settings['width']+$wpcs_settings['border_width']+$wpcs_settings['border_width'];
?>

#wpcontent_slider_container
{
	overflow: hidden; position: relative; padding:0px;margin:0px; text-align:center; width:<?php echo $total_width;?>px !important;
}

Replace those lines with these, which include a new height function and CSS:

<?php $total_width=$wpcs_settings['width']+$wpcs_settings['border_width']+$wpcs_settings['border_width'];
/* calculate total height*/
$total_height=$wpcs_settings['height']+$wpcs_settings['border_width']+$wpcs_settings['border_width'];
/* if there's nav,add navigation height */
if($wpcs_settings['navigation_buttons']=='true') {
	$total_height=$total_height+32;
}
?>

#wpcontent_slider_container
{
	overflow: hidden; position: relative; padding:0px;margin:0px; text-align:center; width:<?php echo $total_width;?>px !important;
	/* fix all content flash by setting height of container*/ height:<?php echo $total_height;?>px !important;
}

Use at your own risk. It makes things look better with the browsers on my Mac, but I don’t know how IE feels about it. And it will be erased with any plugin updates.

The ideal long term solution would be if images loaded incrementally rather than all at once with page load… but that’s a whole different story.