|
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:
IE9
Here in Chrome:
Chrome
Any suggestions or help would be way cool!
Thanks,
Mary
|
|
|
|
|
Hello Mary,
Looking at the pictures, to me it just looks like the buttons in chrome are center aligned and the buttons in ie are left aligned.
What is the styling in your style "Well"?
And did you try
<div style="text-align: center;">
instead of
<div class="well">
|
|
|
|