problème CSS / HTML dans IE - Comment réparer?

Question

Je travaille sur cette page ici:

http://noasimon.co.il/

Il semble très bien dans firefox, chrome, opéra et IE8
Mais quand je tourne sur la « vue de la compatibilité » dans IE8, les images de menu vont en dessous du texte.

Un autre problème qui ne se produit que dans ce point de vue est sur cette page:
http://noasimon.co.il/exhibition2010

Les vignettes aller trop loin à gauche en dehors de la vue.

Quelqu'un sait comment puis-je résoudre ce problème? J'ai très peu d'expérience avec ce genre de choses.

Answer 1

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

Answer 2

Félicitations pour le HTML du W3C valide! (J'ai vérifié juste pour se assurer)

Comme il semble que le div#header va toujours être 50px haut et toujours à (0,0) à l'intérieur de la div#wrapper et la div.sidebar toujours à (0,50), pourquoi ne pas faire ceci:

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

Sur un second regard sur votre page je pensais un truc un ami des utilisations des mines pourrait être utile:

  

* {padding: 0; margin: 0;}

Cela permet généralement résoudre les problèmes communs de compatibilité IE liés aux valeurs par défaut de marge et il padding.

Answer 4

On dirait que c'est un bon cas de « double marge »

En fait ce que vous devez faire pour « vue compatible » est de mettre display à inline sur des éléments qui flottaient et ont la marge.

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

Answer 5

vous pouvez utiliser ..

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

} .sidebar li {     Flotter à droite;     display: inline-block;     margin: 1px; padding: 0px 4px '

font-size: ..;

}

Merci Ptiwari.