Hello HTML GURU'S, Need your help. I am working on one site and menu displays good in Firefox but IN Internet explorer it is not displaying Any advise? http://www.scriptimax.com/project/clarisia/ CSS #nav_light_blue { margin: 0; padding: 7px 6px 0; border-radius: 5px; height: 40px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -webkit-box-shadow: 0 1px 4px white; -moz-box-shadow: 0 1px 4px white; background: #32a3ba; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#74c8da', endColorstr='#32a3ba'); background: -webkit-gradient(linear, left top, left bottom, from(#74c8da), to(#32a3ba)); background: -moz-linear-gradient(top, #74c8da, #32a3ba); border: solid 1px #106779; } #nav_light_blue li { margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; } #nav_light_blue a { font-weight: bold; color: #ffffff; text-decoration: none; display: block; padding: 8px 20px; margin: 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #nav_light_blue small{ font-size: 12px; } #nav_light_blue .active a, #nav_light_blue li:hover > a { background: #106779; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#025364', endColorstr='#106779'); background: -webkit-gradient(linear, left top, left bottom, from(#025364), to(#106779)); background: -moz-linear-gradient(top, #025364, #106779); color: #fff; border: solid 1px #104a56; margin-right: -3px; margin-left: 1px; -webkit-box-shadow: 0 0 1px #d4f2f9; -moz-box-shadow: 0 0 1px #d4f2f9; box-shadow: 0 0 1px #d4f2f9; } #nav_light_blue ul li:hover a, #nav_light_blue li:hover li a { background: none; border: none; color: #ebebeb; -webkit-box-shadow: none; -moz-box-shadow: none; } #nav_light_blue ul li:hover > a { background: #abe8f5 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#abe8f5', endColorstr='#8dd1df'); background: -webkit-gradient(linear, left top, left bottom, from(#abe8f5), to(#8dd1df)) !important; background: -moz-linear-gradient(top, #abe8f5, #8dd1df) !important; color: #0a4a57 !important; border: solid 1px #e3f6fa !important; -webkit-box-shadow: 0 0 2px #092a35 !important; -moz-box-shadow: 0 0 2px #092a35 !important; box-shadow: 0 0 2px #092a35 !important; width: 120px; margin-left: -5px; } #nav_light_blue ul { background: #32a3ba; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#74c8da', endColorstr='#32a3ba'); background: -webkit-gradient(linear, left top, left bottom, from(#74c8da), to(#32a3ba)); background: -moz-linear-gradient(top, #74c8da, #32a3ba); display: none; margin: 0; padding: 0; width: 150px; position: absolute; top: 35px; left: 0; border: solid 1px #106779; -webkit-box-shadow: 0 1px 4px white; -moz-box-shadow: 0 1px 4px white; } #nav_light_blue li:hover > ul { display: block; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #nav_light_blue ul li { float: none; margin: 0; padding: 0; } #nav_light_blue ul a { font-weight: normal; } #nav_light_blue ul ul { left: 156px; top: -3px; } Code (markup): HTML <html> <head> <title>[Primary Keyword] Course [Additional related kewyord or two]</title> <link rel="stylesheet" type="text/css" href="css/nav_light_blue.css"/> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <META content="keyword 1, keyword 2, keyword 3, etc." name=keywords> <META content="Keyword-rich description go here." name=description> <style type="text/css"> <!-- .style30 { font-family: Tahoma; color: #CC0000; font-weight: bold; font-size: 22px; } .style18 { font-size: 11px; color: #666666; font-family: Arial, Helvetica, sans-serif; } .style27 { font-family: Tahoma; font-weight: bold; font-size: 18px; color: #CC0000; } .style119 {font-size: 14px; font-family: Arial, Helvetica, sans-serif;} .style122 { font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #CC0000; } .style123 {font-family: Arial, Helvetica, sans-serif} .style124 { font-size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } --> </style> </head> <body bgcolor="#F2f2f2" text="#000000" topmargin="15" leftmargin="0" rightmargin="0"> <div align="center"> <table width="700" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="7"><p><img height=68 src="images/clarisia.jpg" width=117 border=0></p> <p> </p> <!-- Start of menu------------------------------------- --> <!--STARTS light_blue--> <ul id="nav_light_blue"> <li class="active"><a href="http://www.clarisia.com/index.html"> CLARISIA HOME</a></li> <li><a href="https://store.kagi.com/?6FHJM_LIVE">PURCHASE</a> <ul> <li><a href="#">second level 1</a></li> <li><a href="#">second level 2</a> <ul> <li><a href="#"><small>third level 1</small></a></li> <li><a href="#"><small>third level 2</small></a> <ul> <li><a href="#"><small>fourth level 1</small></a></li> <li><a href="#"><small>fourth level 2</small></a></li> <li><a href="#"><small>fourth level 3</small></a></li> <li><a href="#"><small>fourth level 4</small></a></li> </ul> </li> <li><a href="#"><small>third level 3</small></a></li> </ul> </li> <li><a href="#">second level 3</a></li> </ul> </li> <li><a href="http://www.clarisia.com/download.html">DOWNLOAD</a> <ul> <li><a href="#">second level 1</a></li> <li><a href="#">second level 2</a> <ul> <li><a href="#"><small>third level 1</small></a></li> <li><a href="#"><small>third level 2</small></a> <ul> <li><a href="#"><small>fourth level 1</small></a></li> <li><a href="#"><small>fourth level 2</small></a></li> <li><a href="#"><small>fourth level 3</small></a></li> <li><a href="#"><small>fourth level 4</small></a></li> </ul> </li> <li><a href="#"><small>third level 3</small></a></li> </ul> </li> <li><a href="#">second level 3</a></li> </ul> </li> <li><a href="http://www.clarisia.com/documentation.html">DOCUMENTATION</a> <ul> <li><a href="#">second level 1</a></li> <li><a href="#">second level 2</a> </ul> </li> <li><a href="http://www.clarisia.com/contact.html">CONTACT</a> <ul> <li><a href="#">second level 1</a></li> <li><a href="#">second level 2</a> </ul> </li> </ul> <!-- end of menu------------------------------------- --> <p> </p> <table " width="800" border="0" cellspacing="2" cellpadding="2" bgcolor="#FFFFFF" ;> <tr> <td ><img src="images/topline.gif" width="999" height="17"></td> </tr> <tr> <td><h1 class="style30">Get reports from your data in an easy yet powerful new way.</h1> <h3>Your goal is to get your answers now, without waiting for a report designer, programmer, data warehouse expert, or database analyst. </h3> <h3>The Clarisia Browser works from your database as it is. </h3> <table width="100%" border="0" cellspacing="0" cellpadding="5" > <tr> <td width="59%" valign="top" class="style123"><p class="style123">Unlike other tools, the Clarisia Browser:</p> <ul> <li class="style123">Is easy for non-technical users <br> <br> </li> <li class="style123">Feels like a spreadsheet <br> <br> </li> <li class="style123">Is truly example-driven and data-driven <br> <br> </li> <li class="style123">Does not require any knowledge of tables, columns, or table relationships <br> <br> </li> <li class="style123">Lets you discover deep relationships in your database<br> <br> </li> <li class="style123">Is fully general: not at all dependent on the particulars of your database<br> <br> </li> <li class="style123">Is truly at your will: neither canned, predesigned, nor "coded": doesn't feel like coding</li> </ul></td> <td width="41%" valign="top"><table width="278" border="0" align="center" cellpadding="2" cellspacing="0" bordercolor="#CCCCCC" style="BORDER-COLLAPSE: collapse"> <tr> <td height="160"><table width="100%" border="0" align="center" cellpadding="6" cellspacing="0" bgcolor="#EEEEEE"> <tr> <td width="246"><div align="center" class="style27"><span class="style122">Easy for naive users!</span><b></div></td> </tr> <tr> <td><p class="style119"> </p> <p align="center" class="style119"><img src="images/3.gif" width="108" height="50"></p></td> </tr> <tr> <td><p align="center" class="style18"><img src="images/2.gif" width="208" height="38"></p></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> <tr> <td><img src="images/bottomline.gif" width="999" height="17"></td> </tr> </table> <p><br> </p> </tr> <tr> <td height="49"><div align="center"> </div></td> </tr> <tr> <td height="5"></td> </tr> </table> </td> </tr> </table> <p> </p> <hr width="100%" noshade> <p class="style18"><font face="Tahoma">© Copyright YourSite.com All Rights Reserved.</font><br> <a href="privacy.html" target="_blank">Privacy Policy</a> | <a href="contact.html" target="_blank">Contact Us</a></p> </div> </body> </html> Code (markup):
I found answer and it solved May be it was bad css coding. But in above html code i add <meta http-equiv="X-UA-Compatible" content="IE=8" /> in head area and it solved problem Still if you have any other suggestion please post it Thanks