Jump to content

Ie7 Error: The Submenu Is Covered By Another Element


tinfanide
 Share

Recommended Posts

<!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>English Department Website</title><style>body {    margin: 0;    padding: 0;        }body a {    outline: 0;}    div#menu ul {    margin: 0 auto;    width: 1280px;    height: 40px;    line-height: 40px;    background: #330000;    }    div#menu li {    list-style: none;    float: right;    position: relative;    }div#menu ul li a {    text-align: center;    height: 40px;    width: 200px;    display: block;    color: #FFFFFF;    text-decoration: none;    text-shadow: 1px 1px 1px #000;    }div#menu ul ul {    display: none;    position: absolute;    width: 600px;    height: 40px;    top: 40px;    right: 0px;    z-index: 9999;}div#menu ul li:hover ul {    display: block;    z-index: 9999;}div#menu ul ul ul {    width: 300px;    height: 40px;    position: absolute;    left: 0;    top: 40px;    }div#menu ul ul ul li {    float: none;    background: #330000;    }div#menu ul li ul li ul li a {    width: 300px;    height: 40px;    }div#wrapper {    width: 1280px;    margin: 0 auto;    background: #FFF;    }div.table {    width: 520px;    height: 514px;    background: #FFF;    border: 1px solid #F9C;    position: absolute;    top: 49px;    left: 1074px;    z-index: 1;    }div.title {    background: #F9C;    height: 32px;    font-size: 24px;    text-align: center;    }    div.content>div {    text-align: left;    padding: 3px;    text-indent: 110px;    font-weight: bold;    text-decoration: underline;    font-size: 18px;    color: #000000;}td.td {    text-align: center;    font-weight: bold;    text-decoration: underline;    font-size: 16px;    }table {    width: 520px;    color: #000000;}table td {    font-size: 14px;    text-align: center;    padding: 2px;    }tr td:first-child {    text-align: left;}</style></head><body><div id="menuBackground"><div id="menu">    <ul>         <li><a href="#" >TESTING</a><a href="#" #" javascript: showUsefulLinks()"></a></li>        <li><a href="#" >TESTING</a>	        <ul>		        <li><a href="#">TESTING</a></li>		        <li><a href="#">TESTING</a></li>		        <li><a href="#">TESTING</a></li>		    </ul>	    </li>           <li><a href="#" >TESTING</a>			 <ul>			    <li><a href="#">TESTING</a></li>			    <li><a href="#" target="_blank">TESTING</a>				    <ul>					    <li><a href="#">TESTING</a></li>					    <li><a href="#">TESTING</a></li>					    <li><a href="#">TESTING</a></li>                        <li><a href="#">TESTING</a></li>	     				    </ul>							    			    </li>			 </ul>	    </li>        <li><a href="#" >TESTING</a>		    <ul>		        <li><a href="#" target="_blank">TESTING</a></li>		        <li><a href="#" target="_blank">TESTING</a></li>		        <li><a href="#" target="_blank">TESTING</a></li> 		    </ul>	    </li>        <li><a href="#" >TESTING</a></li>    </ul></div></div><div id="wrapper"><div id="content"><div class="table"><div class="title">TESTING</div><div class="content"><div>TESTING</div><table>    <tr>	  <td class="td" colspan="2">TESTING</td>	  <td class="td"  colspan="1"> </td>    </tr>  <tr>    <td>TESTING</td>    <td> </td>    <td width="85"> </td>  </tr>  <tr>    <td>TESTING</td>    <td> </td>    <td> </td>  </tr>  <tr>    <td>TESTING</td>    <td> </td>    <td> </td>  </tr>  <tr>    <td>TESTING</td>    <td> </td>    <td> </td>  </tr>  <tr>    <td>TESTING</td>    <td> </td>    <td> </td>  </tr>  <tr>    <td>TESTING</td>    <td> </td>    <td> </td>  </tr>  <tr>    <td>TESTING</td>    <td> </td>    <td> </td>  </tr>  <tr>    <td>TESTING</td>    <td> </td>    <td> </td>      </tr>  <tr>    <td>TESTING</td>    <td> </td>    <td> </td>      </tr>  <tr>    <td>TESTING</td>    <td> </td>    <td> </td>      </tr>  <tr>    <td>TESTING</td>    <td> </td>    <td> </td>      </tr>  <tr>    <td>TESTING</td>    <td> </td>    <td> </td>      </tr></table></div></div></div></div></div></body></html> </style></head><body><div id="menuBackground"><div id="menu"><ul>	  <li><a href="#" #" javascript: showUsefulLinks()">Testing</a></li>  <li><a href="#" >English Activities</a>		 <ul>			 <li><a href="#">S1 English Briding Program</a></li>			 <li><a href="#">English Cafe Board</a></li>			 <li><a href="#">Speech Festival Choral Practice</a></li>			</ul>		</li>	 <li><a href="#" >Students' Works</a>			 <ul>				<li><a href="#">Students' Creative Works</a></li>				<li><a href="#" target="_blank">Writing Contest Works</a>					<ul>						<li><a href="#">Writing Contest Sample 1</a></li>						<li><a href="#">Writing Contest Sample 2</a></li>						<li><a href="#">Writing Contest Sample 3</a></li>	  <li><a href="#">Writing Contest Sample 4</a></li>							</ul>							  				</li>			 </ul>		</li>  <li><a href="#" >Teachers' Development</a>			<ul>			 <li><a href="#" target="_blank">CCC School's English Sharing session (0809)</a></li>			 <li><a href="#" target="_blank">ILLIPS Plenary Sharing Session (0809)</a></li>			 <li><a href="#" target="_blank">ILLIPS Reflection(0809)</a></li> 			</ul>		</li>  <li><a href="#" >About Us</a></li></ul></div></div><div id="wrapper"><div id="content"><div class="table"><div class="title">TESTING</div><div class="content"><div>TESTING</div><table>	<tr>	  <td class="td" colspan="2">TESTING</td>	  <td class="td"  colspan="1"> </td>	</tr>  <tr>	<td>TESTING</td>	<td> </td>	<td width="85"> </td>  </tr>  <tr>	<td>TESTING</td>	<td> </td>	<td> </td>  </tr>  <tr>	<td>TESTING</td>	<td> </td>	<td> </td>  </tr>  <tr>	<td>TESTING</td>	<td> </td>	<td> </td>  </tr>  <tr>	<td>TESTING</td>	<td> </td>	<td> </td>  </tr>  <tr>	<td>TESTING</td>	<td> </td>	<td> </td>  </tr>  <tr>	<td>TESTING</td>	<td> </td>	<td> </td>  </tr>  <tr>	<td>TESTING</td>	<td> </td>	<td> </td>    </tr>  <tr>	<td>TESTING</td>	<td> </td>	<td> </td>    </tr>  <tr>	<td>TESTING</td>	<td> </td>	<td> </td>    </tr>  <tr>	<td>TESTING</td>	<td> </td>	<td> </td>    </tr>  <tr>	<td>TESTING</td>	<td> </td>	<td> </td>    </tr></table></div></div></body></html>

In IE7, the submenu is hidden by another element, even though I've set the z-index butit does not happen in IE8+.Any fix for that?

Edited by Tin
Link to comment
Share on other sites

Finally I think I've reached a solution that is again about z-index.For IE7 and FF3+,z-index (higher stack order) has to be set on the parent element,in this case, it is

<style>div#menuBackground {    width: 100%;    height: 40px;    position: relative;    left: 0;    background: #330000;    z-index: 9999;    }</style><div id="menuBackground">// menu here...</div>

I missed this id styling in my sample code.A mess in CSS.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...