New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
OwenBrotherwood opened this Issue Jul 12, 2011 · 8 comments

Comments

Projects
None yet
4 participants
@OwenBrotherwood

OwenBrotherwood commented Jul 12, 2011

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jul 12, 2011

Contributor

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.

Contributor

toddparker commented Jul 12, 2011

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

This comment has been minimized.

Show comment
Hide comment
@OwenBrotherwood

OwenBrotherwood Jul 12, 2011

:)
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 commented Jul 12, 2011

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

This comment has been minimized.

Show comment
Hide comment
@OwenBrotherwood

OwenBrotherwood Jul 14, 2011

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

OwenBrotherwood commented Jul 14, 2011

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

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Jul 14, 2011

Contributor

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!

Contributor

toddparker commented Jul 14, 2011

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!

@ghost ghost assigned scottjehl Jul 14, 2011

@OwenBrotherwood

This comment has been minimized.

Show comment
Hide comment
@OwenBrotherwood

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

OwenBrotherwood commented 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

This comment has been minimized.

Show comment
Hide comment
@ghost

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

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

@OwenBrotherwood

This comment has been minimized.

Show comment
Hide comment
@OwenBrotherwood

OwenBrotherwood commented Jul 16, 2011

Thanks :)

@pimkle

This comment has been minimized.

Show comment
Hide comment
@pimkle

pimkle Jun 28, 2017

in slideDown callback, I added $('xxx li').css('height', '100%'), which works, css height 100% doesn't work

pimkle commented Jun 28, 2017

in slideDown callback, I added $('xxx li').css('height', '100%'), which works, css height 100% doesn't work

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