Layout renders differently on IE vs Firefox

[dag_support]

The following code renders differently on Internet Explorer compared to Firefox, where there is and additional space added (see attached):

Img img1 = new Img("/square1.png", 50, 50);
Img img2 = new Img("/square1.png", 50, 50);
Img img3 = new Img("/square1.png", 50, 50);
Img img4 = new Img("/square1.png", 50, 50);

VLayout layout1 = new VLayout();

HLayout layout2 = new HLayout();
layout2.addMember(img1);
layout2.addMember(img2);
layout1.addMember(layout2);

HLayout layout3 = new HLayout();
layout3.addMember(img3);
layout3.addMember(img4);
layout1.addMember(layout3);

See the attached screenshot.

[Isomorphic]

There's no space being added by SmartGWT, but you could get that extra space either from:

1. CSS you've loaded into the page that affects all elements

2. artifacts created by native browser zoom

Also see the Browser Zoom overview for information on where browser zoom is supportable and isn't.

[dag_support]

In the test case, we actually didn't use any CSS. We're not using any browser zoom. We're trying to get rid of the 1 pixel gap.

>"There's no space being added by SmartGWT"

But SmartGWT adds a div to wrap around each image. If the image height is 50px, the div's height will become 51px.

The gap appears when you use Firefox with higher screen resolution. Try it on a 20" monitor, reasonable resolution.

[Isomorphic]

No, <div>s do not have an inherent width like a physical object. You can place a 50px image in a 50px DIV.

Again, check your zoom level.

[dag_support]

Again, zoom level at 100%, there is nothing to check.

>"<div>s do not have an inherent width like a physical object. You can place a 50px image in a 50px DIV."

Again, height, not width.

I can manually write html code to place a 50px image inside a 50px div, no gap in between. However, we're using Smartgwt. All I do is new Img("/square1.png", 50, 50).

Again, check Firefox, high resolution, and inspect the HTML.

[Isomorphic]

By width we really meant thickness - a DIV acting as a container does not take up a pixel or fraction of a pixel, in either dimension.

Just to humor you, we tried this out, and unsurprisingly it was not reproducible.

You should try other machines and/or look for browser extensions or other possible causes.

You recommend inspecting the HTML and you should definitely do so. If the browser is faithfully reporting the correct sizes, then you know you've probably got an OS-level issue.

We're not sure what you mean by high resolution - obviously one would not expect this to start happening with a bigger or higher DPI screen.

[dag_support]

>"Just to humor you, we tried this out, and unsurprisingly it was not reproducible."

Is it a humor to me or to yourself?

>"You recommend inspecting the HTML and you should definitely do so."

I did, that's why I posted here. Like I said, if the image height is 50px, the div's height will become 51px.

>"We're not sure what you mean by high resolution"

Now, we know why there is this problem.

>"obviously one would not expect this to start happening with a bigger or higher DPI screen."

I would not expect that either. I'm just saying this is happening.

[Isomorphic]

Obviously, if Firefox + high resolution were all that it takes to start causing extra pixels to appear in various layouts, these forums would be flooded with reports. You need to start posting much more detailed information if you hope to get assistance figuring this out.

1. Are you saying that this problem appears with

a) a larger monitor
b) higher DPI

2. Can you get the problem to occur and not occur on the same machine by changing resolution or by adjusting DPI?

3. What specific resolution and DPI settings reproduce the problem?

4. What version of Windows is this?

5. If you are not already testing the latest version of Firefox, please test the latest

6. Can you get this problem to occur on anyone else's machine?

7. What's the native resolution of the sample image you're using?

8. Is the problem corrected for you if you set overflow:hidden on the Img?

9. Do you get the same problem if you just use an overflow:hidden Canvas in place of the Img?

[dag_support]

>"Obviously, if Firefox + high resolution were all that it takes to start causing extra pixels to appear in various layouts, these forums would be flooded with reports."

It's 1 pixel. It needs a lot of rain to flood.

[Isomorphic]

We routinely get bug reports for much less significant cosmetic issues, and, if you can somehow get a bonus pixel in such a simple layout, it strongly implies that there would be extra pixels all over the place.

[dag_support]

>"if you can somehow get a bonus pixel in such a simple layout, it strongly implies that there would be extra pixels all over the place."

Not all pixels are created equal.

If you look at the bottom of this page, and if there was one extra pixel above the copyright notice that was supposed to have some white spacing, not many people can tell or care.

However, if you look at the top of this page, imagine if there was a blank white line below the logo or below the headers (in our case, it's below the logo, humor to me), and you were the developer, ...

[Isomorphic]

Yes, it is blindingly obvious that a 1px offset could be inconsequential in a given application, but there are tens of thousands of SmartClient / SmartGWT applications, creating millions of opportunities for a 1px offset to create an ugly artifact.

We posed several questions above to try to figure out how you can possibly be the only one reporting this issue, which we can't reproduce. You should answer those questions or not expect further responses.