Why does my webpage looks different on different computers?

[HIP13044B]

I'm designing a project website using ConTEXT, some of my borders, division and other elements are completely out of their places. I tried outputting it to different computers with different size of monitors and of course with different resolutions. I'm no expert when it comes to this but how can i resolve that? How i can properly output my website with the original layout to different computers? So far i only use HTML, CSS and just 1 javascript which only for time and date functions.

it has little to do with the different computer and more to do with the different resolutions and browsers (or browser versions). Without a site to look at and to know what isn't looking right, it's nest to impossible to say what is wrong.

[ss125]

The following are the possibilities.

1) Browser compactibility problem (includes version of browsers also).

2)Your development machine's pixel size may vary to client's system. For eg., U r using a 1388*720 and the client may be using a lesser one and vice-versa.

3)For your information, Kindly develop your page with a default size of 1024*638. This is best suited for all lower end as well as higher end resolution screens.Instead of 720 I have used 638 because of the exclusion of browser's page on the screen.

Check any of these possibilities.

Hope this helps u.

Have a happy coding.

[Shulc]

Hi,

try playing with the css file. Set the max-width, and max-height parameters to a desired size in px.

[almostbob]

Current standards and best practices suggest that pixels are not an appropriate dimensioning tool for laying out a web page.
a crt uses approx 96 px/inch
an lcd approx 120 p/inch
a current hi-res plaasma, cell phone /tablet approx 267 px/inch
a printer up to 4000 px /inch
depending on the device used to lay out the page, it will appear from vainshingly small, to ridiclously large on different devices
NO fixed dimension site works, on any device except that which it was laid out on
best practice is to lay the site in em or % scalar dimensions that auto adjust to screen resolution, window size device capability and user preferences. this ensures the page loooks as similar as possible, within the display capabilities of the device it is being viewed on.

A page laid in pixels, looks ridiculous on this widescreen monitor,
1000px column in the middle of a 2600px screen
the same page looks worse on a phone or small device, or partscreen window, the content is pushed offscreen right and all the user sees is the pretty blank border. Users do not scroll sideways to view content, they leave.
with a body { width:100%; margin:2%; } or similar, all users have the same experience.
font-size set in em, the site becomes visual disabiliity friendly, emphasised text adjusts around the user's preference instead of an arbitrary XXpx, which may be vanishingly small on the Ipad-etc at 267px/inch (12px=1/25inch high) or a printer (12px=1/333 inch)

[almostbob]

the links below, may give you assistance in getting your code, to look the way it should, on as many devices as possible

html standards
handheld standards

css2 standards
css3 standards

handheld devices
opera
iphone
ipad
android

other browsers

problems (if any present) will show
serious code errors in the w3c validator sites will produce blankscreens in browsershots(other browsers links)

Valid code does not ensure the site will work ...
Invalid code does ensure the site will not work ... .. in all browser OS combinations

not all layouts work in handheld devices
examine css @media handheld { } & simplify the style and layouts for small devices, look at redirects to a subdomain for less capable devices

fixed size elements do not work in any device except the screen they were designed on, current best practice is em or % for layout, scalar quantities that auto-adjust to window size, screen resolution, user preference, device capability

the editor used, wont have much effect, the standards used, will

strictly code based, you understand(care about) your content more than I do

[jrewing]

This may or may not help you directly but I thought it worth pointing you to Click Here. They make the process of testing out your design efforts on a whole load of browsers (many different OSs) really easy.

This is exactly why I mostly still use the 'old' fullpage 800x600px. Webpage-Design, Pages can be easy viewed by most smartphones in full, and regardless of resolutions set on pc's or laptop's, the pages always look as planned.

I addition to this, I secure Critical Section- 'Sizes' with an 'empty' 0.gif-image, so, my pages look the same, regardless of the Browser-Brand or it's Settings.

It may sound rather 'back in time', but I care about Style, not about 'Age'...