Problem displaying split header image in IE

[MikeFL]

I am creating a new logo for my site which I "want" to flow outside of the header. I have the graphic split into two images (top, bottom).

The template has the header on top, then the menu bar below it, then the content.

I resorted to using a table to display the logo since I could not get DIV's to work. I could position the bottom image on my screen, but when I switched screen sizes, the image relocated drastically.

Using the table idea looks fine with Firefox (on my end at least), but under IE, the bottom part of the image, which overlaps the menu bar, doesn't show up. Sort of like the menu bar covers the image. :confused:

Any ideas how to correct this? It's a simple logo, but something I would expand on once I figure (with help!) this out.

Thanks for the help!
Mike

PS: I'm working on this in a subdirectory (for testing purposes):
http://www.directory411.us/testrun

[bruleo]

Without seeing your CSS file, I'm guessing here, but it looks like your header has a fixed width. Look in your CSS for 'header' and you shouldbe able to adjust the header height.

Bruce.

[MikeFL]

Thanks Bruce,

I gave the header more "room" and it still doesn't work. It appears that the image shows up, then is being covered up by the top bar/navigation bar...only in IE.

In IE, like it's in slow-motion, I can see the complete logo very briefly, then the nav-bar displays on top of the bottom image of the logo. In Firefox, of course, it's fine.

[bruleo]

Ok, I think I see what you are trying to do now... I am preuming you want the bottom half of the logo to show over the menu bar!

It's being covered because (in the instance) IE7 is actually following the rules and elements are placed according to the natural flow and the bar is in the flow later than the logo and is therefore placed over the top.

What you need to do is 'position' the logo and then specify an index.

Try adding 'position:relative;' and a 'z-index:10;' (higher than default) to you CSS for the logo (the image). The z-index specifies the position for layered elements, but only works for elemnts that are positioned.

It's exactly the same thing I had to do with the logo at the bottom of the page at Sportindexer.com.

Bruce.

[MikeFL]

Thanks Bruce! I had tried that earlier (and absolute, fixed, etc), but I was getting wild results. Using your code example in the CSS, I get the bottom image above the nav bar, but there is a gap (5 to 10 pixels?) between it and the top image (again, only in IE).

I've tried putting it back in a table also with the same results. I do not have any BR (new line) between images, or image margins in the CSS.

BTW, I looked at sportindexer.com. Beautiful template. This is similar to how you did the mirror effect at the bottom right?

If I can figure out the gap issue, I may use this type of header logo.

Thanks for the help.
Mike

[bruleo]

The gap is probably due to a padding somewhere in the CSS. I'm not sure about your template, but in the default professional theme, all <td> elements are given a 5 pixel gap. Just add a style="padding:0" to the table td you have surrounding the logo, and you should be good to go!

The method I used at sportindexer was exactly the same! The image is naturally position above the bottom menu bar, but I used position:relative to push it down. The only difference was that I didn't need the z-index, because it was place in the right flow order. Some elements in my template (like the mouseovers on the 'DESC' for the categories, relies on the z-index to work correctly as everything below shows through without it.

Thanks for the comment about the template: I'm very pleased with it. :)

Bruce.

[MikeFL]

Thanks again for the tip.

I checked the CSS and nothing was padded, table/td-wise. Back in the template, though, I added cellpadding and cellspacing to the table (set to 0), then added the style to the TD. Overkill, I guess. Still had the gap. I also defined table/cell widths and heights based on the image sizes.

Anyway after a few more trial-and-errors, I viewed the generated output in IE and noticed extra spaces between the images and after the bottom image. Weird. I cleaned up the spaces in the template. Maybe since I was defining the width of the header (in CSS) and table as the same width of the images, but adding extra spaces after, could have caused a gap...?

No gap now.

I'm using a heavily modified MiddleEarth. Now that you told me about z-index, I'm wondering what else I can do with it. hehe

Thanks again for the help!
Mike