two tables with position:absolute issue
I'm having two table elements, both with position: absolute style. First table is responsible for some kind of layout stuff, has width: 100%, while second displays a few input controls, and has width: 400px and is centered.
In IE I run into issue: first table seems to cover second table, for instance I can't set focus into my input elements using mouse. Also when I play with Developer Tools, and try to inspect input element, by clicking on it, the element which actually gets inspected is first table element. I have to use TAB to set focus into input element.
Everything works fine in FF & Chrome & Opera.
Any idea what's going on? I've tried to play with z-index: not helped.
Thanks
EDIT: those are tables:
table 1
<table width="250" id="loginbox" style="z-index: 1001; position: absolute; left: 706.5px; top: 150px;">
<tbody>
<tr>
<td>Username:</td>
<td width="150" style="text-align: right;">
<input type="text" style="width: 150px;" class="brandBorder" id="username" name="username">
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" style="width: 150px;" class="brandBorder" id="password" name="password">
</td>
</tr>
<tr>
<td align="right" colspan="2">
<input type="submit" class="button" id="LoginButton" value="Login" name="LoginButton">
</td>
</tr>
<tr>
<td align="center" colspan="2">
<br>
<br>
<span class="error" id="msg"></span>
</td>
</tr>
</tbody>
table 2
<table style="right: 0px; left: 0px; margin: 0px; width: 100%; position: absolute; top: 0px;">
<tbody><tr>
<td style="background-image: url('login-tbg.gif'); width: 499px; background-repeat: repeat-x; height: 60px;">
<img border="0" src="login-lt.gif">
</td>
<td align="left" style="background-image: url('login-tbg.gif'); width: 30%; background-repeat: repeat-x; height: 60px;">
</td>
<td style="background-image: url('login-tbg.gif'); width: 15px; background-repeat: repeat-x; height: 60px;">
<img border="0" src="login-tm.gif">
</td>
<td align="right" style="background-image: url('login-tr.gif'); width: 30%; background-repeat: repeat-x; height: 60px;">
<br>
<img border="0" src="login-right.gif">
</td>
</tr>
开发者_JAVA技巧 <tr style="height: 99%;">
<td valign="top" align="center" style="height: 99%;" colspan="3">
</td>
<td class="loginsidebar">
</td>
</tr>
</tbody>
And those tables are sitting next to each other in form element. Please, don't tell me that it should be made on DIV etc... :) I know it :)
Are you declaring a doctype? i.e.:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
See http://en.wikipedia.org/wiki/Quirks_mode#Triggering_different_rendering_modes
加载中,请稍侯......
精彩评论