Hi
I designed a page for my web site and included a vertical drop down menu on the index page. It works fine in chrome and safari where I tested but it is not working in IE 8 when tested. I tried to take guidance from some other forum posts but could not sort it out. I have, in fact, no knowledge of CSS. I request that somebody may help me out from this problem
Thanks.
Site URL: http://telugugreetings.net/new-index.html
Hi, pdurvasula. Welcome to the forums.
When you say the menu is not working, what do you mean? In what way is it not working? It drops down for me in IE8 although the motion is a bit jerky.
Dear ronpat
Thanks for the quick reply.
When I go to the site in IE8, it is completely blank and no error message.
Am able to access other urls without problem in IE8
Hi,
You seem to be linking to jquery twice in the head of the page.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
You should only link to jquery once.
These files are also missing so either remove the code or fix the links.
<link rel='stylesheet' type='text/css' href='../../telugugreetingcards.net/public_html/cssmenu/menu_source/styles.css' />
<script type='text/javascript' src='../../telugugreetingcards.net/public_html/cssmenu/menu_source/menu_jquery.js'></script>
This may have nothing to do with your problem but you need to eliminate the obvious first.
Hi
Thanks a lot Dear Paul and Dear Ronpat
Now I have made the necessary corrections as advised. The menu is functioning in Chrome perfectly well. In IE-8, I am able to open the dropdown sub menus but it immediately closes without allowing me to click a link.
Kindly have a look at this:
http://telugugreetings.net/testmenu.html
Thanks
Turn off “Compatibility View” and see if that helps.
And check your HTML code in the validator: http://validator.w3.org/
Hi,
I fixed the validation errors and changed a couple of rules and this seems to work in IE8 now.
<!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>Untitled Document</title>
<link href="/menu_source/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type='text/javascript' src='http://telugugreetings.net/menu_source/menu_jquery.js'></script>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);
/* Base Styles */
#cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: bold;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
#cssmenu {
width: 250px;
background: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 3px;
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
}
#cssmenu > ul > li {
margin: 0 0 2px 0;
font-size:15px;
}
#cssmenu > ul > li:last-child {
margin: 0;
}
#cssmenu > ul > li > a {
display: block;
color: #ffffff;
text-shadow: 0 1px 1px #000;
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
border: 1px solid #000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#cssmenu > ul > li > a > span {
display: block;
border: 1px solid #666666;
padding: 6px 10px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font-weight: bold;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
background: #97be10;
background: -moz-linear-gradient(#97be10 0%, #79980d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #97be10), color-stop(100%, #79980d));
background: -webkit-linear-gradient(#97be10 0%, #79980d 100%);
background: linear-gradient(#97be10 0%, #79980d 100%);
color: #fff;
text-shadow: 0 1px 1px #000;
border: 1px solid #79980d;
}
#cssmenu > ul > li.active > a span {
border: 1px solid #97be10;
}
#cssmenu > ul > li.has-sub > a span {
background: url(http://telugugreetings.net/menu_source/images/icon_plus.png) 98% center no-repeat;
}
#cssmenu > ul > li.has-sub.active > a span {
background: url(http://telugugreetings.net/menu_source/images/icon_minus.png) 98% center no-repeat;
}
/* Sub menu */
#cssmenu ul ul {
padding: 5px 12px;
display: none;
}
#cssmenu ul ul li {
padding: 3px 0;
}
#cssmenu ul ul a {
display: block;
color: #595959;
font-size: 13px;
font-weight: bold;
}
#cssmenu ul ul a:hover {
color: #58084f;
}
</style>
</head>
<body>
<div>
<table style="float: left">
<tr>
<td><table width="235" border="1" >
<tr>
<td><div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>పండుగలు</span></a>
<ul>
<li><a href="http://telugugreetings.net/newyear.htm">నూతన సంవత్సరం</a></li>
<li><a href="http://sankranti.telugugreetings.net/sankranti1.htm">సంక్రాంతి</a></li>
<li><a href="http://telugugreetings.net/vasantapanchami.htm">సరస్వతీపూజ</a></li>
<li><a href="http://telugugreetings.net/shivaratri.htm">మహాశివరాత్రి</a></li>
<li><a href="http://telugugreetings.net/holi.htm">హోలీ</a></li>
<li><a href="http://telugugreetings.net/ugadi.htm">ఉగాది</a></li>
<li><a href="http://telugugreetings.net/ramanavami.htm">శ్రీరామనవమ</a></li>
<li><a href="http://telugugreetings.net/hanumajjayanti.htm">హనుమజ్జయంత</a></li>
<li><a href="http://telugugreetings.net/buddha.htm">బుద్ధపూర్ణిమ</a></li>
<li><a href="http://telugugreetings.net/gurupurnima.htm">గురుపూర్ణిమ</a></li>
<li><a href="http://telugugreetings.net/republicday.htm">గణతంత్రదినోత్సవం</a></li>
<li><a href="http://telugugreetings.net/varalakshmi.htm">వరలక్ష్మీవ్రతం</a></li>
<li><a href="http://telugugreetings.net/ramzan.htm"> రంజాన్</a></li>
<li><a href="http://telugugreetings.net/rakhi.htm">రాఖీపౌర్ణమి</a></li>
<li><a href="http://telugugreetings.net/krishna.htm">శ్రీ కృష్ణాష్టమి</a></li>
<li><a href="http://telugugreetings.net/vinayaka.htm">వినాయకచవితి</a></li>
<li><a href="http://telugugreetings.net/vijayadasami.htm">విజయదశమ></a></li>
<li><a href="http://deepavali.telugugreetings.net/deepavali.htm">దీపావళి</a></li>
<li class='last'><a href='http://telugugreetings.net/christmas.htm'><span>క్రిస్టమస్</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>వార్షికోత్సవాలు</span></a>
<ul>
<li><a href="http://telugugreetings.net/republicday.htm">గణతంత్రదినోత్సవం</a></li>
<li><a href="http://telugugreetings.net/mayday.htm">కార్మికులదినోత్సవం</a></li>
<li><a href="http://telugugreetings.net/mothersday.htm">మాతృదినోత్స్వం</a></li>
<li><a href="http://telugugreetings.net/environment.htm">పర్యావరణదినోత్సవం</a></li>
<li><a href="http://telugugreetings.net/friendship.htm">స్నేహితులదినోత్సవం</a></li>
<li><a href="http://telugugreetings.net/indday.htm">స్వాతంత్రదినోత్సవం</a></li>
<li><a href="http://telugugreetings.net/teachersday.htm">ఉపాధ్యాయదినోత్సవం</a></li>
<li><a href="http://telugugreetings.net/andhrapradesh.htm">ఆ.ప్ర.ఆవిర్భావం</a></li>
<li class='last'><a href='http://telugugreetings.net/telangana.htm'>తె. ఆవిర్భావం</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>ప్రత్యేక రోజులు</span></a>
<ul>
<li><a href="http://birthday.telugugreetings.net">పుట్టినరోజు</a></li>
<li><a href="http://telugugreetings.net/.htm">షష్టిపూర్తి</a></li>
<li><a href="http://telugugreetings.net/upanayanam.htm">ఉపనయనం</a></li>
<li><a href="http://telugugreetings.net/engagement.htm">నిశ్చితార్ధం</a></li>
<li><a href="http://telugugreetings.net/marriage.htm">వివాహం</a></li>
<li><a href="http://telugugreetings.net/marriageday.htm">పెళ్ళిరోజు</a></li>
<li><a href="http://telugugreetings.net/retirement.htm">పదవీవిరమణ</a></li>
<li class='last'><a href='http://telugugreetings.net/gruhapravesam.htm'>గృహప్రవేశం</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>ప్రత్యేక సందర్భాలు</span></a>
<ul>
<li><a href="http://telugugreetings.net/prayanam.htm">ప్రయాణం</a></li>
<li><a href="http://telugugreetings.net/dhanyavadamulu.htm">ధన్యవాదములు</a></li>
<li><a href="http://telugugreetings.net/congrats.htm">అభినందనలు</a></li>
<li><a href="http://telugugreetings.net/subhodayam.htm">శుభోదయం</a></li>
<li><a href="http://telugugreetings.net/subhamastu.htm">శుభమస్తు</a></li>
<li><a href="http://telugugreetings.net/arogyamastu.htm">ఆరోగ్యమస్తు</a></li>
<li><a href="http://telugugreetings.net/sphoorti.htm">స్ఫూర్తి</a></li>
<li class='last'><a href="http://telugugreetings.net/jivitasatyalu.htm">జీవిత సత్యాలు</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>పద్యాలు,కవితలు-ఇంకా...</span></a>
<ul>
<li><a href="http://telugugreetings.net/vemana.htm">వేమన పద్యాలు</a></li>
<li><a href="http://telugugreetings.net/sumati.htm">సుమతి పద్యాలు</a></li>
<li><a href="http://telugugreetings.net/kavitalu-index.htm">కవితలతో</a></li>
<li><a href="http://telugugreetings.net/flowercards.htm">పువ్వులు</a></li>
<li><a href="http://telugugreetings.net/naturalcards.htm">ప్రకృతి</a></li>
<li><a href="http://telugugreetings.net/birdcards.htm">పక్షులు</a></li>
<li><a href="http://telugugreetings.net/bapucartoons3.htm">కార్టూన్స్</a></li>
<li class='last'><a href="http://telugugreetings.net/andalaandhra.htm">అందాల ఆంధ్రప్రదేశ్</a></li>
</ul>
</li>
<li><a href='#'><span>ఆడియో: పద్యాలు కీర్తణలు</span></a></li>
<li class='last'><a href='#'><span>Location</span></a></li>
<li class='active'><a href='#'><span>Contact</span></a> </li>
</ul>
</div></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
Once you are sure it works move the css to replace your external file etc.
Dear Paul
I tried the revised code but in IE 8 which I am using the drop down menu opens and closes automatically. In chrome it is ok as usual. The link with the modified code given by you is at
http://telugugreetings.net/sitepoint-1.html
Thanks
Hi,
Your old styles are still leaking through so comment this line out while testing.
<link href="/menu_source/styles.css" rel="stylesheet" type="text/css" />