CSS/HTML problem in IE - how to fix?

Question

I'm working on this page here:

http://noasimon.co.il/

It looks fine in firefox, chrome, opera and IE8
But when I turn on the "compatibility view" in IE8, the menu images go below the text.

Another problem which happens only in this view is in this page:
http://noasimon.co.il/exhibition2010

The thumbnails go too far left outside the view.

Anyone know how can I fix this? I have very little experience with this sort of stuff.

Answer 1

Congratulations on the W3C-valid HTML! (I checked just to make sure)

Since it looks like the div#header is always going to be 50px tall and always at (0,0) inside of the div#wrapper, and the div.sidebar always at (0,50), why not do this:

div#wrapper {
    position: relative;
}

div#wrapper div#header {
    position: absolute;
    height: 50px;
    top: 0px;
    left: 0px;
}

div#wrapper div.sidebar {
    position: absolute:
    top: 50px;
    left: 0px;
}

Answer 2

On a second look on your page I thought a trick a friend of mine uses might be of help:

* {padding: 0; margin: 0;}

This usually helps solving common IE compatibility issues connected with the default values of margin and padding there.

Answer 3

It looks like this is a good case of "double margin"

Basically what you need to do for "compatible view" is to set display to inline on elements that are floated and have margin.

.ngg-albumtitle {
    float: right;
    display: inline;
}

Answer 4

.ngg-album {
    position: relative;
}
.ngg-albumimage 
img {
    position: absolute;
    left: 0;
    top: 0;
}
.ngg-albumimage {
    display: inline;
}

Answer 5

Hi all

you can used..

.sidebar ul { margin:0px; padding:0px;

} .sidebar li { float: right; display: inline-block; margin:1px; padding:0px 4px'

font-size:..;

}

Thanks Ptiwari.