I have a strange problem with font rendering in firefox and chrome. In chrome the font seems to be slightly large (not so apparent though). Due to that it comes in another line. The screenshots are attached below (First image is chrome, second is firefox).
I'm using bootstrap 3.3.6, font-awesome 4.6.1, jquery-1.11.2.min.js and prettyphoto in the page.
I'm using font-size:16px (Also I tried 1em), font-weight: 400, text-rendering: optimizelegibility, line-height:1.6 for the 'p' tag
and font-family:Arial,Helvetica,sans-serif, and font-style :normal inherited from the 'body'
the 3 columns are col-md-4 of bootstrap, and the layout in firebug and developer toolbar shows it has a width of 310px which should be (with 15px padding).
CSS is like this
body{ color:#333;cursor:default;font-family:Arial,Helvetica,sans-serif;font-style:normal;font-weight:400;line-height:22px;position:relative;margin:0; background:#153b5d url(../img/bg.png) repeat-x;}
p{font-family:inherit;font-size:1em;font-weight:400;line-height:1.6;text-rendering:optimizelegibility;}
Could anybody please tell me what I am doing wrong. Thanks.
Edit: I'm trying to put this as a snippet.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<style>
*,
a:hover,
a:active,
a:focus {
outline: 0;
}
body {
color: #333;
cursor: default;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: 400;
line-height: 22px;
position: relative;
margin: 0;
background: #153b5d url(../img/bg.png) repeat-x;
font-size: 16px;
}
p {} .container {
background: #FFF;
max-width: 1020px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4">
<p>For a long lasting freshness feeling; Removes stubborn odour from textiles.</p>
</div>
<div class="col-md-4">
<p>Unpretty deo and sweat stains on your shirt?
<br>Now Dr. Beckmann stain spray deo & sweat provides a way out.</p>
</div>
<div class="col-md-4">
<p>Every stain is different; For each stain the perfect specialist.</p>
</div>
</div>
</div>