jquery: simule z-index to place divs over select objects (explorer bug)


/ Published in: JavaScript
Save to your folder(s)

using bgiframe to solve a bug in explorer: you cannot apply z-index to place divs over selects in a form!!!


Copy this code and paste it in your HTML
  1. INSIDE THE HEAD
  2. ......................................................................
  3. <script type="text/javascript" src="http://brandonaaron.net/jquery/plugins/bgiframe/jquery.bgiframe.js"></script>
  4.  
  5. <script type="text/javascript">
  6. $(function() {
  7. $('#box').bgiframe();
  8. });
  9. </script>
  10.  
  11. <style type="text/css" media="screen">
  12. form { position: absolute; top: 0; left: 0; width: 100%; }
  13. select { position: relative; width: 100%; margin: 0 0 2px; z-index: 1; }
  14. .box { position: relative; z-index: 2; float: left; margin: 5px; border: 5px solid #666; padding: 5px; width: 250px; height: 100px; color: #000; background-color: #999; }
  15. </style>
  16.  
  17.  
  18. HTML
  19. ......................................................................
  20. <form action="#" method="get" accept-charset="utf-8">
  21. <select name="test"><option>valor 1</option></select>
  22. <select name="test"><option>valor 2</option></select>
  23. <select name="test"><option>valor 3</option></select>
  24. </form>
  25. <div id="box" class="box">contenido del box</div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.