This week's book giveaways are in the Java EE and JavaScript forums.
We're giving away four copies each of The Java EE 7 Tutorial Volume 1 or Volume 2(winners choice) and jQuery UI in Action and have the authors on-line!
See this thread and this one for details.
The moose likes HTML, CSS and JavaScript and the fly likes I am finding difficulty in using CSS with IE. Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of The Java EE 7 Tutorial Volume 1 or Volume 2 this week in the Java EE forum
or jQuery UI in Action in the JavaScript forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "I am finding difficulty in using CSS with IE." Watch "I am finding difficulty in using CSS with IE." New topic
Author

I am finding difficulty in using CSS with IE.

Rekha Pai
Ranch Hand

Joined: Oct 30, 2008
Posts: 35
Hi,
I have used CSS to display a list and hide sublist. The sublist is to be displayed on hovering over the list item.
This works fine with Mozilla, FireFox. But the sublist does not get hidden in Internet Explorer.
I am giving the code below.

Regards,
Rekha.

My code :

<!DOCTYPE HTML PUBLIC "_//W3C//DTD HTML 4.01 Transitional//EN"
<html>
<head>
<title> Internal Webpage </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Mozilla/4.78[en] (Windowns Nt 5.0; U) [Netscape]">
<script>
function setAction(){
document.dictForm.action="http://dictionary.cambridge.org/results.asp?searchword="+document.dictForm.searchword.value;
document.dictForm.submit();
}
</script>
<style>
ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}

ul.nav{
display: table;
}
ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}

ul.nav li>ul{
/*Make the sub list items invisible*/
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
top: auto;
left: auto;
}

ul.nav li:hover>ul {
/*When hovered, make them appear*/
display : block;
}
ul.nav>li:hover {
padding-right: 1px;
}
.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
display: block;
padding: 2px 10px;
}

/*** Menu colors (customizable) ***/

ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}


ul.nav li:hover,
.nav ul li a:hover {
background-color: #369;
color: #fff;
}

ul.nav li:active,
.nav ul li a:active {
background-color: #036;
color: #fff;
}
ul.nav,
.nav ul{
border: 1px solid #369;
}

.nav a{
text-decoration: none;
}

</style>
<!--[if lte IE 8]>
<style type="text/css">
body {background-color: pink;}
ul.nav li>ul{
display:none;
}
ul.nav li>ul.hover {
display:block;
}
li a {
display:inline-block;
}
nav.ul li {
display:none;
}
nav.ul li ul li a:hover {
display:block;
}
li {
margin-bottom: -2px;
}
</style>
<![endif]-->
</head>
<body style="background-color:#E0E0E0">

<h1> <center> <font size=+2 color="#330099" face="Times">Internal Webpage</center> </font> </h1>
<br> 

<DIV align=center>
<ul class="nav">
<table><tr><td>
<li><strong><a href=#>MIS<!--[if gte IE 7]><!--></a><!--<![endif]--></strong>
<!--[if lte IE 6]><table width=2><tr><td><![endif]-->
<ul>
<li> <a href="./index.jsp">Management Information System(MIS)</a>
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>
</td><td>
<li><strong>HR Resources<!--[if gte IE 7]><!--></strong><!--<![endif]-->
<!--[if lte IE 6]><table width=10><tr><td><![endif]-->
<ul>
<li><a href="./greytip.in/">Greytip Login</a>
<li> <a href="./PhoneBook.jsp">Employee List</a>
<li><a href="./RewardsSummary.jsp">Employee Rewards</a></li>
<li> <a href="./GoalSettingSummary.jsp">PMS Summary Report</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</td>
<!--
<li><strong>Finance Resources</strong>
<ul>
<li><a href="./html/finance/travel_expense_reports.html">Travel Expense Form</a></li>
<li> <a href="./html/finance/expense_stmt_official.xls">Misc. Official Expense Form</a></li>
<li><a href="./html/finance/medical_reimbursement.xls">Medical Reimbursement Form</a></li>
<li><a href="./html/finance/Salary_advance_form.xls">Salary Advance Request Form</a></li>
</ul>
</li>
<li><strong>Quality Resources</strong>
<ul>
<li><a href="./html/TQM/project_planning_process.htm">Project Planning Process</a></li>
<li><a href="./html/TQM/abbr_project_def.doc">Abbreviated Project Definition</a></li>
<li><a href="./html/TQM/release_procedure.doc">Release Procedure</a></li>
<li><a href="./html/TQM/req_specs_template.doc">Requirement Specification</a></li>
<li><a href="./html/TQM/post_project_analysis.doc">Post Project Analysis</a></li>
<li><a href="./html/TQM/customer_feedback_form.doc">Customer Feedback Form</a></li>
<li><a href="./html/TQM/doc_rev_checklist.doc">Document Review Checklist</a></li>
</ul>
</li>
-->
</ul>
</tr></table>
</DIV>

<center><table COLS=2 WIDTH="80%">


<tr>
<td>
<ul TYPE=SQUARE>
<li> <a href="index.jsp">Management Information System(MIS)</a></li>
</td>
<td>
<li><a href="news_announce.html"> News/Announcements</a></li>
</td>

</ul>
</tr>


<tr>
<td>
<ul TYPE=SQUARE>
<li> <a href="hrpersonnel.htm">HR Resources</a></li>
</td>

<td>
<li> <a href="html/holidays.html">Holiday List - 2009</a></li>
</td>
</ul>
</tr>

<tr>
<td>
<ul TYPE=SQUARE>
<li> <a href="html/finance/Finance.htm">Finance Resources</a></li>
</td>
<td>
<li><a href="html/KSS/KSS.html">KSS Presentation</a></li>
</td>

</ul>
</tr>

<tr>
<td>
<ul TYPE=SQUARE>
<li> <a href="html/TQM/TQM_page.html">Quality Resources</a></li>
</td>
<td>
<li> <a href="html/training/training_page.html">Training Resources</a></li>
</td>


</ul>
</tr>

<tr>
<td>
<ul TYPE=SQUARE>
<li> <a href="html/tech/tech_resource_page.html">Technical Resources</a></li>
</td>
<td>
<li><a href="miscellaneous.htm">Miscellaneous</a></li>
</td>

</ul>
</tr>
</table>

<ul> 
<table BORDER=0 CELLSPACING=1 CELLPADDING=3 WIDTH="150" style="border-style: solid; border-width:
1px; border-color: #E0E0E0;"align=left>

<tr>
<td><a href="http://dictionary.cambridge.org/"><img SRC="html/sitesearch_header.gif" ALT="Cambridge Dictionaries Online" BORDER=0 height=30 width=169></a></td>
</tr>

<tr>
<td>
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="150" ></td></tr>
<tr>
<td NOWRAP>
<!--
<form name="dictForm" action="http://dictionary.cambridge.org/results.asp"
method="post" onsubmit='javascript:setAction();'><input type="text"
name="searchword" size="10" style="width: 100px; font-size: 12px; font-face: Verdana, Arial,
sans-serif;"><input type="image" src="http://dictionary.cambridge.org/assets/common/buttons/search/search_FFFFFF.gif"border="0">
<input type="hidden" name="dict"
value="B"></form>
-->
</td></tr>
</table>
</ul>
</body>
</html>

Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Please use code tags when posting code so it is easier to read.

IE has issues with CSS only menus and that is why I would rely on JavaScript to make it work.

Eric
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: I am finding difficulty in using CSS with IE.