Question

I have not posted on any forums before… I generally try to figure problems out myself. But there is an issue I am having on a website that is really annoying me.

Here is the site: http://fortiswebsystems.com/

Problem: When a button on the navbar is clicked, the background image jumps down and eases up. I do not want this. I have tested it in Chrome, IE, and Firefox, all with same results.

I have been messing around with firebug trying to fix it. I think it is a CSS bug caused by the jQuery animate css function “changePage”. Here is the function:

function changePage ( page )
                {
                    if( $('#logo').attr('class') != 'small' )
                        {

                            $('#logo').animate ({
                                    'margin-top': '-250px',
                                    'margin-left': '-250px',
                                    height: '150px',
                                    width: '150px'
                                } , 2000 , 'easeOutBounce' , function () {
                                $('#logo').attr('class','small');
                            });
                            $('#content-flying-page').css({ 
                                    'display' : 'block' , 
                                    '-ms-filter' : "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)",
                                    'filter' : 'alpha(opacity=0)',
                                    'opacity' : '0'
                                }).animate ({
                                    '-ms-filter' : "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)",
                                    'filter' : 'alpha(opacity=100)',
                                    'opacity' : '1'
                                }, 2000 );
                        }
                        $("#content-active").fadeOut(500);
                        $.get( 'index.php' , 'ajaxPage=' + page , function (data) {
                            $("#content-active").fadeOut(500, function(){
                            $("#content-active").html(data).fadeIn(500);
                            $("#content-active").append('<div style="display:none;" id="curpage">' + page + '</div>' );
                        });
                        });
                }

I believe it has something to do with the negative margins in the #logo.

It’s a small bug, but it annoys me. Thank you for your help!

Answer 1

If you set your background image’s position to:

background-position: top right;

..rather than just to the right, it seems to work fine.