Would a staff member please delete the URL to the sample page in me post above? Thanks.

I've got the photos so you can go ahead and delete them from your server. Thanks again.

(URL deleted - Hanni)

Thanks, but let's wait to see if I'll be able to be around more. If I can, you know I'll be more than happy to assist.

BTW, thanks for your compliment on my web app :)

JT4,

So you want your blog to look like this, right? Well, let's modify your CSS code to accomplish this.

I took the liberty of modifying your header image and created a background image for your contents. You can get them from here:

http://www.coderlab.us/samples/jt4/header_bg.jpg
http://www.coderlab.us/samples/jt4/contents_bg.gif

After you get them, would you please let me know so I can delete the files, and sample page from me server? Thanks

Now the fun part.

In your "body" definition you have this:

background:color:#CE7B02 repeat-x top center fixed;
...
...
background-color:#F1E9CE!important;

This is incorrect. The syntax of the first line is wrong. You cannot set the value of a property with other properties like that. The correct way would be:

background: #f1e9ce;

This will render unnecessary the second property: background-color:#F1E9CE !important;. Oh, and you don't need the !important rule. Also, I'd recommend you to use shortcuts instead. If you didn't know background is the shortcut of the background-xxx properties.

So, I'd recommend you to write your definitions like so:

body {
	background: #F1E9CE;
	border:none;
	font-size:66%;
	font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
	color:#6F815D;
	text-align:left;
	margin:0;
	padding:0;
}

#page {
	background: #CABDBF url(contents_bg.gif) top left repeat-y;
	width:1000px;
	margin: 0 auto;
	padding: 0;
	clear: both;
	position: relative;
	overflow: hidden;
}

#header {
	height:457px;
	width:1000px;
	background: transparent url(header_bg.jpg) top left no-repeat;
	clear: both;
	margin: 0;
	padding: 0;
}

#content {
	float:left;
	background-color:#CABDBF;
	width:493px;
	overflow:hidden;
	margin: 0 0 0 50px;
	padding:20px 0 0 25px;
}

html > body #content {margin: 0 0 0 100px;}

#sidebar {
	width:227px;
	border-left:1px solid #896A70;
	margin:0 0 0 637px;
	padding:10px 0 20px 25px;
}

#footer {
	text-align:right;
	clear:both;
	height:50px;
	margin-right: 100px;
	padding:20px 15px 0 0;
}

Those are the only definitions you need to modify.

I'd recommend you also to move "#header h1" and "#header .description" below the "#header" definition. Even though it doesn't matter where you define your elements, it's more organized and easier to find them later.

Those are the changes you need to make in order to make your blog look the way you want. I tested the code in Firefox 3 and IE6, so you should be okay with those browsers. Although I haven't tested it in Safari nor Opera, I'm bet it'll look good in those too.

On a side note, I'm glad that wp.com is finally allowing the use of child selectors... sometimes IE6 can be a real pain and child selectors help to work around the "headaches" IE provides.

HTH

I can't change the header size without changing the content size as well

Yes, you can. If you create a background image for #page using a technique similar to faux columns, you should be able to achieve the results you want.

I can't give you more details right now, but at lunch time I'll have more time and I will explain in more detail.

Also, I'll look into using a different font. Thanks!

Now, do you really need the RetroLoveThemeBackG3.jpg file? is that "duplicate" effect you want to give to your header? if so, let me know so that I can try to come up with a solution to your problem.

BTW, I would recommend you to not use Lucida Grande, it's a font really hard to read especially if it's small... just a suggestion.

Or widen the #wrapper.

Thanks for the help, unfortunately what you suggested didn't work... Is there any other suggestion that you would be able to give me?

Thanks Again

Since you've just started with that blog, might I suggest you use the newer version of Sandbox (1.0) rather than the older one that you are working with.

I think the problem is here:

div#content.hfeed {
width:532px;
margin:0 0 0 200px;
padding:0;
}

I believe the margin should be:

margin:0 200px;

I am having a bit of trouble customizing my blog with CSS. Here is the blog: http://provexpo09.wordpress.com
The setup is primary sidebar - content - secondary sidebar. There is something that is pushing down the secondary sidebar, it should be aligned at the same height as the rest of the page content. Any suggests the anyone has would be greatly appreciated.

Thanks,
_Jake

See: http://inrepair.files.wordpress.com/2008/10/corner_problem.jpg

This works great except on short pages, where the background color only goes to just below the post and doesn't extend down to the footer.

See: http://inrepair.net/contact/

Is there a workaround so that I can keep my rounded corners and have my background color go all the way to the footer?

As for the CSS editor adding in that semicolon - that's something that you should report to support. (Since the fixed also should not have a semicolon after it, it's not having any effect on the CSS.)

And I see that your bg is NOT scrolling. Take the semicolon out after the word scroll