0

i have developed this website http://www.falestinona.com/nashra the website tests on my laptop are correct and same design over IE, Chrome, FF and Opera the problem i have found that same version of firefox shows the design different on different computers. FF on my laptop shows correct design while same version of FF on other laptop shows design problems and this problem shows with my friends some correct and others have design problems on FF. FF is clean with no addons shows the same problem. Attached Two Images: FF with Correct Design FF with Wrong Design Same version and Clean FF and Latest Version

https://support.cdn.mozilla.net/media/uploads/images/2015-06-09-22-05-36-e5d7cf.png

https://support.cdn.mozilla.net/media/uploads/images/2015-06-09-22-05-32-b35e5a.png
Loïc Faure-Lacroix
  • 13,220
  • 6
  • 67
  • 99
Final Heaven
  • 11
  • 3
  • 1
    I only notice a difference in the font-size. Is that correct or is there something else as well? – BillyNate Jun 13 '15 at 08:37
  • I'm using latest Firefox and couldn't see any problems. It seems the 2nd screenshot link has increased line-height. Have you tried fixing the line-height (i.e. give it a value) and check whether the problem persists? Also, it would be good to force refresh the page on all laptops to make sure the latest stylesheet is being used. – Billy Jun 13 '15 at 09:32
  • Have you cleared the browser cache on all test devices? – HelloWorld Jun 13 '15 at 21:11
  • i have formatted another laptop and installed FF latest version with no addons or anything just clean version no zoom or anything and the page design were wrong and gave me the same problem. this problem is strange since on my laptop and some other laptops the page design is correct and displays correctly. But not all laptops having correct design as you can see in the images above. i have tried forces refresh, renamed the style sheet but nothing solved the problem. i do not know why same version of FF displays differently on different computers. – Final Heaven Jun 14 '15 at 09:03
  • Welcome to web development – jbutler483 Jun 15 '15 at 19:15

1 Answers1

1

in Mozilla Firefox font rendering and line height rendering of the font differ between devices and automatically calculated so it differs between devices. the solution was to set Static Constant line height for all html elements and forcing this change. CSS StyleSheet Change:

@import "amiri_font/amiri.css";

*{
font-family: AmiriWeb, 'Amiri QuranWeb', Amiri;
line-height: 1.6 !important;
}
Final Heaven
  • 11
  • 3