Chrome + jQuery hide/show inline
I have these things
<ul class="ul_std" style="float:right"> <li class="action_buttons" ><a id="button_deleteNormal" class="button_small button_small_red" >Διαγραφή</a></li> <li class="action_buttons"><a id="button_editCancel" class="button_small" >Ακύρωση Τροποποίησης</a></li> <li class="action_buttons"><a id="button_editNormal" class="button_small" >Τροποποίηση</a></li> <li class="action_buttons" style="margin-right:0" ><a id="button_addNormal" class="button_small">Προσθήκη</a></li> </ul>
The problem is that i hide all of them except the anchor with id = button_addNormal at $(document).ready()... Everything works fine but at chrome when i want to show them ,it displays them as display:inline and not as display:inline-block ... The css class button_small have display:inline-block....
Firefox,IE 6+ works ok... Havent tested on safari but i hope that it would be ok...
Why chrome kills inline-block? The solution was to put .css("display","inline-block") instead of .show()
I write a web store system in jsp, and a catch this error in last week. I think this problem is a caching problem, because a code works in Users.jsp, and same code not in Subjects.jsp. Both code work in FF, IE, Opera. Sometimes it works, sometimes not. Use hide('slow'), it's same solution...
I can't reproduce this in chrome (at least in latest and 5.0.356.2 beta) based on your question. See a working demo here on jsFiddle.
When I hide all but the last one with $('ul li a:not(#button_addNormal)').hide(); and show them all again, it comes back as inline-block. I tested in jQuery 1.3.2, 1.4.2, and nightly, same result (also tested/working in latest stable chrome: 220.127.116.112).
Something else is breaking this in your page, hard to say what without the rest of the code.
Use $("#something").css("display", "block"); instead of show. (or inline-block)