Different
height between Firefox and other browsers

Question

I made a site about Star Wars Canon timeline (with movies,tv shows, books and comics) and I have a slight problem.

Chrome/Opera/Vivaldi have different tag heights compared to Firefox and it crushes my OCD.

Is there any way to make the site look the same way on Firefox as it does on Chrome/Opera/Vivaldi?

I am sorry if I am not made understood, here's a screenshot: https://i.stack.imgur.com/Se4zH.png

Just force it to have the same size via CSS. Check this out: http://stackoverflow.com/questions/1409649/how-to-change-the-height-of-a-br — this.user3272243, Jun 30 '15 at 06:44
***Do not use `
` to increase the gap between lines of text;** use the CSS margin property or the `
` element.* Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br — gmo, Jun 30 '15 at 06:51

Veo · Answer 1 · 2015-06-30T07:45:11.103

2

^{_{Yes, I have OCD as well and am verily frustrated by such imperfections.}}

You may style your   with CSS:

br {
  line-height: 2rem;
  height: 2rem;
}

or by in-line styling, as provided by @Raj Kumar in a previous answer:

<br style="line-height: 2rem; height: 2rem;" />

Try a snippet here:

<br style="line-height: 10px; height: 10px;">
<!-- I used 10px to emphasise the height. You can use !important, too, if your code is not obedient. See? It works.-->

If this does not work, what I'd advise you to do would be to completely omit the   tags and add either margin, padding, or invisible borders (border: 2px groove transparent;) to the elements you're seperating. Another not-so-neat way is to add transparent a div (div.class {background: transparent; width: 100%; height: 2px;}).

^{You might want to try to add / in your tag (just in case) (although most modern browsers already support ). Make sure you don't have any additional spaces in your code, too (just for neatness). Also try to import normalize.css or vanilla.css and check if it fixes the problem.}

^{_{Thanks for letting me know about Vivaldi. Looks like a nice browser!}}

edited Jun 30 '15 at 07:45

answered Jun 30 '15 at 07:20

Veo

291
3
14

Tried your version with `br { line-height: 2rem; height: 2rem; }` but it makes the br a lot bigger. – RELLiCK Jun 30 '15 at 08:17
That's just an example. You may change the value to the heights you want (e.g. `2px`, `0.33rem`, `3mm`, `0.1cm`, etc.). – Veo Jun 30 '15 at 17:12
Yeah, I understood that that was an example, what I didn't understand was the value, never used "rem" before. – RELLiCK Jul 01 '15 at 06:32
Oh! CSS3 introduced a few new units, including the rem unit, which stands for 'root em'. The em unit is relative to the font-size of the parent, which causes the compounding issue... – Veo Jul 01 '15 at 10:22
There is no closing slash in HTML for `
`. While allowed, it means nothing, does nothing and browsers are instructed by the specification to ignore it. – Rob Jun 19 '18 at 11:22

score 0 · Answer 2 · answered Jun 30 '15 at 06:43

0

You can try normalize css below is link http://necolas.github.io/normalize.css/

It will solve other problems of cross browser problems

answered Jun 30 '15 at 06:43

Siddharth Pandey

649
1
9
21

score 0 · Answer 3 · answered Jun 30 '15 at 06:46

0

add styles for br It should work perfect check this

<br style="line-height:?px; height:?px" />

answered Jun 30 '15 at 06:46

Raj Rana

90
6

doesn't change anything, it acts exactly the same – RELLiCK Jun 30 '15 at 08:21
give some px for line-height and height. – Raj Rana Jun 30 '15 at 08:55
can i get the demo link of the page – Raj Rana Jun 30 '15 at 09:42

score 0 · Answer 4 · answered Jun 30 '15 at 07:16

0

you may try with the

reset.css
normalize.css
vanilla.css

that allows to reset all or particular element as per your requirement.

answered Jun 30 '15 at 07:16

Himesh Aadeshara

2,114
16
26

Different height between Firefox and other browsers

4 Answers4

Different
height between Firefox and other browsers