Form input IE glitch
Hej Eksperter!Jeg er ved at strikke en hjemmeside sammen, da jeg falder over en finurlig ting.
I alle browsere bortset fra MSIE.7.6.5... kan jeg klikke på et input for at aktivere det.
I MSIE vil den dog kun aktivere vis jeg klikker på inputtets border, og altså ikke som man må forvente i selve input-feltet.
Da jeg ikke regner med at det er standard opførsel for selv MSIE, går jeg ud fra at der må være noget i mit CSS, der falder uheldigt sammen med en glitch i MSIE's rendering engine.
Min side validerer xhtml1.1 og jeg har tjekket at MSIE ikke falder tilbage i quirksmode.
Jeg har forsøgt mig med forskellige værdier af z-index uden held.
Håber en af jer har oplevet noget lignene før og har en idé til at løse det. Helst uden special-hacks vis det kan undgås. Ellers må jeg jo pakke det ind i en conditional-comment.
Relevant html:
<div id="frame">
<span id="frame_ul"></span>
<span id="frame_u"></span>
<span id="frame_ur"></span>
<span id="frame_l"></span>
<div id="frame_r">
<span id="frame_r_layout"></span>
<span id="frame_dr"></span>
<div id="info">
<div id="user">
Not Logged in!
<form id="logon" name="login" action="?action=login" method="post" onsubmit="return loginTest(this)">
<div>
Username:
<input type="text" name="username" value="" />
Password:
<input type="password" name="password" />
<input type="hidden" name="saltedpass" value="" />
<input type="hidden" name="randomsalt" value="Q2zxUavphF" />
<input type="submit" value="Log ind" />
</div>
</form>
</div>
</div>
</div>
</div>
Relevant CSS:
#framework {position: absolute; margin: 0; padding: 0; width: 100%; height:100%; z-index: 0;}
#frame {position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;}
#frame span {position: absolute; margin: 0px; padding: 0px; z-index: 1000;}
#frame #frame_ul {width: 240px; height: 135px; top: 0px; left: 0px; background: url(/images/frame_ul.png) no-repeat;}
#frame #frame_u {height: 59px; top: 0px; left: 240px; right: 170px; background: url(/images/frame_u.png) repeat-x;}
#frame #frame_ur {width: 170px; height: 80px; top: 0px; right: 0px; background: url(/images/frame_ur.png) no-repeat;}
#frame #frame_l {width: 49px; top: 135px; bottom: 0px; left: 0px; background: url(/images/frame_l.png) repeat-y;}
#frame #frame_r {position: absolute; top: 80px; right: 0px; width: 125px; z-index: 1000;}
#frame #frame_r #frame_r_layout {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: url(/images/frame_r.png) repeat-y;}
#frame #frame_r #info {position: relative; top: -40px; margin-bottom: -60px; width: 85px; left: 10px; font-size: 8pt; z-index: 1100;}
#frame #frame_r #frame_dr {position: absolute; width: 125px; height: 64px; bottom: -64px; left: 0px; background: url(/images/frame_dr.png) no-repeat;}
#user {}
#user form {margin: 0px; padding: 0px;}
#user #logon input {margin: 0px 0px 5px 0px; padding: 0px; width: 85px; background-color: #bbbbbb;}
Miqe
