the div has got no size?

in any case i don't think using a backround image for your logo is a good idea symantically

OT... i've been using the <picture> tag with great success - setting different images for different screen widths

Where is your viewport test code? Two of your images are named the same. Just askin'!

1. What is seen when viewing the source code?
2. Have you checked headers to see the server response if/when an image is requested?
3. Have you tried validating the css and html?

W3.org can help isolate a problem when you have unexpected results.
HTML Validator: [validator.w3.org...]
CSS Validator: [jigsaw.w3.org...]

@topr8

re div size -- I figured I can't do that as the logos come in 3 different sizes.
I don't like using a background img for logo as can't use alt tag, etc., but don't know of another way to do it.
I'll check into the picture tag as I"ve never used it.

@Tangor

The 2 image names being the same was due to copy/paste into this forum. It's ok on the website.
Re viewport test code - I haven't been using Chrome's test code as I don't like Chrome. I use Firefox when working with websites. Besides I just checked Chrome and it says that Mac 10.7 is no longer supported and I'm not ready to upgrade. I write code by hand, check pages visually by resizing the browser window, run everything through W3C and finally an online tablet/mobile checker.

@not2easy

The source code for header is same as I posted above for ID = header and header.txt file.

When using firefox developer/view source it shows an error on that line but it looks correct to me. (missing </a> before <div>)

<div id="header">
<a href="index.html"><div id="logobanner"> </div></a>
</div>

I suspect Firefox isn't set up for HTML5 which I'm using as other errors do not apply.

The HTML validates, the CSS validates except for a new nav I'm trying out. I don't think it's interfering with the header data. The logobanner not loading affects all pages, not just the page I'm testing.

I have written in the url for logobanner on the home page exactly as described above, and that loads fine so it's not a missing image, etc.

Can you explain how to view the server response?

--
thanks to everyone for trying to help.

(missing </a> before <div>

It is because it does not like to have <div> inside <a>.

Try to style <a> with display: block and/or replace div inside <a> with <span> which also has display:block

Does this misspelling occur elsewhere in the code?

Mobilie:

Can you explain how to view the server response?

I use a Firefox extension that can be activated just to check the headers of a page request, it produces a file which can be saved as plain text to see specific resource requests and server responses. It looks messy until you spend a little time looking through it. I believe there is a headers tool here in the forum's free tools also.

div size -- I figured I can't do that as the logos come in 3 different sizes

Sure you can. Put the CSS in the same place that you're currently defining the three different background-images, and for each one specify a {min-height} for the div, determined by the image size plus whatever padding you need.

When I have something whose sole content is a background image, I always feel safer saying <div blahblah>&nbsp;</div> because then abracadabra you've got content as far as the browser is concerned. (Same thing with borders of empty table cells, so you don't have to trust the browser to do what it's supposed to do.)

It is because it does not like to have <div> inside <a>.

How many antique versions of MSIE do you need to support? On paper, <a> used to be considered an inline element, so <div> inside <a> would fail validation even when browsers were happy to display it. Today it should make no difference.

@ aakk9999

I added this to the header.txt and it didn't work - even emptied the cache and tried again.

<a href="index.html" class="display:block;"><span id="logobanner" class="display:block;"> </span></a>

Lucy24 said it's not needed so I removed it again.

@lucy24

I added width and min-height to css everywhere I listed the images and that didn't work.

Then I added &nbsp; between the div's in header.txt and that fixed it.
Alll this trouble for lack of a space &"0@0&^! (grrrrr).

PS. Being a Mac lover I have no interest in supporting any version of MSIE. :) but thanks for confirming I don't need to make changes to the <a>.

I'll make note of what worked for future reference.
----
Thanks everyone! It's working now.