Question

I’m not sure if the resolution of the screen can affect the CSS. My screen resolution is 1280 x 1024.

Last time, I tried my website: http://alexchen.co.nr/ in a friends’s laptop and my webpage and an element (I think is #lang) moved out of place (i think it only happened in Chrome).

In my computer everything is fine (Firefox, Chrome, IE6, 7 , 8, etc.)

CSS (I’m also using Eric Meyer’s CSS reset):

/* tags */
body {
    background: #FFF;
    color: #666;
    font-family: Arial, "MS Trebuchet", sans-serif;
    font-size: 75%;
}
h1 {
    font-size: 28px;
}
h2 {
    color: #DDD;
    font-size: 18px;
    padding: 0 0 10px 0;
}
h3 {
    color: #666;
    font-size: 10px;
    font-weight: 700;
    padding: 0 0 10px 0;
    text-transform: uppercase;
}
p {
    line-height: 160%;
}
a {
    /*color: #0AE;*/
    color: #08B;
    list-style: none;
    text-decoration: none;
}
a:hover {
    color: #044;
}
/* structure */
.container {
    overflow: hidden;
    width: 960px;
}
/* header */
#header {
}
#header h1 {
    padding: 190px 20px 5px;
    overflow: hidden;
}
#header h1 a {
    background: url(../images/logo.png) no-repeat scroll 0 0;
    float: left;
    text-indent: -9999px;
    width: 216px;
    height: 28px;
}
/* banner */
#lang {
    float: right;
    padding: 202px 0 0 0;
}
#lang li {
    float: left;
}
#lang li a {
    float: left;
    font-size: 8px;
    padding: 0 5px;
    text-transform: uppercase;
}
#lang li.current a {
    color: #666;
    cursor: default;
    border-bottom: 0px;
}
/* intro */
#banner {
    overflow: hidden;
    width: 960px;
}
#banner h3 a {
    font-size: 28px;
}
#logo {
    background-color: #222;
    float: left;
    overflow: hidden;
    height: 169px;
    width: 240px; /* ie6 hack */
    height: 240px; /* ie6 hack */
}
#logo2 {
    background: -moz-linear-gradient(top, #FFF, #DDD);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD));
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FFFFFF', EndColorStr='#DDDDDD');
    background-color: #DDD;
    float: left;
    overflow: hidden;
    height: 169px;
    width: 240px; /* ie6 hack */
    height: 240px; /* ie6 hack */
}
#logo3 {
    background: -moz-linear-gradient(top, #FFF, #DDD);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD));
    filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#FFFFFF', EndColorStr='#DDDDDD');
    background-color: #DDD;
    float: left;
    overflow: hidden;
    height: 169px;
    width: 240px; /* ie6 hack */
    height: 240px; /* ie6 hack */
}
#nav {
    float: left;
    padding: 200px 0 0 40px;
}
#nav li {
        float: left;
}
#nav li a {
    float: left;
    border-left: 1px solid #08B;
    font-size: 10px;
    padding: 0 10px;
    text-transform: uppercase;
}
#nav li.current a {
    color: #888;
    cursor: default;
    border-bottom: 0px;
}
#tagline {
    float: left;
    margin: 0 40px 0 0;
    width: 540px; /* 560 */
}
#tagline h3 {
    font-size: 24px;
}
/* work */
#content {
    color: #888;
}
.showcase {
    overflow: hidden;
    width: 960px; /* ie hack */
}
.first {
    background: #222;
    display: inline; /* ie6 hack */
    float: left;
    overflow: hidden;
    position: relative;
    width: 240px;
    height: 240px;
}
.first h3, .first p {
    color: #DDD;
    padding: 20px;
}
.pusher {
    background: #333;
    display: inline; /* ie6 hack */
    float: left;
    overflow: hidden;
    position: relative;
    width: 240px;
    height: 240px;
}
.blank-pusher {
    background: #DDD;
    display: inline; /* ie6 hack */
    float: left;
    overflow: hidden;
    position: relative;
    width: 240px;
    height: 240px;
}
.pusher h3 {
    color: #DDD;
    padding: 120px 20px 10px;
}
.pusher p {
    color: #DDD;
    padding: 0 20px;
}
.nopic {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.pic {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
}
.pic:hover {
    opacity: 0.1;
    filter: alpha(opacity = 10);
}
#fancybox-outer {
    height: 100% !important;
}
#fancybox-inner {
    height: 100% !important;
}
#inline1, #inline2, #inline3, #inline4, #inline5, #inline6, #inline7, #inline8 {
    width: 680px;
}
#inline1 img, #inline2 img, #inline3 img, #inline4 img, #inline5 img, #inline6 img, #inline7 img, #inline8 img {
    margin: 0 0 10px 0;
}

(continues…)

Normal display:

alt text http://img202.imageshack.us/img202/9638/normale.png

Abnormal display:

alt text http://img199.imageshack.us/img199/2846/notnormal.png

I think I in my friend’s laptop the horizontal width, padding or margin of some elements was duplicated or something.

I made the text inside #lang a bit smaller, but not sure if the problem still there.

Is my webpage: http://alexchen.co.nr/ displaying correctly in your current screen resolution (IE, Firefox and Chrome)?

If not how do I fix it? what’s causing the problem?

Answer 1

Too see what your site looks like for different machines, OSs, and browsers, check out http://browsershots.org/.

I just submitted a job here. Your site loads very slowly (try YSlow or Page Speed to see how you can speed it up) so some browsers will time out before it finishes and you’ll see a blank screen.

Try to find out your friend’s precise OS, browser type, and browser version. If he’s on Chrome 4 and you’re on Chrome 5, for instance, results can be different.