I’m dead now. I designed my website using my laptop that has high resolution. Now when my lappy broke then I’m forced to shift in my desktop computer that has low resolution. When I saw my work, it was broken. Floats disarranged. width are miscalculated and absolute positioned elements are stuck. I’m making my first website. I’m trying to convince myself that it is normal.
I knew my problem is that I assumed that my expected audience is using the same monitor resolution I’m using. I overlooked it. Now I must pay its price.
Is there anybody experienced the same thing? how do you fixed it? I used firebug and web developer but I don’t know how to maximize its capacity, I don’t know how to use it. Any help will do.
No worries, claro. This shouldn’t be too hard to fix. Welcome to to wonderful world of web design … never knowing what devices your site will be displayed in.
The main problem here is using things like position: absolute to position things. It’s mostly a really bad idea, partly for the reason you’ve just described. However, you can either use a different method of layout, or the positioning problem can be fixed pretty easily with what you have.
We’ll need to see your site to advise further, though.
I’ve moved this to the CSS forum, too, as this is a CSS issue.
One thing to keep in mind is even if someone is viewing a site at 1920 x 1200 resolution, they might not necessarily have the browser window taking up the whole screen, they might have the browser tiled (either horizontal or vertical) with another window.
Having two windows open side by side is becoming far more common. Windows 7 introduced keyboard shortcuts using the window key with the left and right arrows to make having the windows fill exactly half the screen and make it easy to swap them from one site to the other allowing you to have any number of windows open half screen width and see any two at the one time.