/    Sign up×
Community /Pin to ProfileBookmark

A TEST [to determine once & for all…Browser Size vs. Resolution]

Copy linkTweet thisAlerts:
Sep 30.2010

[B]stay with me on this one, please…[/B]

[Background: someone told me once that a typical browser (IE)…with the monitor set to 1024 X 768…will display as 1003 X 567.]

so w/ the little guy still in mind, I design my web pages for that size…& also so that they will center on larger monitors &/or higher screen resolution settings.

I use a simple CSS parent & child layering system of coding in the Body for that purpose:

[CODE]<body>
<div id=”Layer1″ style=”position:relative; width:1003px; height:567px; margin: 0 auto;”>
<div id=”Layer2″ style=”position:absolute; left:0px; top:0px; width:1003px; height:567px; z-index:1; background-color: #00FFFF; layer-background-color: #00FFFF; border: none #000000;”></div>
</div>
</body>[/CODE]

& in the Head I just set my margins & padding to zero as follows:

[CODE]<style type=”text/css”>
body, html{
margin:0;
padding:0;
}
</style>[/CODE]

SO…I set up the following simple test page, which has both parent & child layers set to 1003 X 567. The child layer has background color. Open the page; & minimize your browser so that there are NO horizontal & vertical [I]scroll bars[/I] (then maximize to see the background color layer perfectly centered):

[url]http://www.moonjams.com/1024_768.htm[/url]

NOW…go to [I]THIS[/I] page…set up exactly the same way codewise (except for the height of the parent layer…which should [I]only[/I] have an effect on the [I]vertical[/I] scroll bar)…where the three images you see are spread to fill the 1003 px wide parent layer perfectly…

…& you’ll see that that when your browser is minimized (from the previous resizing)…this page is [B]WIDER[/B]…& a horizontal scroll bar has appeared:

[url]http://www.jerseyrails.com/wjhc_clp_sfrt.htm[/url]

please view the source code for both pages & tell me freakin’ [B][I]WHY[/I][/B]…???

thanks,

[B]mark4man[/B]

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@Major_PayneSep 30.2010 — In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/

Choosing Dimensions for Your Web Page Layout:

http://www.elated.com/articles/choosing-dimensions-for-your-web-page-layout/

How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/

Care With Font Size: http://www.w3.org/QA/Tips/font-size
Copy linkTweet thisAlerts:
@mark4manauthorSep 30.2010 — [B]Major Payne...[/B]

Thanks for that (especially the 2nd link, which is [I]outstanding[/I])...

...[I][B]BUT[/B][/I]...

the problem here is that there are two [I]different[/I] results w/ the same coding:

the test page...the one w/ a background color layer...does [I]not[/I] show a scrollbar.

the 2nd page, which is coded the same (horizontally)...[I]does[/I].

that's what I need to figure out...why the [I]difference[/I] between the two ? (& then obviously make code repairs to the 2nd page...which will be a legitimate page from my new hiking site)

thanks again,


[B]mark4man [/B]
Copy linkTweet thisAlerts:
@tracknutSep 30.2010 — On this page: http://www.jerseyrails.com/wjhc_clp_sfrt.htm you have the Layer1 div set to "height:2150px". Seems that's creating a vertical scrollbar, which then takes up some horizontal width, which then causes the need for a horizontal scrollbar. What happens if you set that height to 567px, like the first example?

Dave
Copy linkTweet thisAlerts:
@mark4manauthorOct 01.2010 — I got it, now...thanks...extra height means vertical bar which takes up some display width.

this also means that...since essentially all web pages appear below the fold...pages should always be designed to the narrower 1003 width (983 or thereabouts).

quick question...why is 1003 the default pixel width for the 1024 resolution #...???

thanks again,


[B]mark4man[/B]
Copy linkTweet thisAlerts:
@tracknutOct 01.2010 — quick question...why is 1003 the default pixel width for the 1024 resolution #...???
[/QUOTE]

Well I don't know that 1003 is *the* magic number. I presume you got it by maximizing your IE browser of some version, on a PC running a particular OS, and then seeing how large you could display a box before you got a horizontal scroll bar. I bet if you change the version of IE, change the OS, or go to a different browser, you would get a different magic number.

Personally I tend to build sites at 980px wide, for the same reasons you are, but I have not rigorously tested it.

Dave
Copy linkTweet thisAlerts:
@mark4manauthorOct 01.2010 — I'm getting away w/ [I]986[/I], now (in IE8)...check out that 2nd site now

thanks,


[B]mark4man[/B]
×

Success!

Help @mark4man spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...