Проблема 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

Поздравляем с 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; 
} 

Answer 3

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

* {утеплитель: 0; margin: 0;}

Это обычно помогает решить общие проблемы совместимости IE, связанные со значениями по умолчанию маржи и отступов.

Answer 4

Похоже, что это хороший случай "double margin"

В основном то, что вам нужно сделать для «совместимом зрения» является создание displayinline к на элементы, которые плавали и имеют запас.

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

Answer 5

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

.sidebar уль { поле: 0px; прокладка: 0px;

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

font-size: ..;

}

Благодаря Ptiwari.