IE7 Debug Issue - Absolute Background

I am having an issue in IE with a background issue for this page: http://vitaminjdesign.com/IAM/company/

In all browsers it appears correctly BUT in IE. In IE7, The div, .aboutbg is way off to the right. Here is my HTML

<div id="companywrap">
   <ul id="leftcol">
    <li>nav item</li>
    <li>nav item</li>
    <li>nav item</li>
   </ul>

   <div id="rightcol">
      <h1 class="title">Parker Homescape <span>Company Overview</span></h1>
      <div id="companytext">
    <a class="readmorehome" href="/press">VIEW PRESS & AWARDS</a>
      </div>
   </div>
   <div class="aboutbg"></div>
</div>

Basically, the companywrap is relatively positioned and the the div .aboutbg is absolutely positioned with a negative z-index (so the background image is truly in the background). For some reason in IE&开发者_JS百科amp; the background is displaying way off to the right.

THE SECOND ISSUE I am having is with the nav (ul id="leftcol"). Look at it in IE7 and you will see what I mean. There seems to be line breaks added in. Any ideas?

First issue: I don't even see a background in IE7, and I think it's due to the negative z-index. Your z-indexes are pretty wild - I'd avoid using negatives altogether.

edit: For example, try by setting your z-index on .aboutbg to 0, and start moving the rest of your indexes up from there. Also, I noticed you're using a class for aboutbg but there's only one instance of it. Why not use an id instead?

Second issue: I'm not sure, but perhaps try adding a specific line-height to ul#leftcol li - I didn't see anything in reset.css or style.css.

If I recall IE7 doesn't work well with negative z-index. Or any z-index for that matter.

Give your companywrap div a z-index higher than the aboutbg div and change the aboutbg z-index to a positive number.