Hi
i have an issue with the twitter bootstrap popover.
I am using Asp.net visual studio 2005.
I have downloaded and installed the most recent package
(twitter-bootstrap-v2.2.0-2-g3b3dd3a)
I made a simple html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Popover with placement option Example</title>
<meta name="description" content="Creating Modal Window with Twitter
Bootstrap">
<link href="twitter-bootstrap/docs/assets/css/bootstrap.css"
rel="stylesheet">
<style>
a {
margin-left : 400px;
}
</style>
</head>
<body>
<div class="container">
<h2>Example of creating Popover with Twitter Bootstrap with placement
option</h2>
<div class="well">
<a href="#" id="example" class="btn btn-success" rel="popover"
data-content="It's so simple to create a tooltip for my website!"
data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
<div class="well">
<a href="#" id="example_left" class="btn btn-success" rel="popover"
data-content="It's so simple to create a tooltop for my website!"
data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
<div class="well">
<a href="#" id="example_top" class="btn btn-success" rel="popover"
data-content="It's so simple to create a tooltop for my website!"
data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
<div class="well">
<a href="#" id="example_bottom" class="btn btn-success" rel="popover"
data-content="It's so simple to create a tooltop for my website!"
data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
</div>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";></script>
<script type="text/javascript"
src="twitter-bootstrap/js/bootstrap-tooltip.js"></script>
<script type="text/javascript"
src="twitter-bootstrap/js/bootstrap-popover.js"></script>
<script type="text/javascript">
$(function ()
{ $("#example").popover();
$("#example_left").popover({placement:'left'});
$("#example_top").popover({placement:'top'});
$("#example_bottom").popover({placement:'bottom'});
});
</script>
</body>
</html>
The problem is that, using IE 9, the buttons aren't formatted properly,
while in Chrome they appear just fine
Here how they are displayed in IE9:
http://imageshack.us/photo/my-images/191/stampchrome.jpg
Here in Chrome:
http://imageshack.us/photo/my-images/5/stampie9.jpg
Any suggestions or help would be way cool!
Thanks
Mary
