Question

I have made a simple web page using jQuery. When opening it on another PC, it seems different (bigger and some of HTML table overflows from from the body tabs).

Can you tell me why its happen? How can I make this display the same on all machines?

My css code:

<style type="text/css">
  label { width: 15em; float: left; }
  label.error { display: none; float: none; color: red;
                 padding-left: .5em; vertical-align: top; }
  p { clear: both; }
  .submit { margin-left: 12em; }
  em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>

<style type="text/css">
  body {
    font-family:Times new roman, verdana;
    font-size:22px;
    width: 950px;
    height:70px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6px;
    background-image:url("wood_texture2.jpg");
    overflow:auto;
  }
</style>

My PC is oblong about 15 inches and the others is square about 14 inches.

Answer 1

Well one thing you aren’t considering is resolution. If my computer uses a different DPI resolution as yours, even with the same size monitor it will appear bigger or smaller.

Other reasons why this could happen, the browser settings could have different minimum font sizes. The browsers could accidentally be stuck in ‘zoom’ mode.

You could be using different browsers.

You could have different fonts installed.

in windows you could be using a large DPI which makes everything appear bigger.

There are a lot of factors why they could appear different.