CSS / HTML проблема в IE - как исправить?

Question

Я работаю над этой страницей здесь:

http://noasimon.co.il/

Выглядит отлично в Firefox, Chrome, Opera и IE8
Но когда я включаю "представление совместимости"в IE8 изображения меню располагаются ниже текста.

Другая проблема, которая возникает только в этом представлении, заключается в этой странице:
http://noasimon.co.il/exhibition2010

Миниатюры слишком далеко уходят наружупредставление.

Кто-нибудь знает, как я могу это исправить?У меня очень мало опыта с подобными вещами.

Answer 1

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

Answer 2

вы можете использовать ..

.sidebar ul { Маржа: 0px; обивка: 0px;

} .sidebar li { плавать: правильно; дисплей: встроенный блок; Маржа: 1px; отступы: 0px 4px '

размер шрифта: ..;

}

Спасибо Ptiwari.

Answer 3

При повторном просмотре вашей страницы я подумал, что уловка, которую использует мой друг, может помочь:

* {отступ: 0; поле: 0;}

Обычно это помогает решить общие проблемы совместимости IE, связанные со стандартными значениями полей и отступов там.

Answer 4

Похоже, это хороший случай "двойной маржи"

По сути, для «совместимого вида» вам нужно установить display в inline для элементов, которые плавают и имеют запас.

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

Answer 5

Поздравляем с верным W3C HTML! (Я проверил просто чтобы убедиться)

Так как div#header всегда будет иметь высоту 50px и всегда в (0,0) внутри div#wrapper, а div.sidebar всегда в (0,50), почему бы и нет сделать это:

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;
}