Making a <div> overlay in IE6

Question

I'm using the following code to make a div overlay. If the links "login" or "register" are pressed then the div id="overlay" covers the page. The code uses jQuery.

It works fine in Firefox and Chrome, but it does not work in IE6.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <script type="text/javascript" src="jquery-ui-1.8.16.custom/development-bundle/jquery-1.6.2.js"></script>
    <title> </title>
</head>
<style>
    #overlay
    {
        position:absolute;
        width:100%;
        height:100%;
        top:0;
        left:0;
        bottom:0;
        right:0;
        background: #CCCCCC;
        z-index:100;
    }

    #log_in
    {
        height:25px;
        width:130px;
        float:right;
        color:#00000;
        line-height:1.7em;
        margin-top:0px;
    }

    .login,.register
    {
        color: #000000;
        font-size:14px;
        font-weight:bold;
    }
</style>
<body>
    <script type="text/javascript">
        $(function() {
            $('.login,.register').click (function() {
                $('#overlay').fadeIn('fast');
            });
            $('#overlay').click(function() {
                $(this).fadeOut('fast');
            });
        });
    </script>
    <div id="overlay" style="display:none; position:absolute"></div>
    <div id="log_in"><a href="#" class="login">Login</a> &brvbar; <a href="#" class="register" >Register </a></div>
    </div>
</body>
</html>

Answer 1

Not sure what is your problem; overlay not showing, or showing at the wrong place

but try this: Remove this

bottom:0;
right:0;

And add this :

body{height:100%;width:100%;}

Answer 2

You also have a malformed color code around line 28. #00000 needs another zero. I don't have IE6 to test.

Making a <div> overlay in IE6

Question

2 answers

solution1
1 ACCPTED 2011-11-08 20:36:13

solution2
1 2011-11-08 20:48:51

Making a <div> overlay in IE6

Question

2 answers

solution1 1 ACCPTED 2011-11-08 20:36:13

solution2 1 2011-11-08 20:48:51

solution1
1 ACCPTED 2011-11-08 20:36:13

solution2
1 2011-11-08 20:48:51