Is This A Z-Index Issue?


I have the logo located in the top left exported as a PNG and it looks great in most every browser except for IE7. The logo seems to be clipped in half.

I went in and added a z-index property to that element but it did not fix the problem. Can someone take a look and let me know why this would happen? Thanks in advance to anyone who can help!


Hi, in order for IE to diosplay elements out of their containers, normally position:relative is needed :slight_smile:


Hey Ryan,

Any ideas why it falls apart in IE6? The position relative fixed IE7. Your a genius. How is the job hunt going…

Off Topic:

Quite horrible actually :). I need more clients lol. I’ve been slacking lately…I’ve been replacing my time doing jobs with clients with learning algorithms for Fridrich method for rubiks cubes…I’ll be done (expected “graduation date” is May 8th so hopefully I’ll start looking harder then)

The page is mainly falling apart becauise the nav LI’s are widthless and floated and teh anchors have haslayout (a height) and as a result they are being stretched 100%. Floating them left will fix it.

The next issue is a double float margin bug which is causing an out of place element, display:inline; will fix that.

The 3rd and final issue is that the header height is being expanded higher then 74px to accomodate the logo (which normal browsers will let sit out). Restricting that height will fix that. Overflow:hidden;

#nav li a{float:left;}

I have applied the changes that you listed and it lines up better but not completely like the way it appears in Safari. Now in IE8 the logo (top left) is being clipped like in the original situation with IE7. IE7 does not clip it now but IE8 shows only half of their logo.

And the float:left property for the nav li.a’s worked a little… the don’t push everything all the way down the page any more, but they seem to have more space between each link or button up in the yellow bar. So much extra space that the last link “Contact Us” is pushed past the wrapper width.

What gives?

IE8 logo issue, try giving the overflow only to IE6 (there might be a better solution but I haven’t looked at the code)

* html #logo{overflow:hidden;}

You mention the navigation issue, so I will have to look at the page for that.

Something is causing the page to not load? The <title> appears so it is loading, though nothing beyond that?

Weird. It will work in IE6 and IE7, but now it doesn’t work in IE8, Safari, Firefox or Chrome. Does it have something to do with the logo being a PNG? There is a PNG Fix JS in there.

This seems to be happening only in IE6.

I had these issues yesterday but none today… so far.