| Summary: | css z-index for <input> and <textarea> within <p> <div> etc not layered properly | ||
|---|---|---|---|
| Product: | [Applications] konqueror | Reporter: | Nathan <EBYKKRFHZDUK> |
| Component: | khtml | Assignee: | Konqueror Developers <konq-bugs> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | normal | ||
| Priority: | NOR | ||
| Version: | 4.0 | ||
| Target Milestone: | --- | ||
| Platform: | Compiled Sources | ||
| OS: | FreeBSD | ||
| Latest Commit: | Version Fixed In: | ||
Version: 4.0 (using KDE 3.1.2) Installed from: compiled sources Compiler: gcc version 3.2.2 [FreeBSD] 20030205 (release) OS: FreeBSD (i386) release 5.1-RELEASE Buggy Behavior: The buttons and text fields in paragraphs of lower z-index show through the paragraphs of higher z-index. Expected Behavior: Buttons and text fields in paragraphs of lower z-index should be hidden by the paragraphs/divs with the higher z-index. This example renders correctly in IE6,Opera7, Mozilla 1.5. In the included example, clicking on the different colored boxes will hide them so you can explore how they are rendering. Here are the files to reproduce the bug. the zindex_bug.css file: #p4 {position:absolute; top:5%; left:6%; width:20%; height: 10em; z-index:6; background-color:#00CCFF;} #p3 {position:absolute; top:8%; left:10%; width:30%; height:5em; z-index:5; background-color:#FFFF00;} #p2{position:absolute; top:15%; left:5%; width:15%; height: 10em; z-index:4; background-color:#33FF66;} #p1 {position:absolute; top:10%; left:15%; width:40%; height: 10em; z-index:3; background-color:#FF99FF; } the zindex_bug.html file: <html> <head><title>test</title> <script type="text/javascript"> function hide(id){ id.style.visibility="hidden"; } </script> <link href="zindex_bug.css" rel="stylesheet" type="text/css"> </head> <body> <p id="p4" onclick="hide(this)"> 4 </p> <p id="p3" onclick="hide(this)"> 3<input type="text" value="fdsa" size="8" /> </p> <p id="p2" onclick="hide(this)"> 2<input type="button" value="qwrty" /> </p> <p id="p1" onclick="hide(this)"> 1 <input type="button" value="button" /> </p> </body> </html>