Problem in ie but not chrome and fireofx

Can someone please look at this page and figure our why it isn’t looking right in Internet Explorer? It looks fine in Chrome and Firefox but in IE the layout of the photos gets messed up specifically the two photos on the right hand side of the page.

http://waldrondigitaldesigns.com/gallery.html

Thanks
Bryan

Can someone please look at this page and figure our why it isn’t looking right in Internet Explorer? It looks fine in Chrome and Firefox but in IE the layout of the photos gets messed up specifically the two photos on the right hand side of the page.
[URL=“http://waldrondigitaldesigns.com/gallery.html”]
http://waldrondigitaldesigns.com/gallery.html

I am assuming it something with this script but I am no javascript or jquery expert and barely a novice

// wrap as a jQuery plugin and pass jQuery in to our anoymous function
    (function ($) {
        $.fn.cross = function (options) {
            return this.each(function (i) {
                // cache the copy of jQuery(this) - the start image
                var $$ = $(this);

                // get the target from the backgroundImage + regexp
                var target = $$.css('backgroundImage').replace(/^url|[\\(\\)'"]/g, '');

                // nice long chain: wrap img element in span
                $$.wrap('<span style="position: relative;"></span>')
                    // change selector to parent - i.e. newly created span
                    .parent()
                    // prepend a new image inside the span
                    .prepend('<img>')
                    // change the selector to the newly created image
                    .find(':first-child')
                    // set the image to the target
                    .attr('src', target);

                // the CSS styling of the start image needs to be handled
                // differently for different browsers
                if ($.browser.msie || $.browser.mozilla) {
                    $$.css({
                        'position' : 'absolute',
                        'left' : 0,
                        'background' : '',
                        'top' : this.offsetTop
                    });
                } else if ($.browser.opera && $.browser.version < 9.5) {
                    // Browser sniffing is bad - however opera < 9.5 has a render bug
                    // so this is required to get around it we can't apply the 'top' : 0
                    // separately because Mozilla strips the style set originally somehow...
                    $$.css({
                        'position' : 'absolute',
                        'left' : 0,
                        'background' : '',
                        'top' : "0"
                    });
                } else { // Safari
                    $$.css({
                        'position' : 'absolute',
                        'left' : 0,
                        'background' : ''
                    });
                }

                // similar effect as single image technique, except using .animate
                // which will handle the fading up from the right opacity for us
                $$.hover(function () {
                    $$.stop().animate({
                        opacity: 0
                    }, 450);
                }, function () {
                    $$.stop().animate({
                        opacity: 1
                    }, 1000);
                });
            });
        };

    })(jQuery);

    // note that this uses the .bind('load') on the window object, rather than $(document).ready()
    // because .ready() fires before the images have loaded, but we need to fire *after* because
    // our code relies on the dimensions of the images already in place.
    $(window).bind('load', function () {
        $('img.fade').cross();
    });

Thanks
Bryan

Hi Bryan. Good news. This isn’t a CSS issue. I’ve narrowed the issue down to this Javascript

    <script type="text/javascript">    <!--


    // wrap as a jQuery plugin and pass jQuery in to our anoymous function
    (function ($) {
        $.fn.cross = function (options) {
            return this.each(function (i) { 
                // cache the copy of jQuery(this) - the start image
                var $$ = $(this);
                
                // get the target from the backgroundImage + regexp
                var target = $$.css('backgroundImage').replace(/^url|[\\(\\)'"]/g, '');


                // nice long chain: wrap img element in span
                $$.wrap('<span style="position: relative;"></span>')
                    // change selector to parent - i.e. newly created span
                    .parent()
                    // prepend a new image inside the span
                    .prepend('<img>')
                    // change the selector to the newly created image
                    .find(':first-child')
                    // set the image to the target
                    .attr('src', target);


                // the CSS styling of the start image needs to be handled
                // differently for different browsers
                if ($.browser.msie || $.browser.mozilla) {
                    $$.css({
                        'position' : 'absolute', 
                        'left' : 0,
                        'background' : '',
                        'top' : this.offsetTop
                    });
                } else if ($.browser.opera && $.browser.version < 9.5) {
                    // Browser sniffing is bad - however opera < 9.5 has a render bug 
                    // so this is required to get around it we can't apply the 'top' : 0 
                    // separately because Mozilla strips the style set originally somehow...                    
                    $$.css({
                        'position' : 'absolute', 
                        'left' : 0,
                        'background' : '',
                        'top' : "0"
                    });
                } else { // Safari
                    $$.css({
                        'position' : 'absolute', 
                        'left' : 0,
                        'background' : ''
                    });
                }


                // similar effect as single image technique, except using .animate 
                // which will handle the fading up from the right opacity for us
                $$.hover(function () {
                    $$.stop().animate({
                        opacity: 0
                    }, 450);
                }, function () {
                    $$.stop().animate({
                        opacity: 1
                    }, 1000);
                });
            });
        };
        
    })(jQuery);
    
    // note that this uses the .bind('load') on the window object, rather than $(document).ready() 
    // because .ready() fires before the images have loaded, but we need to fire *after* because
    // our code relies on the dimensions of the images already in place.
    $(window).bind('load', function () {
        $('img.fade').cross();
    });
    
    //-->
    </script>

When that’s taken out. The page is fine.

I’ll request this to be moved to the Javascript forum. Have a good day :). They will sort you out.

For reference, to the JS gurus. It is indeed that script.

Thanks! I did post it in that forum as well because I wasn’t sure if it was a css or javascript problem. Hopefully I didn’t end up having it posted twice. Sorry for the confusion.

I reported this thread to the moderators and asked for a move, but it seems it’s not needed anymore because you just made a new thread. Whatever works for you :). You did double post the thread. One of these threads (probably this) will be closed or something. Or it’ll just die. Dunno. It’s no big deal.

[OT]Threads merged.

Please do not post the same question in multiple forums. It’s against the forum rules: http://www.sitepoint.com/forums/faq.php?faq=etiquette#faq_crossposting
Post it once where you think is suited best. Then, if the need occurs, you can use the report button (the orange flag to the left of each post) to ask the moderators to move it to another forum.[/ot]

Hi,

Change the script to include display:inline-block on the span as IE likes the element to be more substantial when placing things in relation to it.


 // nice long chain: wrap img element in span
                $$.wrap('<span style="position: relative;[B]display:inline-block[/B]"></span>')

Thank you very much! That seemed to fix it. Had to change one more thing but everything is working great. Sorry for the double post. I should have checked the javascript before I posted it twice.