[ Résolu] Probleme d'affichage en 800 x 600 sous I E

Bonjour,
J’ai un problème d’affichage sous I E en 800 x 600

Deux pages du site comprennent des images que je ne peux plus réduire sans en ôter la lisibilité.
Et la partie gauche serait fastidieuse ( pour moi ) à réduire aussi.
Le site : http://www.avenir-geopolitique.net/

Sur cette page par exemple : http://www.avenir-geopolitique.net/hacktivisme/vulnerabilites/

Sous Internet Explorer et en résolution 800 x 600 ça donne ça :
http://img333.imageshack.us/img333/6281/huh8av.png


Je n’arrive pas à régler le CSS pour obtenir un scroll horizontal sous IE , qui permette l’affichage correct de l’article. ( sous FF et Mozilla c'est OK )

Pouvez-vous m’aider ?

Le CSS :

*  Styles généraux
 */

body, html {
  margin: 0;
  padding: 0;
  background: #435466;
  color: #abc;
}

a {
  color: white;
  text-decoration: none;
}
a:hover, a:focus { text-decoration: underline; }

a img { border: none; }

h1, h2 { margin-top: 0; }

p { text-align: justify; }

/* sert à étirer les boites apres un float */
.spacer {
  clear: both;
  visibility: hidden;
  height: 0;
}


/*
 *  Styles spécifiques
 */


#head {
  background-color: #0a0c2b;
  background-image: url('img/degrade.png');
  background-repeat: repeat-x;
  background-position:  left bottom;
}
#categories {
  /*list-style-image: url(img/bullet.png);
  list-style-position: inside;*/
  font-size: 90%;
  font-weight: bold;
  font-family: Arial, sans-serif;
}
#categories, #ddh, #partn ul { list-style: none; }

.contenu, #articles, #contact, #partn, #cc-w3 { border: 3px outset silver; }

#nav, #nav * 	{ color: #047; }
#auteur 		{ font-style: italic; }
#articles		{ background: #aaa; }
#articles h2	{ color: #435466; }
#articles h3	{ background: #435466; }
#articles .suite{ background: #666 }
#articles .desc { text-align: justify; color: #555; font-size: 90%; }


/*
 *  Structure
 */

#head { 
  padding: .5em;
  /*width: 100%;*/
}

#head p {
  float: left;
  margin: 0;
}
#ddh, #categories {
  float: right;
  clear: right;
  margin: 0;
}
#categories { margin-top: 2em; }
#ddh { margin-top: .5em; }
#ddh li, #categories li {
  display: inline;
  margin-right: 1em;
  padding: 0;
}


/* les liens de navigations sont moins utiles en graphique
  Il apparaissent en haut, en gris */
#nav {
  text-align: center;
  width: 100%;
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
}

/* différents blocs
 voir  http://pompage.net/pompe/margesnegatives/  */
.conteneur {
  float: right;
  width: 100%;
  margin-left: -19em;
}
.contenu {
  margin: 1em;
  margin-left: 19em;
  padding: 1em;
}

#articles, #contact, #cc-w3 {
  float: left;
  width: 14em;
  margin: 1em;
  margin-right: 0;
  padding: 1em;
  clear: left;
}
#contact ul {
  margin: 0;
  padding: 0;
  margin-left: 1em;
}
#contact dt {
  float: left;
  clear: left;
  margin: 0 1ex;
}


/* affichage de l'article */
#contenu img {
  float: left;
  margin: 0 1em .5em 0;
}
#contenu * img {
  float: none;
  margin: 0;
}

#auteur {
  float: right;
  margin-right: 2em;
  height: 0;
}

/* liste des articles */
#articles {
  padding: 1em 0;
  width: 16em;
}
#articles h2 {
  margin: 0 .5em;
}
#articles h3 {
  margin: .5em 0 0 0;
  padding: 0 1ex;
}
#articles .suite { 
  padding-left: 35px;
  margin: 0;
}
#articles .desc {
  margin: 0;
  padding: 0 2ex;
}
#articles .desc img {
  float: left;
  margin-right: 1ex;
}

#partn { margin: 1em; }
#partn h2 { margin: .2em 1em 0; }
#partn ul { 
 overflow: auto;
 text-align: center;
 margin: 0;
 padding: 0;
}
#partn ul { height: 95px; }
#partn li { height: 105px; }


.retour { text-align: right; margin-right: 2em; }


/*
 *  Pour l'impression
 */
@media print {
  /* pas de fond */
  body, html {
    color: black;
    background: none;
  }
  
  /* on n'affiche pas les menus, etc. */
  #nav, #categories, #ddh, #articles, #contact, #partenaires {
    display: none;
  }
  #conteneur, #contenu {
    float: none;
    margin: 0;
  }
  
}
 
}

Merci
Modifié par Licia (23 Jul 2005 - 19:20)

Bonjour,

Je me suis payé en lecture tout le web enfin presque
Je ne trouve pas comment demander à IE de bien vouloir afficher une scroll barre horizontale, afin de visualiser ces articles
Aussi j'ai réduit des marges, les images des deux articles au maximum de leur lisibilité... ce n'est pas suffisant pour afficher le tout
Au départ ce design a été conçu pour n'afficher que du texte... et je n'ai absolument pas pensé aux résolutions en 800 x 600 sous IE , je ne voudrais pas refaire complètement le design juste pour ça.( réduire encore la colonne gauche, la taille de police, enlever du texte d'introduction afin d'agrandir l'espace d'affichage à droite...)

Est-ce que vous pouvez m'orienter vers une solution?

merci

J'ai opté pour une solution temporaire, en attendant de trouver quelquechose de plus académique .
en bidouillant encore les marges, les articles s'affichent, ce n'est pas top mais au moins ils sont lisibles, il paraît que 37% des internautes sont en 800, la plupart sous Internet Explorer, je ne voudrais pas les priver

Maintenant c'est en 1280 X 1024 que l'affichage de droite paraît immense...

Aussi si vous avez un lien à me recommander afin que je trouve une autre solution qui me permette de retrouver le design original , j'irais m'instruire...

Partie de CSS modifiée :

 /* différents blocs
 voir  http://pompage.net/pompe/margesnegatives/  */
.conteneur {
  float: right;
  width: 100%;
  margin-left: -17em;
}
.contenu {
  margin: 0.3em;
  margin-left: 17em;
  padding: 0.5em;
}

#articles, #contact, #cc-w3 {
  float: left;
  width: 14em;
  margin: 0.3em;
  margin-right: 0;
  padding: 1em 0.3; 
  clear: left;
}
#contact ul {
  margin: 0;
  padding: 0;
  margin-left: 1em;
}
#contact dt {
  float: left;
  clear: left;
  margin: 0 1ex;
}

  
/* affichage de l'article */
#contenu img {
  float: left;
  margin: 0 1em .5em 0;
}
#contenu * img {
  float: none;
  margin: 0;
}

#auteur {
  float: right;
  margin-right: 2em;
  height: 0;
}

/* liste des articles */
#articles {
  padding: 1em 0;
  width: 15em;
}
#articles h2 {
  margin: 0 .5em;
}
#articles h3 {
  margin: .5em 0 0 0;
  padding: 0 1ex;
}
#articles .suite { 
  padding-left: 35px;
  margin: 0;
}
#articles .desc {
  margin: 0;
  padding: 0 2ex;
}
#articles .desc img {
  float: left;
  margin-right: 1ex;
}

#partn {  
  float: right;
  width: 700px;
  margin: 0.3em;  
  padding: 1em;
  clear: right;
  }
  

Merci de votre attention