SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    works in Firefox and Chrome but not IE

    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

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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


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

    Code:
    // 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

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,710
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Hi Bryan. Good news. This isn't a CSS issue. I've narrowed the issue down to this Javascript
    Code:
        <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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,710
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    For reference, to the JS gurus. It is indeed that script.

    http://www.sitepoint.com/forums/show...ome-but-not-IE
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,710
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,506
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Off Topic:

    Threads merged.

    Please do not post the same question in multiple forums. It's against the forum rules: http://www.sitepoint.com/forums/faq....q_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.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,467
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

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

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •