Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

IE7 : in some cases, li element text does not show until mouseover #2058

Closed
OwenBrotherwood opened this Issue · 7 comments

3 participants

@OwenBrotherwood

IE7 seems to have a problem with list items text: in some cases the text only shows if one moves the mouse over the elements.

The fiddle shows 2 li's appended after pagecreate, and then 2 more li's are created after a keyup event.
The last 2 li's have the problem: the text only appears when one moves the mouse over the li elements.

I have managed to create a minimum of code for the fiddle from my app: http://jsfiddle.net/b7czf/1
Note:

  • removing the anchor markup in the li, allows the text to be displayed.

Hope someone has a brainwave, as, although the web app I have made is for mobile, it is also viewed internally with the IE 7 that is used at the company: I hate having to explain one just has to move the mouse over the elements ...

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
        <script src="http://code.jquery.com/jquery-1.6.2.js"></script>
        <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
        <script type="text/javascript" language="javascript"> 
        $(document).ready(function(){
            $('#appPage').live('pagecreate',function(){
                $('#listView').append('<li><a href="">one</a></li><li><a href="">one</a></li>');
                $('#listView').listview('refresh');    
                $('#search').live('keyup', function(event){
                    $('#listView').append('<li><a href="">one</a></li><li><a href="">one</a></li>');
                    $('#listView').listview('refresh');                    
                });    
            });
        });
        </script>           
    </head>
    <body>
        <div data-role="page" id="appPage" >
            <div data-role="content">
                Shows on start, 2 li items.<p>
                Input something in search, and 2 more li are appended<p>
                The second pair of li text do not show in IE7, only after moving mouse over will the text appear<p>
                <center>
                    <input type="search" name="search" id="search" data-linkType="search">
                </center>
                <ul data-role="listview" data-inset="true" id="listView">
                    <!-- listview area -->
                </ul>
            </div>
        </div>
    </body>
</html>
@toddparker

These sound like typical IE rendering bugs like the peek a boo or haslayout. We'll take a look, but it's pretty low priority so you might want to hack something in there for "jiggle the handle" for IE for now. Can't wait for IE 10.

@OwenBrotherwood

:)
yes, hope ie7 dies soon.
If there are more hints to look for a fix, I Will try. The area of code maybe be around the anchor element.
At least the issue is now documented for possible inclusion in browser notes.
I Will try and make notes so that they can be used for all the ie notes I have found recently..

@OwenBrotherwood

Result so far: a css change caused the issue.
The addittion of " height: 100%;" to
.ui-btn-inner
solves the problem....
A fiddle with !important style in-line @ http://jsfiddle.net/b7czf/3/

Plus I asked the forum to see if anyone can see problems @ http://forum.jquery.com/topic/ie7-in-some-cases-li-element-text-does-not-show-until-mouseover

Using nightly builds, the issue was not present 20110608 but appeared 20110609

However, using 08 for css and 09 for js did not show issue: issue turns up with 09 css
Git Info SHA1: 5512c8a Date: Wed Jun 8 18:12:42 2011 -0400
Git Info SHA1: 3ca8f35 Date: Thu Jun 9 13:24:36 2011 -0700

So now to find the diffs ...

ob@wjn001021-nodejs:~/jquery-mobile/themes/default$ diff 08 09
3c3
<  * Git Info SHA1: 5512c8af02e70b6a3fe20813ed2deba69b983a01 Date: Wed Jun 8 18:12:42 2011 -0400
---
>  * Git Info SHA1: 3ca8f35ca232d4a487a35fd531b51e53f6536b9d Date: Thu Jun 9 13:24:36 2011 -0700
1403c1403
< .ui-btn-inner { padding: .6em 25px; display: block; height: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; }
---
> .ui-btn-inner { padding: .6em 25px; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; }
@toddparker

Ah, I see. The problem is that was causing the buttons to be 100% of the height of the screen during transitions on some platforms. We took this rule out, but we figured it was there for a reason. Tough spot. Maybe we can have this rule in, but nix it during transitions? IE is so buggy!

@scottjehl scottjehl was assigned
@OwenBrotherwood

Keep as low. You guys have enough.
Although supported, ie7 is a pain.
Better to document problems, with possible solutions than holding up the mobile development.
At some stage, take a look at installed base of ie7 and the problems and either document or fix at some stage.

@ghost

Agreed, we should not be wasting time with IE7, this is a relatively new toolkit and a such we shouldnt be targetting dead browsers. Look at SenchaTouch that doesnt even support IE or FF. Move on foward..

@scottjehl scottjehl closed this in affd609
@OwenBrotherwood

Thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.