Weird layout difference on Firefox on Windows

Posted on 2011-04-22
Medium Priority
Last Modified: 2012-06-22
I have just completed a display ad for one of our customers. The ad is now in "pre-publication." However, there is something I have rarely seen before, although it seems it is getting more common. The problem is that Firefox on Windows is acting weirdly.

We support Internet Explorer, Firefox in Windows, Firefox on the Mac, Chrome and Safari. In this specific instance, the ad is laying out properly in all browsers except Firefox on Windows. I have been starting to notice small irregularities lately on Firefox on Windows, but nothing as drastic as in the current situation.

I am posting two screen shots showing the intended layout and the faulty Firefox on Windows layout.

The section in question is the "bow" image and text. It is absolutely positioned so as to superimpose it over some white space which is part of the image to the right. In addition, I am using the "IEroot" hack to position it properly for IE. The IEroot hack is simply using conditional comments as described at http://www.positioniseverything.net/articles/cc-plus.html. However, this should not have any effect as it is only to assist IE get it right.

In addition, the container div of the positioned div is position:relative in order to get IE to work properly. Again, this should not be affecting Firefox on Windows.

Firefox is 3.6.16 on both Windows and Mac.

Firefox on the Mac is working; why not on Windows?

 Desired layout
 Faulty layout in FF in Win
Question by:jasimon9
  • 2

Accepted Solution

jasimon9 earned 0 total points
ID: 35451162
I think I have solved the issue.

I think it is caused by different fonts available between Windows and the Mac, resulting in different amount of space being taken up, and thus requiring a different positioning.

The workaround is instead of positioning from the top, to position from the bottom, where there is no text to cause this difference.

Author Closing Comment

ID: 35460301
There is often a difference in rendering between Windows and Macs. This is especially noticeable in Firefox, as you would think the rendering should be the same. The difference is often because the identically named fonts are shown differently on the two platforms, resulting in different spacing of elements.

The issue of this ticket seems to be caused by this problem, and the workaround thus takes advantage of it as well, by not depending upon the layout induced by the font size.

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Internet is a big network which is formed by connecting multiple small networks.It is a platform for all the users which are connected to it.Internet act as platform in different fields. Such as: Internet  as a collaboration platform. Internet  as…
#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question