Jump to content

Ie7 Error: The Submenu Is Covered By Another Element

tinfanide

By tinfanide
in CSS

Recommended Posts

tinfanide Member

tinfanide

Posted
Posted 
<!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?

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted

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

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...