White Background with IE9 and 10

RainingNails · 12-26-2012, 04:28 PM

Hello!

I have a javascript-powered scroller on a site that allows the visitor to scroll a box containing text vertically.

The problem is that something about this box is forcing the background of the entire site to be white. And when I say "background" I am talking about the body of the site, which has a static background image. It is like the site will not call the background-image I am assigning on the pages I have the slider.

I have tried adding "transparent" layers to the HTML/PHP and CSS and nothing seems to be working. The issue is only in IE9 and IE10. The stranger thing is, the all white background does not always show up. Just most of the time.

Thanks for any help you can provide!

The code is below:

Relevant HTML/PHP

Code:

<div rel="scrollcontent1" style="background-color: transparent;">
<div class="contentholder">
    <?php the_content(); ?>
						<?php wp_link_pages( array( 'before' => '' . __( 'Pages:', 'twentyten' ), 'after' => '' ) ); ?>
					

				<?php comments_template( '', true ); ?>

<?php endwhile; ?>
    </div>
</div>

Relevant CSS:

Code:

 /* Height & width for the container - The rest is done by the jQuery part. */
  div[rel='scrollcontent1'] { width: 490px; height: 490px;}
  
  /* Basic CSS for the elements - If rel is "scrollcontent1", style its scrollbar by referring to ".scrollcontent-content", ".scrollcontent-bar", etc. */
  .scrollcontent1-content { /* background: #eee; */ } /* for vertical content, no explicit width is required for inner DIV */
  .scrollcontent1-bar { width: 9px; background: #a67aea; overflow: hidden; }
  .scrollcontent1-drag { background: #6c40b0; cursor: pointer; }
  
  div[rel='scrollcontent2'] { width: 300px; height: 300px; }
  
  /* Basic CSS for the elements - If rel is "scrollcontent2", style its scrollbar by referring to ".scrollcontent2-content", ".scrollcontent2-bar", etc. */
  .scrollcontent2-content { width: 999px; } /* for horizontal content, width should be set to total width of all floated inner container elements */
  .scrollcontent2-bar { height: 15px; background: #ccc; border-radius: 5px; box-shadow: inset 0px 0px 5px #444444; overflow: hidden; }
  .scrollcontent2-drag { background: #425a8a; border-radius: 5px; cursor: pointer; }
  
  /* Not needed elements */
  #contentwrap { padding: 5px; border: 1px #444444 solid; display: block; width: 300px; border-radius: 10px; }
  .scrollcontent1-content p, .scrollcontent2-content p {margin:0; padding:0}

body {background-image: url(../images/main-bg.jpg); background-repeat: no-repeat; background-position: top center; font-family: Arial, Helvetica, sans-serif; color: #fff; font-size: 14px;}

.content {background-color: rgba(128, 91, 185, 0.85); box-shadow: 0px 0px 4px #222; height: 580px; width: 500px; padding: 20px; position: absolute; right: 0; top: 126px; border-radius: 10px;}
.pagetitle, .content h1 {font-family: 'Quattrocento Sans', sans-serif; font-size: 41px; color: #fff; text-align: center; border-bottom: 1px solid #66438f; display: block; font-weight: 100; margin-bottom: 20px;}
.contentholder h2, .contentholder h2 a, .content h2, content h2 a {font-size: 26px; font-family: 'Quattrocento Sans', sans-serif; padding-bottom: 15px; text-decoration: none; font-weight: 100; padding-top: 22px;} 

.contentholder, scrollcontent1, div.scrollcontent1 {width: 470px; padding-right: 10px;}
.contentholder p, .contentholder a, .contentholder li, scrollcontent1 p, scrollcontent1 a, scrollcontent1 li, div.scrollcontent1 p, div.scrollcontent1 a, div.scrollcontent1 li {color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 14px;}
.contentholder p, scrollcontent1 p, div.scrollcontent1 p {padding-bottom: 15px!important;}

Relevant Javascript:

Code:

jQuery.fn.customscroll = function( d ) {
    return this.each( function() {
        var direction = d.direction, bounce = typeof d.bounce === 'number'? d.bounce : 20;
        var drag = {
            d: direction,
            t: $( this ).attr( "rel" ),
            id: $( this ),
            setdimensions: function(orientation) { //DD added function
                if (orientation=="horizontal"){
                    drag.b.css( { width: drag.id.width(), left: 0, bottom: 0, position: "absolute", "z-index": 10 } );
                    drag.c.css( { display: "block", position: "absolute", height: drag.id.height() - drag.b.height() - 5, "overflow-y": "hidden" } );
                    drag.s.css( { width: drag.b.width(), top: 0, width: 70, height: drag.b.height(), position: "absolute", "z-index": 100 } );
               	    drag.tickB = parseFloat( parseInt( drag.c.width() - drag.s.parent().width() ) / parseInt( drag.s.parent().width() - drag.s.width() ) );
                    drag.tickC = parseFloat( parseInt( drag.s.parent().width() - drag.s.width() ) / parseInt( drag.c.width() - drag.s.parent().width() ) );
		    return [drag.b.width() - drag.s.width() + bounce, drag.id.width() - drag.c.width() - bounce * drag.tickB];
		} else {
                    drag.b.css( { height: drag.id.height(), right: 0, top: 0, position: "absolute" } );
                    drag.c.css( { display: "block", position: "absolute", width: drag.id.width() - drag.b.width() - 5 } );
                    drag.s.css( { width: drag.b.width(), top: 0, height: 70, position: "absolute" } );
                    drag.tickB = parseFloat( parseInt( drag.c.height() - drag.s.parent().height() ) / parseInt( drag.s.parent().height() - drag.s.height() ) );
                    drag.tickC = parseFloat( parseInt( drag.s.parent().height() - drag.s.height() ) / parseInt( drag.c.height() - drag.s.parent().height() ) );
		    return [drag.b.height() - drag.s.height() + bounce, drag.id.height() - drag.c.height() - bounce * drag.tickB];
		}
	    },	
            create: function() {
                switch ( drag.d ) {
                    case "horizontal":
                        drag.elements( "horizontal" );
                        var maxs=drag.setdimensions( "horizontal" );
                        drag.s.data( { click: false } );
                        drag.s.mouseover( function() {
                            drag.s.data( { click: true } );
                        });
                        drag.s.mouseout( function() {
                            drag.s.data( { click: false } );
                        });
                        drag.id.bind('mousewheel', function( f, delta ) {
                            f.preventDefault();
                            clearTimeout(drag.wheeltimer);
                            var initial = drag.s.position().left, moveby;
                            drag.s.css({left: Math.min(Math.max((moveby = -10 * delta + initial), -bounce), maxs[0])});
                            drag.c.css({left: Math.max(Math.min(- drag.tickB * moveby, drag.tickB * bounce), maxs[1])});
                            drag.wheeltimer = setTimeout(drag.redrawH, 100);
                        });
                        drag.s.mousedown( function( f ) {
                            f.preventDefault();
                            drag.s.data( { hold: false } );
                            var initial = drag.s.parent().offset().left - ( drag.s.offset().left - f.pageX );
                            $( document ).mousemove( function( e ) {
                                e.preventDefault();
                                if ( drag.s.data( "hold" ) == false )
                                {
                                    drag.s.css( { left: Math.min(Math.max(e.pageX - initial, -bounce), maxs[0]) } );
                                    drag.c.css( { left: Math.max(Math.min(- drag.tickB * ( e.pageX - initial ), drag.tickB * bounce),maxs[1]) } );
                                }
                            });
                        });
                        $( document ).mouseup( function() {
                            drag.redrawH();
                        });
                        drag.b.click( function( e ) {
                            if ( drag.s.data( "click" ) == false )
                            {
                                var initial = drag.s.parent().offset().left + ( drag.s.width() / 2 );
                                drag.s.animate( { left: e.pageX - initial } );
                                drag.c.animate( { left: - drag.tickB * ( e.pageX - initial ) }, {
                                    complete: function() {
                                        drag.redrawH();
                                    }
                                });
                            }
                        });
                    break;
                    case "vertical":
                        drag.elements( "vertical" );
                        var maxs=drag.setdimensions( "vertical" );
                        drag.s.data( { click: false } );
                        drag.s.mouseover( function() {
                            drag.s.data( { click: true } );
                        });
                        drag.s.mouseout( function() {
                            drag.s.data( { click: false } );
                        });
			drag.id.bind('mousewheel', function( f, delta ) {
                            f.preventDefault();
                            clearTimeout(drag.wheeltimer);
                            var initial = drag.s.position().top, moveby;
                            drag.s.css({top: Math.min(Math.max((moveby = -10 * delta + initial), -bounce), maxs[0])});
                            drag.c.css({top: Math.max(Math.min(-drag.tickB * moveby, drag.tickB * bounce), maxs[1])});
                            drag.wheeltimer = setTimeout(drag.redrawV, 100);
                        });
                        drag.s.mousedown( function( f ) {
                            f.preventDefault();
                            drag.s.data( { hold: false } );
                            var initial = drag.s.parent().offset().top - ( drag.s.offset().top - f.pageY );
                            $( document ).mousemove( function( e ) {
                                e.preventDefault();
                                if ( drag.s.data( "hold" ) == false )
                                {
                                  drag.s.css( { top: Math.min(Math.max(e.pageY - initial, -bounce), maxs[0]) } );
                                    drag.c.css( { top: Math.max(Math.min(- drag.tickB * ( e.pageY - initial ), drag.tickB * bounce), maxs[1]) } );
                                }
                            });
                        });
                        $( document ).mouseup( function() {
                            drag.redrawV();
                        });
                        drag.b.click( function( e ) {
                            if ( drag.s.data( "click" ) == false )
                            {
                                var initial = drag.s.parent().offset().top + ( drag.s.height() / 2 );
                                drag.s.animate( { top: e.pageY - initial } );
                                drag.c.animate( { top: - drag.tickB * ( e.pageY - initial ) }, {
                                    complete: function() {
                                        drag.redrawV();
                                    }
                                });
                            }
                        });
                    break;
                }
                $( "a" ).click( function() {
                    if ( $( this ).attr( "rel" ) )
                    {
                        drag.move( "#" + $( this ).attr( "rel" ), $( this ).attr( "parent" ) );
                    }
                });

                $( window ).resize( function() { //DD added event
                    drag.setdimensions(drag.d);
										var resetpos=( drag.d=="horizontal" )? {left: 0} : {top: 0}
										drag.c.css( resetpos )
                });

                $( window ).unload( function() {
                    drag.destroy();
                });
            },
            redrawV: function() {
                drag.s.data( { hold: true } );
                if ( drag.s.parent().height() < drag.s.position().top + drag.s.height() )
                {
                    drag.s.animate( { top: drag.s.parent().height() - drag.s.height() }, 250 );
                    drag.c.animate( { top: drag.s.parent().height() - drag.c.height() }, 250 );
                }
                else if ( drag.s.position().top < 0 )
                {
                    drag.s.animate( { top: 0 }, 250 );
                    drag.c.animate( { top: 0 }, 250 );
                }
            },
            redrawH: function() {
                drag.s.data( { hold: true } );
                if ( drag.s.parent().width() < drag.s.position().left + drag.s.width() )
                {
                    drag.s.animate( { left: drag.s.parent().width() - drag.s.width() }, 250 );
                    drag.c.animate( { left: drag.s.parent().width() - drag.c.width() }, 250 );
                }
                else if ( drag.s.position().left < 0 )
                {
                    drag.s.animate( { left: 0 }, 250 );
                    drag.c.animate( { left: 0 }, 250 );
                }
            },
            move: function( where, par ) {
                if ( drag.d == "vertical" && drag.t == par )
                {
                    if ( drag.tickC * $( where ).position().top > drag.s.parent().height() - drag.s.height() )
                    {
                        drag.s.animate( { top: drag.s.parent().height() - drag.s.height() }, { duration: 250 } );
                        drag.c.animate( { top: drag.s.parent().height() - drag.c.height() }, { duration: 250 } );
                    }
                    else
                    {
                        drag.s.animate( { top: drag.tickC * $( where ).position().top }, { duration: 250 } );
                        drag.c.animate( { top: - $( where ).position().top }, { duration: 250 } );
                    }
                }
                else if ( drag.d == "horizontal" && drag.t == par )
                {
                    if ( drag.tickC * $( where ).position().left > drag.s.parent().width() - drag.s.width() )
                    {
                        drag.s.animate( { left: drag.s.parent().width() - drag.s.width() }, { duration: 250 } );
                        drag.c.animate( { left: drag.s.parent().width() - drag.c.width() }, { duration: 250 } );
                    }
                    else
                    {
                        drag.s.animate( { left: drag.tickC * $( where ).position().left }, { duration: 250 } );
                        drag.c.animate( { left: - $( where ).position().left }, { duration: 250 } );
                    }
                }
            },
            elements: function( where ) {
                drag.id.css( { overflow: "hidden", position: "relative" } );
                drag.id.wrapInner( '<div class="' + drag.t + '-content"></div>' );
                drag.c = $( '.' + drag.t + '-content' );
                drag.id.append( '<div class="' + drag.t + '-bar"></div>' );
                drag.b = $( '.' + drag.t + '-bar' );
                drag.b.append( '<div class="' + drag.t + '-drag"></div>' );
                drag.s = $( '.' + drag.t + '-drag' );
            },
            destroy: function() {
                // What happens in DOM, stays in DOM. Unless...
                $( "*" ).each( function() {
                    $( this ).remove();
                });
            }
        };
        drag.create();
    });
};

AndrewGSW · 12-26-2012, 05:52 PM

Width is defined twice in here:

Code:

drag.s.css( { width: drag.b.width(), top: 0, width: 70,
                               height: drag.b.height(), position: "absolute", "z-index": 100 } );

BTW It would be easier to spot this if your lines weren't so wide. You can split them easily in JS (and HTML and CSS for that matter) as long as it is at a sensible position; e.g. after a comma.

Do you have a valid DOCTYPE declaration? And is your HTML validated? That is, it doesn't have any significant error? Either of these can cause problems, particularly with IE.

RainingNails · 12-26-2012, 11:35 PM

Thanks Andrew,

It is actually build into a Wordpress site with a custom theme so it is possible that this is the issue. When I validate I get the following errors which stand out a bit:

The tag: "Meta" has an XML style closing syntax for an empty element even though version "HTML20" is not a valid XML tag language
The tag: "Link" has an XML style closing syntax for an empty element even though version "HTML20" is not a valid XML tag language
The tag: "image" has an XML style closing syntax for an empty element even though version "HTML4" is not a valid XML tag language

Here is my DOCTYPE declaration:

<!DOCTYPE html>
<html dir="ltr" lang="en-US">

Sounds like either of these could be causing problems, but what would be ideal to change them to given that it is a WP site? Or might this not be a problem at all?

Old Pedant · 12-26-2012, 11:52 PM

Realistically, those errors shouldn't matter.

They are just telling you that you did something like

Code:

<link ...></link>

where the </link> is technically not allowed in HTML. But no browser that I know of will actually choke on that. Not even MSIE 9. (Can't speak for 10.)

AndrewGSW · 12-27-2012, 12:09 AM

Did you fix the width error that I identified?
Do you receive error messages in your browser's console?

Your css identifies scrollcontent1 as the rel attribute but the remainder of your css refers to the class-name scrollcontent1. Perhaps this is something to do with WordPress(?). I wouldn't know about WP..

RainingNails · 12-27-2012, 03:38 PM

Thanks for your help - I haven't received any error messages in the browser that are of any significance and I've fixed the javascript layout per Andrew's suggestions. I'm still seeing the error so I'm starting to think it might have more to do with a CSS/HTML incompatibility.

The rel="scrollcontent1" and class="scrollcontent1" similarity might not have been the best idea, so I'll try a different name for the class. The same name for both types is probably one of the oldest mistakes in the book. I'd laugh if that was the problem.

I'll keep my fingers crossed.