IE 7 DIV Shifts right

Question

In IE 7 my div's shift far too much to the right, whilst they behave correctly in Google Chrome. At first I thought it was the z-index but then worked out in was the position:absolute Has anyone come across a fix, it would be much appreciated!

Screenshots:

IE7 http://i56.tinypic.com/2vjsqwz.png

Here is CSS:

#rightinfohomecontainer {
height: 300px;
width: 400px;
margin-top:160px;
    float: left;
z-index: 3;
overflow: hidden;
position: relative;

#rightinfoboxhome {
float: left;
height: 100px;
width: 400px;
z-index: 2;
overflow: visible;
position: absolute;
margin-left: 0px;

#rightinfoboxtext {

float: left;
height: 245px;
width: 344px;
z-index: 1;
margin-top: 60px;
padding-left: 50px;
overflow: hidden;
padding-right: 6px;
padding-top: 2px;
margin-left: 0px;
position: absolute;
}
#rightcolumn {
    float: left;
    height: 600px;
    width: 450px;
}

HTML

<div id="rightcolumn">
<div id="rightinfohomecontainer">
<div id="rightinfoboxhome"><img src="images/aboutus.png" /> </div>
<div id="rightinfoboxtext"></div>
</div></div>

Answer 1

Without seeing the actual page, it's going to be very difficult to diagnose. It's likely something to do with the CSS of the left image, but that's not included in your question. Your position absolute is basically pointless, since that div will already be at 0px 0px of it's parent anyway.

My guess is this is not an IE7 issue, but instead an overall incorrect/bad CSS issue. Create a jsfiddle, and I can look at it further.

For starters, you should probably try using a CSS Reset like the link below, or at least try putting this at the top of your main css stylesheet:

* {
    margin: 0px;
    padding: 0px;
}

This will start all browsers with default 0 margin and 0 padding for all elements - since some browsers have minds of their own and think you want padding/margins when you really don't.

CSS Reset

---

Edit:

• Don't use tables (ever - but especially for your menu)
• No reason to set overflow:visible; that's the default
• try not setting absolutely everything to float - for example - does slideshow need to be floated? If you can get away with only the columns being floated, you'll be better off, and will hopefully be more clear what the problem is.

Overall problem causing IE7 to freak out: not sure honestly. Strip your page down to the bare minimum - 2 columns. Get the CSS working with JUST those 2, using as little CSS as possible to do that. Then, when you get it working in IE7 too, you can slowly add things like images, then menu...etc etc. Check after each addition to see if anything screwed up.

Sorry I can't be of more help, but - that's the way to do it. If you get it stripped completely down, and it's still not working, send a link to that jsfiddle.

Answer 2

Some of this code doesn't make sense.

1. You have absolute positioning on divs which don't appear to have values for top, bottom, left or right. Absolute will use default valeus for top and left if you don't set these yourself.

2. You have z-index values for divs which aren't on the same level as each other.

3. The div, rightinfohomecontainer is narrower than some of the diovs it contains. Is this deliberate?

to debug, try using:

#rightinfohomecontainer,
#rightinfohomecontainer div{
border: 1px solid blue;
}

This might show you which div is pushing things around, and needs attention.

Answer 3

The CSS you supplied is invalid, it lacks some }. See if your original CSS also lack them.

You declare some div in absolute but you also make them float. I think it's a bad idea.

You declare some div width+margin+padding. It could be the issue.

Lastly, try this :

#rightinfohomecontainer {
    height: 300px;
    width: 400px;
    margin-top:160px;
        float: left;
    z-index: 3;
    overflow: hidden;
    position: relative;
    border:2px solid gray;
    background:#ddd;
}
#rightinfoboxhome {
    height: 100px;
    width: 400px;
    z-index: 2;
    overflow: visible;
    position: absolute;
    margin-left: 0px;
    border:2px solid blue;
    background:lightblue;
}

#rightinfoboxtext {
    height: 245px;
    width:100%;
    z-index: 1;
    margin-top: 60px;
    padding-left: 50px;
    overflow: hidden;
    padding-right: 6px;
    padding-top: 2px;
    margin-left: 0px;
    position: absolute;
    border:2px dotted green;
    background:lightgreen;
}

#rightcolumn {
    float: left;
    height: 600px;
    width: 450px;
    border:2px solid red;
    background:#cc55cc;
}

I removed some styling, changed 1 div width (to 100%) and added some code to test in my browser (namely, border and background (for z-index issue)).

You should rethink how you styled with CSS first, there's probably other part you could remove (#rightinfoboxhome margin-left for example).