Is it possible to achieve line-height consistency in all browsers?

Question

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">
    <a href="#"><img width="50" src="http://localhost:3000/images/foobar.gif" alt="thumb"></a>
    <p class="name">
      <a href="#">Jessica Simpson</a>
    </p>
    <p>Blurred out text here</p>
    <p>Followers: 3197179</p>
  </li>
</ul>

alt text

I know the difference is only by one or two pixels. But this is a client's requirement and a "Must". Is such a thing possible to do or should I explain to the client that 1-2 pixels difference from browser to browser is impossible to achieve? — Christian Fazzini, Dec 17 '10 at 20:50
http://dowebsitesneedtolookexactlythesameineverybrowser.com/ — Flack, Dec 17 '10 at 20:54
Hi Flack, there are certain things I can achieve, with little effort and no "css hacks" to make visualization look the same for all browsers. However, I am wondering if the case in my initial post falls under the "impossible" category — Christian Fazzini, Dec 17 '10 at 21:10
Well, even in the worst case you always can come up with some "cleverlish" hack. But I don't really think it's worth the effort. Though I'm not a guru, so someone can come with clear and working solution. — Flack, Dec 17 '10 at 22:01

score 2 · Accepted Answer · answered Dec 18 '10 at 02:14

2

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.

answered Dec 18 '10 at 02:14

Mon Noval

280
2
8

1

Hi Ragingmon, tried using pixels instead. The outcome was a lot worst. Which means more space/gap. Interesting video :-) Thanks for pointing this out – Christian Fazzini Dec 18 '10 at 06:52
No problem mate. So any solutions so far? :D – Mon Noval Dec 21 '10 at 07:11
I basically just explained it. Perfection across all web browsers is impossible :-) – Christian Fazzini Dec 21 '10 at 08:24

score 0 · Answer 2 · answered Dec 17 '10 at 20:51

0

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/

answered Dec 17 '10 at 20:51

Babak Naffas

12,395
3
34
49

Hi Babak, yep, currently using Blueprint which includes reset.css, and already loaded – Christian Fazzini Dec 17 '10 at 20:53

score 0 · Answer 3 · edited Jan 23 '18 at 21:03

0

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.

edited Jan 23 '18 at 21:03

2540625

11,022
8
52
58

answered Dec 17 '10 at 20:53

Flack

5,862
2
23
27

Yep, have these set as well. I still see 1-2 pixels gap difference as in screen shot displayed in initial post – Christian Fazzini Dec 17 '10 at 20:57
I found this useful in another environment. Thanks for sharing it! – kevincoleman Mar 12 '14 at 05:48

score 0 · Answer 4 · edited Jan 23 '18 at 21:02

0

You can add line-height for Mozilla only, by using:

@-moz-document url-prefix() {
    *, body {
        line-height: [as per your requirement];
    }
}

edited Jan 23 '18 at 21:02

2540625

11,022
8
52
58

answered Nov 22 '17 at 14:24

Akshay Gurav

11

This method appears no longer to be supported by Mozilla. https://developer.mozilla.org/en-US/docs/Web/CSS/@document – 2540625 Jan 23 '18 at 21:21

score -1 · Answer 5 · answered Mar 05 '18 at 19:58

-1

It might be how the font is being rendered. Try using this as a font family.

font-family:"Arial Unicode MS","Lucida Sans Unicode";

answered Mar 05 '18 at 19:58

Aaron Lawrence

1
1

Is it possible to achieve line-height consistency in all browsers?

5 Answers5

Linked