HTML page looks different on two different machines

HTML & CSS
1

Hi everyone,
My HTML page looks as I wanted it on my desktop machine where I coded it and different on a remote laptop.
Attached are a screenshot of the HTML page as it appears on the desktop and another screenshot of the same page as it shows up on the laptop.
The second screenshot shows the brown image not in the middle of the background image, the yellow caption below goes out of the page.
The brown image at the second image appears without its’ round right angles as if it was cut at its’ right side.
My desktop’s display’s resolution is: 1024-768. The laptop’s resolution is: 1280-768. Both machines use: Firefox browser.
Here is the HTML code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
<style type="text/css"> body
  {
   background-image:url('board.gif');
   background-repeat:no-repeat;
   background-attachment:fixed;
   background-position:center;
   margin:0;
   padding:0;
  }
div#startpage
  {
   position:relative;
   width:1000px;
   height:600px;
   background-image:url('startpage.png');
   background-repeat:no-repeat;
   background-attachment:fixed;
   background-position:center;
  }
div#container
     {
     left:4%;
     top:89.5%;
     width:300px;
     color:yellow;
     font-size:50px;
     direction:rtl;
     overflow:hidden;
     position:absolute;
     }
</style>
</head>

<body>
<div id="startpage"></div>
<div id="container"> ABCDEFGHIJ</div>

</body>
</html>

I wonder if anyone could help me making that code appears the same on any machine (not mentioning: browser!).
Thanks a lot !

2

Problem is you seem to be absolute positioning something that probably shouldn’t be, and positioning it by % with a fixed width.

left:4%; for example – 4% of 1024 is 40.96 (most browsers will round to 41). 4% of 1280 is 51.2, so naturally a different size display is going to return different results – that’s why you shouldn’t absolute position major content elements in the first place.

Though telling you how to accomplish whatever it is you are doing is difficult without the content; since one shouldn’t even be making layout until all of your content (or a reasonable facsimile) is marked up semantically. Just as one should NOT fix the height of any containers that are likely to have text content inside them… hence that 600px height on the first DIV and 89% height on the second one both being bad practice that will likely lead you into making a broken layout.

Not that the 1000px fixed width is a good thing either, since that’s too big for even 1024 displays, and will end up a crappy little stripe for many modern desktop users.

3

Thank you.
I’ll try to change it in accordance to what you wrote.