Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

Basic Layout not rendering correctly.

  • 2 replies
  • 1 has this problem
  • 7 views
  • Last reply by 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.

All Replies (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;