Home/ Questions/Q 7659347
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T13:19:15+00:00

The two main container blocks (the one with the square tiles/menu items) and the

  • 0

The two main container blocks (the one with the square tiles/menu items)
and the top block above are of the same width and line up properly in all
browsers other than Chrome.

This is caused by Chrome not rendering the following margin property
accurately for some reason. Putting the margin-right at 4px sort
of gets it the correct width, but this will break the layout in Explorer and FireFox.
Have no idea what’s causing it. See fiddle for live example. Just stretch the frames out
to see the whole thing.

 DIV.RootCell
{
 width: 134px;
 height: 120px;
 margin-right: 3px;     //<-------------
 display:inline-block;
 float:left;

}

http://jsfiddle.net/yHxsS/7/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Both Firefox and Chrome are off by 1 px for me. The issue I see is this:

    The top box is declared to be 937px wide.

    The grid below has 7 elements in it. Each is 134 px wide with a 3px right-margin. That means you get (134×7) + (3×6) as the visible width. When you do the math, that comes out to 956px wide which is one short of the declared with for the top box. If you make the top box be 936px, it should work in both Chrome and Firefox.

    And, you can see that change work in both Chrome and Firefox here: http://jsfiddle.net/jfriend00/bdP8p/1/

    Also, check your browser zoom level and make sure it’s at 100%. I noticed that your layout is sensitive to the browser zoom as it goes off by a bunch when you zoom in or out (anything other than 100%).

    • 0