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

OwenBrotherwood opened this Issue Jul 12, 2011 · 7 comments


None yet

3 participants


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:

  • 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 ...

        <link rel="stylesheet" href="" />
        <script src=""></script>
        <script src=""></script>
        <script type="text/javascript" language="javascript"> 
                $('#listView').append('<li><a href="">one</a></li><li><a href="">one</a></li>');
                $('#search').live('keyup', function(event){
                    $('#listView').append('<li><a href="">one</a></li><li><a href="">one</a></li>');
        <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>
                    <input type="search" name="search" id="search" data-linkType="search">
                <ul data-role="listview" data-inset="true" id="listView">
                    <!-- listview area -->

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.


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..


Result so far: a css change caused the issue.
The addittion of " height: 100%;" to
solves the problem....
A fiddle with !important style in-line @

Plus I asked the forum to see if anyone can see problems @

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
<  * 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
< .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; }

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 Jul 14, 2011

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 commented Jul 14, 2011

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 Jul 15, 2011

Thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment