excess background/window in Safari [Archive]

jeffmc21

05-27-2009, 08:24 PM

Hey guys!

I'm working on a site/page that I've designed to be 1024x600(ish). Obviously on many, if not most, PC's, the screen resolution will allow the page to fill a full-sized window but not exceed it. Even on 800x600, the content will be centered, and therefore visible.

My problem is with Mac's and Safari. I also have two Mac's in my office, and like most Mac users I take advantage of the larger screen resolution. However, by doing so, I create a lot of extra "whitespace" (although not necessarily white), outside of the confines of the page. For instance, my current Safari window is 1370x797. That means that my 1024x600 page doesn't fill the window and leaves a lot of background image/color showing.

This looks awful with my page layout (which I've included in basic form). The black/gray slant would be the background, and cover the window. The gray/metal curved sides would be within a div on the page, and therefore no larger than the 1024x600 they are now.

Any suggestions on how to solve, fix, or avoid this problem?

VIPStephan

05-27-2009, 11:59 PM

1.) There’s absolutely no difference whatsoever between screen resolutions on Windows PCs and Apple PCs (a. k. a. Macs). I can plug any display of any brand into my Mac mini as I can plug it into an average computer of other type. And on the other hand there are same size screens for any kind of computer as the average iMac has by default. And if you haven’t been asleep for the last ten years you’ll notice that wide screens are becoming more and more popular in general, not only among Mac users.

Moreso, there is no substantial difference between Safari in Mac OS and Safari in Windows, or between Firefox/Opera in any operating system in which they are running.

2.) As to your question: Copy a small section of the egde of your image (ike 5×5 px or 10×10 px or whatever) so that it’s able to repeat itself to be tiled and form a seamless background in your page (applied to the <html> element). Then place the current background image over this (applied to the <body> element).