Menu
There are two buttons on simple html page with attached twitter-bootstrap 2/3: with and without text.
If I open it, button without text has wrong smaller height (See screenshot below).
How comes it? Same situation repeats in IE 9\10. But if run in jsfiddle, all is fine. Even if i add a button in manualy via developer toolbar in some page with TB in internet all is ok.
P.S.: same thing with bootstrap 2...
<html>
<head>
<link rel="stylesheet" type="text/css" href="http//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<a class="btn btn-danger" href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a>
<a class="btn btn-primary" href="#"><span class="glyphicon glyphicon-pencil"></span></a>
</body>
</html>
What am I doing wrong?
820
The cause is "<!DOCTYPE html>" first string. It must be set as writter above for html 5.
If it doesn't exists or it has html 4 description ("PUBLIC etc") this error occurs.
164
The font is different from Arial to Glyphicons (the font used for icons) this causes the difference.
To fix this, you may add a space ( ) to your button, after the span, to get the expected height, or you may fix it be increasing the font-size for the button.
Edit:
You also may increase line-height to fix this with adding anything
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
