Side navigation
Ticket #6224: bug.html
File bug.html, 1.2 KB (added by hughbiquitous, March 04, 2010 06:38PM UTC)
Click on "Tab 2" in IE8; results in an attempt to set "display" style to "0px"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<style>
#tabs li { display: inline-block; padding: 10px; background-color: #ccc; margin: 0px 2px 0px 0px}
#tabs { list-display-type: none; padding: 0; margin: 0 }
.panel { display: none; }
.panel.visible { display: block }
</style>
</head>
<body>
<ul id="tabs">
<li panel="d1">Tab 1</li>
<li panel="d2">Tab 2</li>
</ul>
<div id="d1" class="panel visible" style="background-color:#f00;padding:20px">Div 1</div>
<div id="d2" class="panel" style="background-color:#00f;padding:20px">Div 2</div>
<script type="text/javascript">
$().ready(function() {
$("#tabs li")
.css("cursor", "pointer")
.click(function() {
$(".panel:visible").fadeOut(200);
$("#" + $(this).attr("panel")).delay(200).animate({ "opacity": "toggle", "display": "toggle" }, 200);
})
});
</script>
</body>
</html>
Download in other formats:
Original Format
File bug.html, 1.2 KB (added by hughbiquitous, March 04, 2010 06:38PM UTC)
Click on "Tab 2" in IE8; results in an attempt to set "display" style to "0px"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<style>
#tabs li { display: inline-block; padding: 10px; background-color: #ccc; margin: 0px 2px 0px 0px}
#tabs { list-display-type: none; padding: 0; margin: 0 }
.panel { display: none; }
.panel.visible { display: block }
</style>
</head>
<body>
<ul id="tabs">
<li panel="d1">Tab 1</li>
<li panel="d2">Tab 2</li>
</ul>
<div id="d1" class="panel visible" style="background-color:#f00;padding:20px">Div 1</div>
<div id="d2" class="panel" style="background-color:#00f;padding:20px">Div 2</div>
<script type="text/javascript">
$().ready(function() {
$("#tabs li")
.css("cursor", "pointer")
.click(function() {
$(".panel:visible").fadeOut(200);
$("#" + $(this).attr("panel")).delay(200).animate({ "opacity": "toggle", "display": "toggle" }, 200);
})
});
</script>
</body>
</html>