Ticket #5533: positionBug.html

File positionBug.html, 2.2 KB (added by epascarello, 12 years ago)

Example Code showing bug in IE

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3    <head>
4        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
5        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
6    </head>
7    <body>
8
9        <br/><br/><br/>
10        <br/><br/><br/>
11        <br/><br/><br/>
12        <br/><br/><br/>
13        <h1>Position Absolute Test</h1>
14       
15        <a href="#optsMenu1">test - no position set - Fails</a>
16        <div id="optsMenu1" style="position: absolute; width:100px;height:100px;border:1px solid #000; background: #CCC; display:none">TEST</div>
17        <br/>
18        <a href="#optsMenu2">test - left set - Fails</a>
19        <div id="optsMenu2" style="position: absolute; left: 0px;  width:100px;height:100px;border:1px solid #000; background: #DCC; display:none">TEST</div>
20        <br/>
21        <a href="#optsMenu3">test - top set - Passes</a>
22        <div id="optsMenu3" style="position: absolute; top: 0px; width:100px;height:100px;border:1px solid #000; background: #CDC; display:none">TEST</div>
23        <br/>
24        <a href="#optsMenu4">test - top and left set - Passes</a>
25        <div id="optsMenu4" style="position: absolute; top: 0px; left: 0px; width:100px;height:100px;border:1px solid #000; background: #CCD; display:none">TEST</div>
26        <br/>
27       
28        <script type="text/javascript">
29           
30            jQuery("a").click(
31                function(e){ 
32                   
33                    jQuery( this.hash ).css( "display", "block" )
34                                        .position({
35                                            my: "left top",
36                                            of: jQuery(this),
37                                            offset: "10px 10px",
38                                            at: "right bottom"
39                                        });
40                                       
41                    e.preventDefault();
42               
43                }
44            );
45           
46        </script>
47
48    </body>
49</html>