spacing issue

I'm not entirely sure what you mean.

If you are referring to the vertical scrollbar appearing at the same time the horizontal scrollbar appears, even though the browser window is tall enough to display all your content ... that's a side-effect of using height: 100%;

Your CSS seems overly complex.
- you can centre by using "margin-left: auto; margin-right: auto;".
- position: absolute; (and therefore the position:relative; and the offsets) shouldn't be necessary.

If you change your background strategy, you should be able to accomplish the page without using height:100%; Put the background image "bg_grunge" on all of html, body and #container.

You'll end up with something like this ...

/* main stuff */

html, body {
	background: #333 url(images/bg_grunge.gif) top center no-repeat;
	margin: 0px;
	padding: 0px;
}

body {
	font-family: Helvetica, Arial, sans-serif;
	color: #fff;
	font-size: 1em;
}
div#container {
	width: 740px;
	margin: 0 auto;
	background: #000 url(images/bg_grunge.gif) top center no-repeat;
}
div#header {
	width: 640px;
	margin-left: 70px;
}
div#main {
	float: left;
	width: 640px;
	margin-left: 70px;
	display: inline;   /* for IE/Win */
}

.headerLogo {
	width: 240px;
	float: left;

}
.headerNav {
	width: 300px;
	float: right;
	margin-right: 50px;
	line-height: 0px;
	display: inline /* for IE/Win */
}

yeah, your code is much simpler, but now if you look at the site it doesn't do what i originally had it do. the faded grey background doesn't span the entire width of the page and the inner area's background is not black so you just see the images.

i uploaded the new stylesheet so you can see what i mean. it's close, and for that i appreciate it very much, but it's not quite there and i don't know why.

i am going to be looking through the code to try and find out what i need to do and also figure why my code was so off. lol

edit:
i noticed that the images/bg.gif was no where to be found in the code. i have tried to use it where i think it's appropriate with the repeat-x, but that does not work.

That is what I meant by rethink your background strategy.

My reworking uses the same background image on html, body and #container. To use that sort of system, you'll need to extend the background image until its safe to merge it with a flat colour. You set that flat colour as the background colour (currently #333).

bg.gif is safe to merge with a solid, in particular #333.

i'm sorry, i guess i don't understand what i need to get the bg and #container fixed. i've tried numerous ways to get them looking like they should and it's like i can have the bg.gif working, but then no bg_grunge.

i just don't have enough aptitude to figure out how i can attack the page with a new background strategy and get the same results i had before (minus the obvious flaw that i came to the forums for).

Picture how the page should look without all the foreground stuff. Make that your background image.

/edit, it might be enough to make #container's background colour black.

check out http://www.timyager.com/wwwroot/

size your browser window in such a fashion that it only displays maybe 50 pixels tall and scroll down. do you see how the grunge outline for the content area stops? now re-size your window to be even larger, do you see how it slowly fills the gap at the bottom of the screen?

i don't know how to fix that, but there must be a way.

Looking at things as they stand at this moment your problems with that #container background stem from the fact that you need to clear your container around it's floated children and also use the height property correctly.

add overflow:hidden to #container and change height:100% to min-height:100% then add after the rule

* html #container{height:100%;} for IE6

Floated elements are meant to drop through parent containers and height 100% is the height of the viewport and is as such a fixed height.

IE6 incorrectly auto expands to contain content that tries to overflow it's parent if it is in haslayout mode(widthed, heighted, and other properties)

You should have a read of the float and height properties to fully understand how to use them, especially floats as they need to be properly understood to be used effectively.

Hugo.

There is ... remove all those height:100% (like I already did). 100% means 100% of the browser window. Then fix your background ... (sound familiar).

I'll try and explain in more detail.

Putting one background on html will ensure it fills the browser window. Putting the background on body and #container will ensure when the content is taller than the browser window it will keep going until the bottom of the content.

There is another way to ensure the browser fills the window - using height:100% and min-height:100% as you had originally - but that will get you a horizontal scrollbar whenever a vertical scrollbar appears (which you didn't want originally).

The only way around this is to make a super background. There is nothing fancy about the background that ends up on the user's browser. You've just decided to create it with a combination of two images. The combination of those two images is always the same, so instead of the user's browser doing the combining, you do it and send them the combined image.

Right now you're thinking too clever. You have one image that repeats horizontally providing a gradient. And another which provides a border down your content. You are using transparency on the second image to let the black background of the #container shine through.

(1) Decide the largest screen size you want to cater for ... 2000 x 1500 is probably enough.

(2) Imagine how the background will look in all its 2000px x 1500px glory.

(3) Make that image. Don't bother with messing with transparency - you don't need it, its one background image and there is nothing behind it.

Thats it your done. For all the new image is three times the size of your original, its 25% smaller.

i thought there was a better way without having to make the user download a huge background file, guess there isn't. that's really disappointing, i thought css was a little more powerful. at any rate, i got what i was looking for i suppose.

Don't get CSS, confused with the browser's implementation of CSS.

I am pretty sure CSS doesn't specify that a browser needs to make a horizontal scrollbar (for no reason) when the CSS uses height:100%. That is browser implementation.

For whatever reason, your huge image files seem too large. My image at 2000 x 1500 was ~68k. Yours at 2000 x 2000 is 120k+. Try making it a 8bit png instead.

do you happen to have a mac running ie?

this is what i'm running into: http://www.timyager.com/back/

here is a screenshot if you don't have a mac.

i have no clue why this is doing what it's doing. lol sorry to keep bugging you.

No, right now I don't have IE/Mac - though my Mac arrives today .

Does this help any : http://macedition.com/cb/ie5macbugs/#tablecentering

spot on!

and congrats on your mac dude! how exciting! details!

Not that exciting. Its a second hand G3 purchased through ebay to enable me to test websites in Safari, Camino and maybe IE5/Mac. In fact its disappointing, its turned up the day after I started my claim for non-delivery[1] without the keyboard and with the hard disk loose inside.

[1] to be fair it seems that problem was due to our illustrious Royal Mail's parcel delivery service, that (a) couldn't find my address and (b) claimed to have attempted to deliver it several days ago on a day I was at home all day.

yeah, so i'm having some trouble. the article is geared more towards centering tables, not ... whatever div#container is called.

see how new i am at this!! lol

Its main point is to use:

margin-left: auto;
margin-right: auto;

as

margin: x auto; /* x is some arbitrary CSS length value, e.g. 0 */

doesn't work. I am guessing the same thing applies to other elements besides tables, but I have no way of checking.

i added said rules to the div#container element to no avail. i'd to think i have to tell the client to live with it because mac ie5 blows, but yeah...