7

I'm stumped. A client and I are both running Firefox 3.0.12 on XP machines. We view the same page in the same browser on different machines and have different results. Note: All IE browsers are consistent on both of machines, and my FF 3.5.1 is consistent with my FF 3.0.12. (He does not have FF 3.5.x installed to compare with).

There is a 1 pixel difference that causes his header div (all images, no text) to wrap. Mine is fine. If I expand his header by 1 px (via Firebug css editing), it works.

So my question is what other variables are there that affect rendering??

I'm trying to think "outside the box" because it seems that it should work exactly the same.

We cleared the browser cache. I did a diff on the HTML source, and other than a javascript datetime stamp and a javascript tracking code var, the sources are identical.

I know this question would be helpful with source, but my client specifically does not want this page live on the internet yet. Also I verified the issue via a webex session. At first, I couldn't believe that we would have different results.

Anyone else come across something like this before? What should I check out / debug next?

Edit: There are a lot of suggestions pointing to fonts, but the header uses only images. Well, that's not completely true, there are divs that are part of a collapsible menu, but all of that is set to display:none for initially rendering, so I'm thinking that it's something else.

Edit 2: I've changed all sorts of fonts and sizes (both the system default font settings and within Firefox) on my computer to try to replicate the problem. I changed the rendering style (standard vs. clear type). Nada. The problem is almost definitely not font related. I'll have to see if I can get some more access to the client's computer to replicate the problem.

1
  • 2
    Font size can also affect line height even if you don't have any text.
    – Tim Booker
    Aug 3, 2009 at 22:17

12 Answers 12

5

Since we can't take a look at the site in our own browsers, here is the process that I would use to try to nail down the issue:

  • Start removing code blocks piece by piece until the two browsers look the same.

  • Whichever block of code you last removed that made everything line up perfectly (even if you are missing a chunk from the body), that's near where the culprit is.

  • Since you've found the culprit, place all of the code back. Start messing around with the fonts first off. Change fonts, sizes, remove text, etc. until you can find a condition under which the browsers are the same. If it's not a font issue, start messing around with other parts of it until you've found the condition that matches it up.

  • Once you've done that, you will know your issue and you can work around it.

1
  • +1 Ultimately, the client decided to live with the difference on his computer. I could not diagnose it further on that computer, but I agree that this would be the way to go. Aug 28, 2009 at 14:20
5

IF you're using Firefox make sure you hit Ctrl-0 to default the zoom level.

2
  • This obviously might be a reason for a different visual representation (esp. wrapping will be affected) but shouldn't this lead to a deviation of more than 1px? Aug 3, 2009 at 22:23
  • Firefox allows 15 levels or so of scaling and also adjusts the size of graphics; thus I believe 1px would likely be the minimum
    – Hardryv
    Aug 4, 2009 at 16:13
3

I know my FF3.0 makes everything look different than other people's because I have it set in Preferences to use a minimum font size of 16. I dont get fine print, I get a pile of legible writing.

Also, being on a Mac, the default fonts are sans serif, whereas on windows everything is serif, which also can change the font widths and heights even further.

If anything on your page is specified with "em" or "ex" units, they are dependent on font size.

2

I'd compare plugins/addons.

0
2

How about your font smoothing settings - are they the same (none/antialias/ClearType)? That can change the width of a given text, and might just be what you're looking for.

2

Are you both using the exact same screen size? Does firefox try to scale the fonts to the apparent size of the person viewing the page, or to a specific number of pixels?

1

One thing that comes to mind is installed fonts. If you have a font that the client doesn't there could be a 1 pixel difference in a computed size. FF and IE could be rounding differently, which would explain why they behave differently.

1

I mostly agree with all the "font guys" further up, but if that doesn't help try checking the HTTP headers since some headers might be added by proxies and such between the server and your client. But try the font suggestions first...

Good luck ;)

0
0

DIfferent operating systems have different font rendering engines. Vastly different. More than enough to cause at least a 1 pixel difference, depending on how you set up your CSS.

0

My first guess is something to do with the window, I don't recall this ever happening in firefox but try resizing the window anyway. It is also possible that there actually is something 1px wide taking up that space, such as a hidden frame or whatnot. These might be completely off the mark since I don't know how you actually made the thing.

A possible workaround is displaying one of the images as a background to a div instead of using an img tag, this'll cause it to simply be truncated instead of wrapping if it's 1px off.

0

I saw this problem once, and as it turned out the user had zoomed the page, and the zoom caused math rounding issues. I had inadvertently zoomed my page to 120%, they had just your normal 100%.

1
  • This would probably be a lot more visible than the posted issue, wouldn't it ? Oct 22, 2012 at 2:46
0

With current update in browser, the browser zoom settings take the dpi settings of the system.

In windows 7, setting dpi = 125% will produce the zoom effect at 100% zoom of the browser window.

So, this is not related with HTML. i.e. to say settings of width = 300px will produce different size box on same browser with same zoom settings but with different dpi settings.

Dpi = 125 % will produce larger box.

So, if you want to reduce the zoom level, either zoom out the browser by pressing ctrl + -, or reduce the dpi settings of the system by following steps

  1. For windows 10 http://www.windows10update.com/2015/05/windows-10-tutorials-79-change-dpi-scaling-level-for-displays/
  2. For windows 7 http://www.lawfirmsoftware.com/support/change_dpi_settings_windows_7.htm

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.