Avatar for Username

Rechercher dans l’assistance

Évitez les escroqueries à l’assistance. Nous ne vous demanderons jamais d’appeler ou d’envoyer un SMS à un numéro de téléphone ou de partager des informations personnelles. Veuillez signaler toute activité suspecte en utilisant l’option « Signaler un abus ».

En savoir plus

Ce sujet de discussion a été archivé. Veuillez poser une nouvelle question si vous avez besoin d’aide.

Basic Layout not rendering correctly.

  • 2 réponses
  • 1 a ce problème
  • 6 vues
  • Dernière réponse par guigs

MyFriendBrad
MyFriendBrad
more options

Hello,

I've been trying to debug a problem I was noticing on my production websites, so I dumbed it down to a quick codepen to show off the issue. http://codepen.io/anon/pen/GgoBNJ

Basically, standard fonts (helvetica, arial, etc.) are not rendering correctly within a div. For some reason the text is pushing itself up ~2 pixels. Not to mention, fonts are looking very jagged within the browser for no apparent reason.

I am setting up a basic div with hardly any styles and yet this produces two different renderings within FF and Chrome

Hello

.box{ 

 font-family: Helvetica, Arial, Sans-serif;
 font-size: 14px;
 border: 2px solid #FF5500;
 display: inline-block;
 width: 100px;

}

This is causing me all sorts of headaches with designers who are trying to make layouts pixel perfect as I have zero control over something like this. Any help would be greatly appreciated!

Thanks in advance.

Hello, I've been trying to debug a problem I was noticing on my production websites, so I dumbed it down to a quick codepen to show off the issue. http://codepen.io/anon/pen/GgoBNJ Basically, standard fonts (helvetica, arial, etc.) are not rendering correctly within a div. For some reason the text is pushing itself up ~2 pixels. Not to mention, fonts are looking very jagged within the browser for no apparent reason. I am setting up a basic div with hardly any styles and yet this produces two different renderings within FF and Chrome <div> <div class="box">Hello</div> </div> .box{ font-family: Helvetica, Arial, Sans-serif; font-size: 14px; border: 2px solid #FF5500; display: inline-block; width: 100px; } This is causing me all sorts of headaches with designers who are trying to make layouts pixel perfect as I have zero control over something like this. Any help would be greatly appreciated! Thanks in advance.

Toutes les réponses (2)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

You may have zoomed the page(s) by accident. Reset the page zoom on pages that cause problems.

  • View > Zoom > Reset (Ctrl/Command+0 (zero))

You can right-click on a web page and select "Inspect Element" to open the Inspector (Firefox/Tools > Web Developer). You can check the font used for selected text in the Font tab in the right pane of the Inspector.

You can do a font test to see if you can identify corrupted font(s).

You can try different default fonts and temporarily disable website fonts to test the selected default font.

  • Tools > Options > Content : Fonts & Colors > Advanced
  • [ ] "Allow pages to choose their own fonts, instead of my selections above"
guigs
guigs
more options

It may also be helpful in the meantime to try: font-family: "Helvetica Neue",Helvetica, Arial,sans serif;