Search and Top Navigation
#5211 closed bug (notabug)
Opened February 22, 2010 05:08AM UTC
Closed March 10, 2010 04:13PM UTC
Last modified October 11, 2012 09:15PM UTC
Accordion Browser Compatibillity issues in IE 7.0
| Reported by: | Narendra Kumar | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | |
| Component: | ui.accordion | Version: | 1.7.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
1)We have used accordion functionality it works fine in mozilla 3.5.8 and fails in IE 7.0 version.
2)some of the lower some tabs are not displayed with
in the main tabs As we exapand/collapse multiple
times.
code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xykp</title>
<link type="text/css" href="../jquery-ui-1.7.custom/css/ui-lightness/jquery-ui-1.7.custom.css" rel="stylesheet" />
<script type="text/javascript" src="../jquery-ui-1.7.custom/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jquery-ui-1.7.custom/js/jquery-ui-1.7.custom.min.js"></script>
<!-- adding for subtabs--->
<script type="text/javascript" src="../Accordion/js/hoveraccordion.min.js"></script>
<link href="../Accordion/css/accordion.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(document).ready(function(){
$('#example1').hoverAccordion();
});
</script>
<script type="text/javascript">
$(function(){
Accordion
$("#accordion").accordion({ header: "h3",active:false,activateitem: 'true',keepheight:'true' });
hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
/*demo page css*/
body{ font: 72.5% "Trebuchet MS", sans-serif; margin: 20px;}
.demoHeaders { margin-top: 2em; }
#dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
#dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
ul#icons {margin: 0; padding: 0;}
ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;}
ul#icons span.ui-icon {float: left; margin: 0 4px;}
</style>
<style type="text/css">
a:link {color: #1c94c4} /* unvisited link */
a:visited {color:#1c94c4 } /* visited link */
a:hover {color: #eb8f00} /* mouse over link */
a:active {color: #eb8f00} /* selected link */
/* #1c94c4 bluish color,#eb8f00 goldspot*/
</style>
</head>
<body bgcolor="#EAEFF5">
<div id="accordion">
<div>
<h3><a href="#">XYZ</a></h3>
<div>
<ul>
<li><a href="#" target="b">1</a></li>
<li><a href="#" target="b">2</a></li>
<li><a href="#" target="b">3</a></li>
<li><a href="#" target="b">4</a></li>
<li><a href="#" target="b">5</a></li>
</ul>
</div>
</div>
<div>
<h3><a href="#">one</a></h3>
<div>
<ul>
<li><a href="#" target="b">1</a></li>
<li><a href="#" target="b">2</a></li>
<li><a href="#" target="b">3</a></li>
<li><a href="#" target="b">4</a></li>
<li><a href="#" target="b">5</a></li>
</ul>
</div>
</div>
<div>
<h3><a href="#">two</a></h3>
<div>
<ul>
<li><a href="#" target="b">1</a></li>
<li><a href="#" target="b">2</a></li>
<li><a href="#" target="b">3</a></li>
<li><a href="#" target="b">4</a></li>
<li><a href="#" target="b">5</a></li>
</ul>
</div>
</div>
<div>
<h3><a href="#">three</a></h3>
<div>
<ul>
<li><a href="#" target="b">1</a></li>
<li><a href="#" target="b">2</a></li>
<li><a href="#" target="b">3</a></li>
<li><a href="#" target="b">4</a></li>
<li><a href="#" target="b">5</a></li>
</ul>
</div>
</div>
<div>
<h3><a href="#">four</a></h3>
<div>
<ul>
<li><a href="#" target="b">1</a></li>
<li><a href="#" target="b">2</a></li>
<li><a href="#" target="b">3</a></li>
<li><a href="#" target="b">4</a></li>
<li><a href="#" target="b">5</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
This demo uses some custom hover accordion plugin.