Tom,

I tried inserting the image in the HTML header following the W3C format but I got two errors when I tried to validate. They both refered to the fact that "align" is deprecated for XHTML 1.0 Strict. It also offset the header by dropping it partly into the main page area.

Because I have both the Header Heading plus a Header paragraph below it, I tried inserting the image in both with the same result.

What I tried to do:

<div id="header">
<h1><img src="images/my-header-back.gif" width="327" height="82" alt="" align="right">Frank and Kolb, Russia</h1>
<p class="description">Two German colonies on the Volga River</p>
</div>

and then

<div id="header">
<h1>Frank and Kolb, Russia</h1>
<p class="description"><img src="images/my-header-back.gif" width="327" height="82" alt="" align="right">Two German colonies on the Volga River</p>
</div>

I ended up with basically the same results but with image even further lower when I added it to the <p>.

I have uploaded the result so you can see what it did. I only changed the index.html page.

As for those errors you found I know which page it was from, I had already fixed them between the time you viewed the page and now. But thanks for the heads up...

You can put the image tag into a div and position the div with float: right; and padding-right: 10px;. Nest that div in the main header div. Then, you won't have to use align and it will validate strict.

It will look something like this (of course the inline css will not validate and need to be in the css file.

Tom,

Yeah I had already tried using margin-right as well as padding-right to no avail.

Dave,

Thanks for the png file. I created the image in Photoshop and didn't even think of widening the canvas and then filling in with the background color. Which is what I did and now it looks pretty good.

Thanks for all of your help, though I still don't know why it wasn't working with the padding-right, margin-right. But as long as it works what the heck...

I guess padding and margins won't work with a bg image in the CSS. Taking the image out of the CSS and placing in the HTML inside a float right tag would work. Sometimes the easiest solution works best. Glad you got it working