Resolution and Browser Compatability

I am currently designing a basic website however, after nearly completing my CSS I found that when I opened the webpage on a different computer it looked different and not only that it looked different in different ways depending on the web browser.

Therefore I am unsure whether or not it is a problem with browser or resolution compatibility so my question would be can anyone tell me in which field the problem lies (may be both) and maybe advice on the direction I can go to solve the problem.

The following is a link to an online album of screenshots of the webpage run on the four 'main' browsers on my laptop with a resolution of 1600x900 and the family computer with a resolution of 1440x900. Also if the page is resized or zoomed in then things start moving about.

http://postimg.org/gallery/908tlytw/

Thank you in advance for any help or advice, if you want me to provide any further information please just say what you would like to see.

HTML

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso10646"/>
    <meta http-equiv="content-language" content="en-GB"/>
    <meta name="author" content="###########"/>
    <meta name="designer" content="##########"/>
    <meta name="description" content="The official website of ##########, promoting her humanist services."/>
    <!--<meta name="keywords" content="##########, humanist"/>-->
    <meta name="language" content="english"/>
    <meta name="robots" content="index, follow"/>
    <meta name="googlebot" content="index, follow"/>
    <link type="text/css" rel="stylesheet" href="stylesheet lego.css"/>
    <title>Home Page</title>
</head>

<body>
    <div id="page">

        <div class="toparea">
            <img src="Client's Logo.png" id="logo"/>
            <h1 id="title">Significant Ceremonies by ##########</h1>
            <ul>
                <li>Tel: ############</li>
                <li>E-mail: #######################</li>
            </ul>
        </div>

        <div class="sidearea">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About Me</a></li>
                <li><a href="">Humanism</a></li>
                <li><a href="">Planning</a></li>
                <li><a href="">Specialist Areas</a></li>
                <li><a href="">Testimonials</a></li>
                <li><a href="">Contact Me</a></li>
            </ul>
        </div>

        <div class="mainarea">
            <h2 id="subtitle">Home</h2>
            <p>"I would rather live a life based on honesty, compassion and humanity through my own free will instead of it coming from the fear of
                divine beings." - ###########</p>
            <p>Welcome to my web site, here you can find information about the services I perform and about Humanism itself. Please feel free to 
                navigate around my site and if you have any questions you can either contact me directly or use the form on the 'Contact Me' page.</p>
        </div>

        <div class="bottomarea">
            <ul>
                <li>Tel: ############</li>
                <li>E-mail: #######################</li>
            </ul>
            <img src="BHA logo.jpg" id="bhalogo"/>
        </div>

    </div>
</body>
</html>

CSS

body
{
    background-color: #CCCCCC;
}

#page
{
    position: absolute;
    left: 25%;
    height: 100%;
    width: 800px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    background-color: #E6F5E6;
    font-family: vijaya, sakkal majalla, narkisim, monotype corsiva, jasmineupc, gabriola, french script mt, footlight mt light, calisto mt, papyrus;
}

.toparea
{
    float: left;
    width: 800px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

#logo
{
    float: left;
    width: 200px;
    height: 220px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 10px;
}

#title
{
    float: left;
    width: 250px;
    height: 160px;
    margin-top: 70px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 80px;
    text-align: center;
    font-size: 32px;
    color: #002E00;
}

.toparea ul
{
    float: left;
    width: 180px;
    height: 220px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 40px;
    list-style: none;
}

.sidearea
{
    clear: both;
    float: left;
    width: 200px;
    margin-top: 60px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
}

.sidearea ul
{
    list-style-type: none;
}

.sidearea ul li
{
    margin-top: 0;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 0;
    text-align: center;
    border-style: solid;
    border-radius: 5px 5px 5px 5px;
    background-color: #4DB84D;
    border-color: #002E00;
    font-size: 25px;
}

.sidearea ul li a
{
    text-decoration: none;
    color: black;
}

#subtitle
{
    color: #002E00;
}

.mainarea
{
    float: left;
    width: 560px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 20px;
    padding-right: 10px;
    padding-left: 10px;
    /*background-color: #EEF8EE;*/
}

.bottomarea
{
    clear: both;
    float: left;
    width: 800px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

.bottomarea ul
{
    position: fixed;
    bottom: 0;
    left: 360px;
    width: 610px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: 10px;
    list-style-type: none;
}

#bhalogo
{
    position: fixed;
    right: 388px;
    bottom: 0;
    width: 150px;
    height: 100px;
    margin-top: 0;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: auto;
}

Answers


Your biggest problem is that you set left: 25% and width: 800px. You're getting exactly what you asked for. The left side of that div is 25% across the page, and the width of it is 800 pixels wide. While this may work for a specific resolution, it will certainly look off-center to others.

Leave your width set and set margin: 0 auto; This sets an auto margin for left/right, which will effectively center your div on the page.


Need Your Help

Symbolication of crash log not happening

ios xcode5 crash-reports

I have the dSYM file and original archive of an application that users are having crashes with.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.