Skip to content
This repository

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

Closed
OwenBrotherwood opened this Issue · 7 comments

3 participants

Owen Brotherwood Scott Jehl Todd Parker
Owen Brotherwood

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>
Todd Parker

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.

Owen Brotherwood

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

Owen Brotherwood

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; }
Todd Parker

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!

Owen Brotherwood

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.

Deleted user
ghost commented

The content you are editing has changed. Reload the page and try again.

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

Sending Request…

Attach images by dragging & dropping or selecting them. Octocat-spinner-32 Uploading your images… Unfortunately, we don't support that file type. Try again with a PNG, GIF, or JPG. Yowza, that's a big file. Try again with an image file smaller than 10MB. This browser doesn't support image attachments. We recommend updating to the latest Internet Explorer, Google Chrome, or Firefox. Something went really wrong, and we can't process that image. Try again.

Scott Jehl scottjehl closed this in affd609
Owen Brotherwood

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.