<select> element problem inside popup

Discussion in 'HTML & Website Design' started by volynetsv, Jul 4, 2008.

  1. #1
    Hello. I have a small problem, here's code:

    <!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>iframe popup (JS)</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div align="center" style="width:">
    some text---------------------------------------------------------------------------------;<br/>
    some text---------------------------------------------------------------------------------;<br/>
    <!-- Code -->
    <div class="button">Move your corsor over here
    <div style="display:block; position:relative"><!-- Use this div to show Frame under our button. Also we can use <iframe></iframe> --></div>
    <!-- Frame content -->
    <div class="frame">
    <form action="test.php" method="post" name="coolstf">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td><img src="logo01.jpg" alt="Logo Test" /></td>
    <td align="left">Some text; Some text; Some text;</td>
    </tr>
    </table>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td align="center">Header</td>
    </tr>
    <tr>
    <td align="center">Please select:&nbsp;&nbsp;&nbsp;<select name="select"><option value="0" selected="selected">All</option><option value="1">1</option><option value="2">2</option></select></td>
    </tr>
    <tr>
    <td align="center">Please enter:&nbsp;&nbsp;&nbsp;<input name="text1" type="text" maxlength="16" /></td>
    </tr>
    <tr>
    <td align="center">Please choose:&nbsp;&nbsp;&nbsp;<input name="r1" type="radio" value="" /><input name="r1" type="radio" value="" /><input name="r1" type="radio" value="" /><input name="r1" type="radio" value="" /></td>
    </tr>
    <tr>
    <td align="center">Please check:&nbsp;&nbsp;&nbsp;<input name="c1" type="checkbox" value="" /></td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    </tr>
    </table>
    <br/>
    <input name="submit" type="submit" value="PROCEED" />
    </form>
    </div>
    <!-- -->
    </div>
    <!-- -->
    some text---------------------------------------------------------------------------------;<br/>
    some text---------------------------------------------------------------------------------;<br/>
    </div>
    </body>
    </html>

    CSS:

    @charset "utf-8";
    .button {
    margin: 0px;
    padding: 0px;
    text-align: left;
    width: 180px;
    background-color: #CCCCCC;
    }

    .button:hover .frame {
    visibility: visible;
    }
    .frame {
    display: block;
    visibility: hidden;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    position: absolute;
    padding: 5px;
    width: 250px;
    height: auto;
    }
    .frame:hover {
    visibility: visible;
    }

    And my problem is when i try to select an option from <select> element my popup disapears in ie7. Works fine for FireFox and Opera. Thanks.
     
    volynetsv, Jul 4, 2008 IP