Weird layout difference on Firefox on Windows

Posted on 2011-04-22
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 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

    Accepted Solution

    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

    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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    How many times have you been browsing the internet, with multiple tabs open, and closed the wrong one? Have you ever clicked 'Close all tabs' instead of 'Close current tab' ? Internet Explorer 8 now brings to you, what Firefox has had for a wh…
    After uninstalling Opera browser (for example ver. 10.63), your attempts to open a web page by clicking on a URL link may fail with an error message.  The error is "This operation has been canceled due to restrictions in effect on this computer. Ple…
    This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
    Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

    761 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

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now