Bug Tracker

Ticket #5541: example-1.html

File example-1.html, 1.6 KB (added by Abro, November 21, 2009 06:19PM UTC)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <title>jQuery Bug Example</title>

    <style type="text/css">
      *
      {
        margin              : 0;
        padding             : 0;
      }
      /*
      * here's the problem:
      * if we set this to [content:none;] everything is fine,
      * but then we could just leave it out ;O)
      */
      :before,:after
      { content             : '';             }
      input
      { border              : 5px solid #f00; }
      .hide-css
      { display             : none;           }

      /*this is just foo*/
      body
      { text-align          : center; }
      p
      { margin-bottom       : 1em;    }
      .box
      {
        border              : 1px solid #ff8;
        width               : 200px;
        height              : 20px;
        margin              : 0 auto 20px auto;
      }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      jQuery(function($)
      {
        $('.hide-js').hide();
      });
    </script>
  </head>
  <body>


    <p>You should see a red dot in the yellow box @ Opera 9.63 / Win</p>

    <p>Via CSS "display:none;" : </p>
    <div class="box"><input class="hide-css" type="password" value="" /></div>

    <p>Via jQuery "$el.hide();" : </p>
    <div class="box"><input class="hide-js" type="password" value="" /></div>


  </body>
</html>

Download in other formats:

Original Format