IE7 position absolute issue

Question 1

You can put this on the section of your website:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

This will disable the Compatibility mode and stop messing your site.

Question 2

maikelsabido's answer is valid but only covers half of the issue. There is no point to supporting IE10 while it is rendering as IE7. So few people do this (my statistics are based on JavaScript/DOM object detection, not the user agent and therefore are extremely reliable, my site triggers an error 9999 if you try forcibly overriding the rendering mode) so just don't bother with IE10 rendering as IE7. However to test IE7 you should keep a copy of XP in a virtual machine.

That being said while Microsoft did a very small update to clean things up in IE7 it still has numerous issues. You'll want to use an Internet Explorer Conditional Comment Style Sheet which I have a full tutorial on how to implement at my site here...

http://www.jabcreations.com/web/css/ieccss

Once you've implemented an IECCSS for IE7 you don't need to use any hacks, just position it for IE7 specifically.

That being said your page layout doesn't look like you need CSS level 2 positioning at all. Even IE 5.0 has respectable CSS level 1 support if you know how to do basic layouts correctly, but don't feel bad because besides my site I always see people jumping head-first in their tutorials to use position instead of float. So if you want much more stable CSS in general and limit positioning for SEO purposes I recommend reading my CSS level 1 tutorial here as well...

http://www.jabcreations.com/web/css/nested-divisible-elements

If you do that it will limit your need to use CSS level 2 position. With your layout the only thing I was use position for is to keep the content at the top of the body element and then put the menus below the content in the code...and then use position to visually put the menus where they are on the page. If you disable CSS (e.g. Firefox's Web Developer toolbar does this easily or Firefox --> View [menu] --> Page Style [menu] --> No Style) that is how a search engine sees your page.

Also you really should fix your header elements. You have two h4 and then several h2 elements. You want to think of your page like a newspaper, yours currently has nothing about winning the war using h1 but at the top of the front page the most important story is h4 saving a cat from a tree in a retirement home. Understanding the semantics of HTML can be a powerful tool in combination with search engines in getting more people to find your site because you've made it easier for the search engine to understand the semantics of your content.

I hope this helps and if you have any other questions feel free to ask.

Question 3

Add style rule position:relative to wraper id main-wrap like

#main-wrap{
    position:relative;
}

and the add the following CSS to the ".info-bg" div

.info-bg{
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    bottom: 0;
    height: 600px; /* change according to your need */
    box-shadow: 0 0 73px rgba(0, 0, 0, 0.15) inset, 4px 0 4px rgba(0, 0, 0, 0.08);  
}

Further you can check out this page to know how z-index property actually works - http://www.tutorialrepublic.com/css-tutorial/css-layers.php

Question 4

I fixed the issue you highlighted in IE7. But I need you to see this gist https://gist.github.com/anonymous/6607075 and try it on your side.

It's quite hard to fix on my side because I don't have your Wordpress theme.

Anyway, with regards to the gist (https://gist.github.com/anonymous/6607075 )

For the css, look at the code at line 108. For the #info-wrapper
For the html, at line 94, I added a <div id="info-wrapper">

See if this fix the issue? If not, let me know in the comments.

--

Edit: You can download the files that I did test in IE7, here at wetransfer