IE6 making logo disappear

[reuber1]

http://64.198.195.247/?skinid=2

(Thanks to Drazan, Resdog, and others with the background issue...as far as I can tell that looks like this is working)

If you're using IE6, you should notice the big empty white space at the top left of the main page area. Firefox, IE7, and Opera are working great. IE6, not so much. I can't determine what is causing this problem...the alt text isn't showing at all, and when trying to highlight that area, it can't find even an empty div there.

Here's the CSS link: http://64.198.195.247/skins/Skin_2/style.css
Here's the CSS for that particular area.
.logo {
position: absolute;
top:0px;
left:0px;
}

I tried specifying #header .logo, and also adding a z-index of 11, and neither of those worked.

[reuber1]

OK, this is FUBAR. I pulled up the site in IE6 and inspected using Internet Explorer Developer Toolbar, and when I looked at it using the DOM Inspector, the image is getting a width set of 0, which when increased, it appears. Thing is, I do have a width specified in the template of 551 pixels though, it even shows when you click View Source in IE6. WTF?

[Ned]

My guess is that you need more options in your stylesheet. First off, you should have a height and width value (simply, height: Xpx; width: Ypx), secondly, you should have a Z-index value on all your div layers. Use Z-index: #, placing the objects on top with a higher index value. You should use multiples of 5 or so, in case you need to slip something in-between, up to a max. of 100.

[reuber1]

I already tried Height and Width in the stylesheet, as well as a z-index on that class and there should already be one on the header, and neither worked out.

[Ned]

What is the class being applied to, the image tag, or a div tag? Perhaps you should try putting the logo in its own div tag, and set the z-index above the rest of the header.

[Ned]

Okay, I'm looking through your code, and it looks like you've got too many divs within divs, all with specified position values. If using divs for positioning, you should leave them more in the root of your HTML Body, and use any divs within each "layer" for style specification, only, not further positioning.

(Of course, I'm still guessing here. I can't see exactly where the problem is, so I'm surmising by what I see could be done better.)

Also, I tried opening the page in an IETab, and it does indeed erase the image for me. :(

[reuber1]

I'm new to CSS, and most of what I've read on it is not all that helpful in terms of easing the learning curve, so there's going to be inconsistencies in my code. If I had all the time in the world to make it perfect, I would take advantage of it, but I don't. Yet, I still don't think having too many divs within divs should be causing this problem. Part of the divs inside divs was to solve my dual background image dilemma that I posted in a different thread.

[Ned]

Oh yes, I do remember that, Reuber... Perhaps a better layout for the site would be more along the lines of:

<div1>background guitar image</div>
<div2>website body area</div2>
<div3>content in body, laid out in tables</div3>

I'm sure a redesign would fix your problem, but I understand that's probably not an option. I wish I could direct you to the exact code that's giving you problems... Perhaps somebody else will be able to pick it out.

[reuber1]

Going relative seems to have solved it, with a few fixes here and there.

Oh well, thanks for taking a look Ned.