Is it possible to achieve line-height consistency in all browsers?
I have attached an image. You will notice a red rectangular box and a green rectangular box (both of the same width and height) which I have added via photoshop manually to aid in showing the the space/gap difference between the dotted lines (below the red box) and the "Followers: 3197179" text.
It seems that Firefox is the only one that is displaying the elements differently. I notice this when I apply a line-height. Any way I can make this consistent with all browsers?
I am using Firefox 3.6.13, Safari 5.0.3, Opera 10.63 and Chrome 8.0.552.231.
.clearfix,
.container {
display: block;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
position: relative;
margin: 0 0 0 0;
padding: 12px 0;
border-bottom: 1px dotted #E7E7E7;
}
li img {
float: left;
margin-top: 0;
}
li p {
margin: 0 0 0 58px;
padding: 0;
font-weight: normal;
border: none;
font-size: 1em;
line-height: 1.3em;
}
li p.name {
position: relative;
padding-top: 0;
font-size: 1.1em;
font-weight: bold;
}
<ul>
<li class="clearfix">
<img width="50" src="http://localhost:3000/images/foobar.gif" alt="thumb">
<p class="name">
Jessica Simpson
</p>
<p>Blurred out text here</p>
<p>Followers: 3197179</p>
</li>
</ul>
Your currently using em's. Maybe you can try to be more specific by trying to use px in both line-height and font-size. Also try to use padding in those texts, maybe it'll work, I think ;).
In any cross browser thing you do. There's is no concrete way of doing things to make it same on every renderer. It's always a dream that most client's don't understand. For me, it's better to always explain to them what they want and how much time we spend in things like 1px/2px differences. It's plain normal. You may check this video by Andy Clarke speaking about cross browser and some other cool stuff.
Are you using a CSS reset? These help alleviate most of the cross-browser issues. Meyer Web has a popular one: http://meyerweb.com/eric/tools/css/reset/
You can add line-height for Mozilla only, by using:
#-moz-document url-prefix() {
*, body {
line-height: [as per your requirement];
}
}
Have you specified any common rules? e.g:
* {
margin: 0;
padding: 0;
}
body {
font-size: 100%;
line-height: 1;
}
Sometimes it's helpful, even without full reset.css approach.
It might be how the font is being rendered. Try using this as a font family.
font-family:"Arial Unicode MS","Lucida Sans Unicode";
Related
Check out this code sample of a button and an anchor: http://jsbin.com/ecitex/2/edit
I'm trying to make them identical in all browsers. But differences remain, and different differences in every browser (tried Chrome, Safari, Firefox, IE8).
Which CSS normalizations am I missing?
Update:
Per suggested:
I added line-height: 50px (although my user agent's (Chrome's) default line-height for button elements is normal, and still it vertically centers text – how?!)
I added cursor: pointer to normalize mouse cursors.
http://jsbin.com/ecitex/11/edit
So, now check out the result in Firefox: notice the padding on the button?
Then check out the result in IE8: whoa, notice how the two are completely and utterly different?!
Update 2:
It seems that IE's problems are known and non-resolvable: http://www.quirksmode.org/css/tests/mozie_button2.html
I haven't found anything on Firefox's padding though. (The quirksmode article mentions an issue with Mozilla, but that's a different issue.)
Update 3:
Awesome, we fixed the Firefox issue: http://jsbin.com/ecitex/15/edit
Okay, so far every single answer has been providing part of the solution so there's not really one single best answer. I'll grant the best answer to the person that either:
Explains why we have to specify a line-height: 50px to vertically center text in an a, while a button has vertically centered text with a mere line-height: normal.
Provides a solution for the IE issue.
You can remove that extra padding in Firefox by using:
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Here's a good explanation from Eric Meyer about line height which hopefully explains why you need to explicitly set it as 50px: http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/.
Here's some new CSS that fixes the font size issue in IE:
button, a {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 10px 0;
padding: 0px;
height: 50px;
border-width: 0;
background-color: Red;
color: White;
font-family: sans-serif;
font-weight: normal;
font-size: inherit;
text-decoration: none;
line-height: 50px;
cursor: pointer;
font-size: 100%;
}
button {
#width:0px;
overflow: visible;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
You need to use line-height property to bring your anchor tag text vertically centered
Demo
CSS
button, a {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 10px 0;
padding: 0;
height: 50px;
border-width: 0;
background-color: Red;
color: White;
font-family: sans-serif;
font-weight: normal;
font-size: inherit;
text-decoration: none;
line-height: 50px; <-------- Here
}
add the attribute cursor:pointer; in order to add a pointer when the mouse is hover (the input not always have it)
and at last use line-height:46px; for the vertical align
the full code is here -> http://jsbin.com/ecitex/10/edit
On iOS 8, I'm overlaying a div with a textarea, with the same text and resetting every margin/padding values, but there's still an offset of 3px that I can't get rid of. It works great on Chrome and Safari desktop.
Here's a fiddle: http://jsfiddle.net/jfvz0ved/
textarea, div {
position: absolute;
top: 0;
left: 0;
font-size: 1.1em;
line-height: 1.6em;
font-family: Courrier;
border: 0;
outline: 0;
padding: 0;
margin: 0;
background: transparent;
display: block;
text-align: left;
resize: none;
width: 100%;
color: black;
opacity: 0.4;
}
Any idea what property could cause this issue? I don't want to resort to a browser detection + special class if possible.
What happens when you apply a universal CSS reset?
If that fixes the problem, then one of the containing elements might need to be reset.
After quite a bit of research, it turns out iOS is adding a 3px padding and it can't (apparently) be removed. So the best way to go about it is to compensate for it. I've added a left: 3px on the div when iOS is detected. It's not ideal (I'd have loved to avoid that and have a CSS only solution), but it works.
I am encountering a peculiar text behavior with different browsers. I cannot say which browser of the 3 is acting peculiar. Before I give out the details of my problem let me illustrate the issue I am encountering..
Outputs::
layout format::
Now the corresponding css codes are as follows::
#feature_links_inner_block {
width: 205px;
height: 390px;
margin: 0 auto;
}
#side_nav_links {
width: 99%;
height: 375px;
margin: 0 auto;
}
.one_third_side_nav_block {
width: 100%;
height: 125px;
}
.one_third_side_nav_block h4 {
margin: 3px 0px 0px;
padding: 0;
font-family: "marcellus sc";
font-size: 19px;
color: #f1d000;
text-align: center;
}
.one_third_side_nav_block img {
float: left;
margin: 1px 3px 0px 1px;
}
.one_third_side_nav_block p {
margin: 3px 0px 5px 0px;
font-family: "trebuchet ms",Arimo, sans-serif;
font-size: 14px;
color: #fff;
}
HTML::
<div id="feature_links_inner_block">
<div id="side_nav_links">
....
<a href="news_media_blurbs.html">
<div class="one_third_side_nav_block white_bottom_border">
<h4>News, Media & Blurbs</h4>
<img src="../Images/png/apply.png" alt="News and Media image" />
<p>What is happening now?</p>
</div>
</a>
...
</div>
</div>
I am trying to figure out what is causing this to happen. Its the same code but rendered different. I have tried to look at the computed values in each browser but they all seem to be the same. If anyone wants it i have the computed values of chrome and firefox copied as a text file.
Ideally I want the final output to look like the chrome output. This is just a small part of the page. I have other sections in the page which runs into similar issue.
Is chrome rendering correctly and the rest 2 not? or is it the other way around?
Any help is appreciated. Thanks in advance
Addendum::: I forgot to mention that I am using HTML5-Boilerplate as my template
The issue here was that the div containing the H4 element was not rendering with a large enough width in Chrome to display the H4 on a single line and the text was wrapping. The OP said that this was actually the desired effect, so I suggested manually adding in a line break to force the H4 to break at the desired point.
If the OP had wanted the H4 to remain on one line, they could have, alternatively, reduced the font-size by a point or two to allow the H4 enough room to exist on one line across all browsers.
This ended up working for the OP:
<h4>News, Media &<br/>Blurbs</h4>
My designer colleague obviously aligns his text nicely justified in his Photoshop.
How can I apply his design to my code when there will always be some space around text?
I mean I can fiddle with things like negative margin, line-height (see example) or anything. But that can't be a solution.
This question most likely arose already
An example: http://jsfiddle.net/bfpPS/
html:
<section>
<h1 class="wrong">WRONG</h1>
<img src="http://creativemedias.files.wordpress.com/2010/02/a_beautiful_day___wp_pack_by_little_stock.jpg" />
<h1 class="right">Isn't it beautiful!</h1>
</section>
css:
section, img, h1 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
line-height: 1.4285714285714em;
vertical-align: baseline;
background: transparent;
font-family:'Lato', Arial, Arial, Helvetica, sans-serif;
font-weight: normal;
letter-spacing: 0;
}
img {
height: auto;
max-width: 100%;
width: 50%;
float: left;
}
h1 {
font-size: 2em;
}
.wrong {
float: left;
}
.right {
line-height: 0.7em;
}
We all know that "WRONG" is the right way to code this. Your designer is wrong here, not your CSS. Normally when I encounter situations like this, I ignore the exact design and do it how I know is the right way to do it, and then if anyone complains, I tell them that's how the web works. Even if you set a negative margin or do something else hacky, it's going to look wrong in someone's browser who has a different font available or a larger font size set, etc. Why bother with the hacks? Just do it right.
Check out this code sample of a button and an anchor: http://jsbin.com/ecitex/2/edit
I'm trying to make them identical in all browsers. But differences remain, and different differences in every browser (tried Chrome, Safari, Firefox, IE8).
Which CSS normalizations am I missing?
Update:
Per suggested:
I added line-height: 50px (although my user agent's (Chrome's) default line-height for button elements is normal, and still it vertically centers text – how?!)
I added cursor: pointer to normalize mouse cursors.
http://jsbin.com/ecitex/11/edit
So, now check out the result in Firefox: notice the padding on the button?
Then check out the result in IE8: whoa, notice how the two are completely and utterly different?!
Update 2:
It seems that IE's problems are known and non-resolvable: http://www.quirksmode.org/css/tests/mozie_button2.html
I haven't found anything on Firefox's padding though. (The quirksmode article mentions an issue with Mozilla, but that's a different issue.)
Update 3:
Awesome, we fixed the Firefox issue: http://jsbin.com/ecitex/15/edit
Okay, so far every single answer has been providing part of the solution so there's not really one single best answer. I'll grant the best answer to the person that either:
Explains why we have to specify a line-height: 50px to vertically center text in an a, while a button has vertically centered text with a mere line-height: normal.
Provides a solution for the IE issue.
You can remove that extra padding in Firefox by using:
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Here's a good explanation from Eric Meyer about line height which hopefully explains why you need to explicitly set it as 50px: http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/.
Here's some new CSS that fixes the font size issue in IE:
button, a {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 10px 0;
padding: 0px;
height: 50px;
border-width: 0;
background-color: Red;
color: White;
font-family: sans-serif;
font-weight: normal;
font-size: inherit;
text-decoration: none;
line-height: 50px;
cursor: pointer;
font-size: 100%;
}
button {
#width:0px;
overflow: visible;
}
button::-moz-focus-inner {
border: 0;
padding: 0;
}
You need to use line-height property to bring your anchor tag text vertically centered
Demo
CSS
button, a {
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 10px 0;
padding: 0;
height: 50px;
border-width: 0;
background-color: Red;
color: White;
font-family: sans-serif;
font-weight: normal;
font-size: inherit;
text-decoration: none;
line-height: 50px; <-------- Here
}
add the attribute cursor:pointer; in order to add a pointer when the mouse is hover (the input not always have it)
and at last use line-height:46px; for the vertical align
the full code is here -> http://jsbin.com/ecitex/10/edit