How do I prevent my website design from changing on different computer screens? How can I keep it the same?

I design my own websites on Dreamweaver and everytime I look at my website on another computer the things I designed (i.e. pictures, layers, frames, etc.) are out of place or the font is completely changed. What do I need to do in order for my wesbite to be uniform on every computer? Is there an HTML code that prevents this from happening?How do I prevent my website design from changing on different computer screens? How can I keep it the same?Your site will never look the same on all computers but nevertheless there are things you can do to make it more consistent.



Different browsers will show your site differently so test your code in at least IE6, IE7 and Firefox.



Differently-sized monitors will show your site differently. Decide whether you want a liquid layout or a fixed-width layout or a mix of both: this will depend on how much and what kind of content your site is to have. If it's fixed-width a good maximum width is 800pixels.



Always test to make sure your html and css code validates 100%.



Stop using Frames, they are obsolescent and generally problematic.



Separate content and style. Content markup (div, h1, h2, p tags etc) goes in the html; all styling information (size, color, background images, fonts, widths, borders etc) goes in the css stylesheet. Don't use tables for page layout.



The first instruction in your css stylesheet should reset all margins and padding to zero i.e.



* {

margin: 0px;

padding: 0px;

}



Then for h1, h2, p tags etc you can set specific margins/padding instead of the browsers using their own default settings.



Don't try to control the design too much. For example use % or em to set font sizes, never an exact number of pixels e.g. 14px. That way a partially-sighted user can increase the text size to make your site more readable to them.



You shouldn't need to instruct visitors which browser or screen resolution to use, not if you've got the design right. You only tend to see this on really amateur sites.
How do I prevent my website design from changing on different computer screens? How can I keep it the same?
no

the users settings over ride yours
How do I prevent my website design from changing on different computer screens? How can I keep it the same?
This can be a hard thing to accomplish which is why most people design sites to be optimally viewed using a certain browser.



For starters make sure you only use web code that is standard across all browsers. Using Microsoft terms and tags can cause your page to look odd on non Microsoft browsers. There are a few sites out there that list the HTML tags that are safe in all browsers. If you want your site to look good on all of them, stay away from Microsoft only tags.



When picking a font, make sure you pick a standard one that most machine have installed already. Using a custom font that you have but no one else does will cause the font to change. You can usually fix this problem but specifying more than one font option in a style sheet.



Make sure you are developing it for a standard resolution. Most pages today are designed around 800x600 but remember to take into account peoples start bar and other things that take up space such as browser tool bars.



Lastly, using frame and image tags that allow things to grow and shrink by using percentages will likely cause you trouble as things may end up wrapping if someone has there browser in a smaller resolution than you designed in. It is best to use specific dimensions when specifiying where things are located and how big they are. This will help keep things looking the same in multiple browsers using multiple resolutions.
In short there isnt really anything you can do to make sure EVERY computer will display your sites the same.



But what you can do is using CSS to control these things, set different options to be browser specific, for things such as positioning. For example IE will display things a couple of pixels out from the likes of Firefox. Your best bet is to search browser compatibility on google, and also use your browser compatitibility check option within Dreamweaver.



Also for your fonts, try giving two or three common (but similar options) as you cannot guarantee that the fonts you want are installed on the users PC/MAC.



If they are likely to be obscure fonts for things such as Headings then create them as images, but obviously remember to use the ALT tags. But it isnt great practise to use images for text other than on the odd occassion.
Always prepare your site for 1024 x 768 pixels setting and also mention it on your site that this site is best viewed on 1024 x 768 pixels. Second thing you can do is make your site w3c compliant. To check whether your site is valid or not simply go to http://validator.w3.org/ and place your site url and check. The main advantage of w3c validation is that your site will have same outlook when viewed using different web browsers. It also helps search engines to crawl your site easily.



Hope it solves your problem.
if your website validates as valid here http://validator.w3.org/ then chances are that it will look good in 99% of browsers, but there are some exceptions, like with the css, some browsers accept some code and not others, if that is the case you can build seperate sheets for the most common browsers - about 4 of them -



if you want a better idea, speak to these guys http://www.webforumz.com/