-2

Possible Duplicate:
Issue on IE7 when page is scrolling.Text is not proper

When i am scrolling the page the search button is not proper.I have used bootstrap here.

if i am reducing the font size and making the font-weight:normal its fine else i am doing the same in twitter bootstrap document same problem is coming.

enter image description here

HERE IS THE test server url

http://www.onetravel.com/travel/test/ot-bootstrap/index.html

please comment if not able to reproduce in ie7 :-) thanx in advance

Community
  • 1
  • 1
supersaiyan
  • 1,670
  • 5
  • 16
  • 36

1 Answers1

2

I was unable to reproduce in IE7(IE9 with Browser and Document Mode set to 7).

Please include more info or a reproducible example and I'd be happy to help.

EDIT:

It seems that when then mouse enters the page after scrolling, it redraws the button. Based on my browsing experience, it is hard to notice. I suggest to force it to redraw the button when it becomes visible.

This small jQuery method will handle that, although further optimizations can be made. Please test it and leave a comment if it needs adjustments.

$('#my-button').RedrawWhenVisible();

$.fn.RedrawWhenVisible = function()
{

    $(window).scroll(function() {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = this.offset().top;
        var elemBottom = elemTop + this.height();

        // If element is partially visible...
        if((elemBottom <= docViewBottom && elemBottom >= docViewTop) || (elemTop >= docViewTop && elemTop <= docViewBottom)) {
            //Redraw it, just once.
            if(this.attr('data-redraw')) {                
                this.hide().show();
                // Prevent further draws.
                this.removeAttr('data-redraw');
            }
        } else {
            // The element is not visible...
            if(!this.attr('data-redraw')) {
                // Flag it to redaw on scroll.
                this.attr('data-redraw','redraw');
            }
        }
    }
}

EDIT 2:

Since the other button is fine, I bet it's a very specific CSS issue. Double check all of the attributes for those CSS classes, the grey button is fine so check how that button differs from the Orange/Yellow one.

Community
  • 1
  • 1
Jim Buck
  • 2,383
  • 23
  • 42
  • just scroll the page a bit and check on ie7. I have added snapshot of output – supersaiyan Sep 07 '12 at 14:04
  • "I was unable to reproduce in IE7(IE9 with Browser and Document Mode set to 7)." IE9 set to IE7 mode isn't a totally accurate representation of a "real" IE7 installation. It's rare, but I've seen bugs that occur in one but not the other, and vice versa. – daGUY Sep 07 '12 at 15:22
  • Unless you have strict requirements to support IE7, it might be better to choose not to support IE7. IE7 only makes up [2% of the browser market](http://www.w3schools.com/browsers/browsers_explorer.asp), so there isn't a large portion of users that will find this error. You should consider your requirements and target audience to figure out whether or not you want to deal with IE7 moving forward (you will find more errors, trust me). – Jim Buck Sep 07 '12 at 17:22
  • actully i am working on on website and there conversn rate is 6.37 for ie7 so i cant ignore that :-( .. i am helpless in this case – supersaiyan Sep 07 '12 at 17:51
  • i have mention already if reducing the font-size then its fine and doing the font-weight:normal then its fine – supersaiyan Sep 07 '12 at 18:04
  • jackpott !!!!!!!!!!!!! i remove the overflow:visible from the "button" that is default in bootstrap css :-) thanx alot for help :-) – supersaiyan Sep 07 '12 at 18:11