Weird layout difference on Firefox on Windows

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
jasimon9Asked:
Who is Participating?
 
jasimon9Author Commented:
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.
0
 
jasimon9Author Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.