problème de CSS sur Internet Explorer 8

[jeromec]

Bonjour,
J'ai un problème d'affichage sur IE8. Voici les illustrations :
SOUS FIREFOX:


SOUS INTERNET EXPLORER 8:


Et voici, en partie, mon CSS :

Code: Tout sélectionner

html {
   overflow: -moz-scrollbars-vertical;
   margin: 0;
   padding: 0;
}
body {
   color:#73695f;
   font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
   font-size:1em;
   line-height:1em;
   margin: 0px;
   padding: 0px;
   text-align: center;
   background-color: #EBE9BF;
   background-image: url(../image/bgcp3.jpg);
   background-repeat: repeat;
   background-position: left top;
}
@font-face {
font-family: alabama;
src: url('fonts/Alabama.ttf');
}
form {
   padding: 0;
   margin: 0;
   display: inline;
}
input, textarea, select {
   color:#73695f;
   font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
   font-size : 0.7em;
   margin: 3px 0px;
}
a, a:visited {
   color: #164b6f;
   text-decoration: none;
   cursor: pointer;
}
a:hover {
   color: #96190a;
   text-decoration: underline;
}
a img {
   border: none;
}
p {
   margin-top: 0px;
}
h1,h2,h3,h4 {
   font-family : Georgia, "Bitstream Vera Serif", Norasi, serif;
   color:#96190A;
}
/* ajout stickers debut*/
.product_image {
   width:285px;
   height:260px;
   padding:15px 0 0 0;
   z-index:10;
   position:relative;
    background-image : url("../image/photocarree.png");
}
.product_image .left{
   left:0;
}
.product_image .right{
   right:0;
}
.product_image .top {
   width:auto;
   height:auto;
   position:absolute;
   top:0;
}
.product_image .bottom {
   width:auto;
   height:auto;
   display:inline;
   position:absolute;
   bottom:0;
   margin:0 2px;
}

.label_stick_image {
   width:285px;
   height:260px;
   padding:15px 0 0 0;
   z-index:10;
   position:relative;
    background-image : url("../image/photocarree.png");
}
.label_stick_image .left{
   left:0;
}
.label_stick_image .right{
   right:0;
}
.label_stick_image .top {
   width:auto;
   height:auto;
   position:absolute;
   top:0;
}
.label_stick_image .bottom {
   width:auto;
   height:auto;
   position:absolute;
   bottom:0;
   margin:0 2px;
}
/* ajout stickers fin*/
/* layout */
#container {
   background: url('../image/fondcontenu.png') repeat-y;
   width: 1024px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}
#header .div1 {
   height:270px;
   }
#header .div1 .div1milieu{
   background:url('../image/bgdiv1milieu.jpg');
   background-repeat:no-repeat;   
   float:left;
   margin-right:-179px;
   height :270px;
}   
#header .div1 .div1gauche {
   background:url('../image/bgdiv1gauche.png');
   background-repeat:no-repeat;
   float : left;
   width : 180px;
   height:270px;
}   
#header .div1 .div1droite {
   background:url('../image/bgdiv1droite.png');
   background-repeat:no-repeat;
   float : right;
   width : 179px;
   height:270px;
}      
#header .div2 {
   margin-left:-70px;
   float: left;
   padding-top: 15px;
   padding-left: 0px;
}

#header .div4 {
   width: 620px;
   clear: right;
   float: right;
   height: 86px;
   padding-right: 30px;
   margin-bottom: 0px;
   margin-top:0px;
}
#header .div4 a {
   float: left;
   margin-right: -15px;
   width: 135px;
   padding-top: 40px;
   padding-bottom: 25px;
   background: url('../image/tab_1.png') no-repeat;
   text-align: center;
   color: #164b6f;
   text-decoration: none;
   font-size: 0.9em;
   font-weight: bold;
   position: relative;
   z-index: 1;
}
#header .div4 a.selected {
   background: url('../image/tab_2.png') no-repeat;
   color: #96190a;
   padding-bottom: 25px;
   z-index: 3;
}
#header .div5 {
   margin-left:-100px;
   height: 40px;
   clear:both;
}
#header .div5 .left {
   width: 20px;
   float: left;
}
#header .div5 .right {
   width: 21px;
   float: right;
}
#header .div5 .center {
   padding: 0px 0 0 3px;
   margin-left: 17px;
   margin-right: 21px;
}
#header .div6 {
   margin-top:20px;
   margin-bottom: 20px;
}
#header .div6 .left {
/*   background: url('../image/header_2_left.png') no-repeat;*/
   width: 5px;
   margin-left:20px;
   float: left;
   height: 37px;
}
#header .div6 .right {
/*   background:url('../image/header_2_right.png') no-repeat;*/
   width: 6px;
   margin-right:20px;
   float: right;
   height: 37px;
}
#header .div6 .center {
/*   background: url('../image/header_2_center.png') repeat-x;*/
   margin-left: 25px;
   margin-right: 25px;
   padding-left: 5px;
   padding-right: 5px;
   height: 37px;
}
#header .div7 {
   float: right;
   padding-top: 2px;
}
#header .div8 {
   color:#FFF;
   float: left;
   margin-top: 5px;
   margin-left:5px;
   font-size:0.7em;
}
#header .div9 {
   float: left;
}
#header .div10 {
   float: left;
   margin-top: 2px;   
}
#header .div11 {
   font-size:0.8em;
   font-weight:bold;
   padding-top:10px;
   float: right;
   color:#ffffff;
   }
#header .div11 a, .div11 a:visited {
   text-decoration:none;
   color:#503214;
   margin-left: 15px;
   padding: 0px 10px 0px 20px;
   background-repeat: no-repeat;
   background-position: left center;
}
#header .div11 a:hover {
   color:#000000;
   text-decoration:underline;
}
#header .div12 {
   clear:both;
   background: url('../image/header_1_center.png') repeat-x;
   height:50px;
}
#search {
   height:42px;
/*   background: url('../image/searchbg.jpg') no-repeat;*/
   padding-top: 7px;
   padding-left: 5px;
   color: #164b6f;
   font-weight: bold;
}
#search select {
   border: 2px solid #000000;
   padding: 1px;
}
#search a {
   color: #FFF;
}
#search input {
   border: 2px solid #000000;
   padding: 2px;
}
#breadcrumb {
   font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
   font-size:0.8em;
   float: left;
   padding: 5px 0 0 160px;
}
#breadcrumb a, a:visited{
   text-decoration:none;
}
#breadcrumb a:hover{
   text-decoration:underline;
}
#column_left {
   float: left;
   width: 190px;
   margin-right: 5px;
   clear: left;
}
#column_right {
   float: right;
   width: 190px;
   margin-left: 5px;
   clear: right;
}
#content {
   margin-left: 190px;
   margin-right: 190px;
   margin-bottom: 10px;
}
#content .top .left {
   width: 5px;
   min-height: 60px;
   float: left;
}
#content .top .right {
   width: 5px;
   min-height: 60px;
   float: right;
}
#content .top .center {
   margin-left: 5px;
   margin-right: 5px;
}
#content h1, .heading {
   color: #91190a;
   padding: 8px 0px 0px 0px;
   font-size: 1.1em;
   font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
   font-weight: bold;
   text-transform: uppercase;
   margin: 0px;
}
#content .petit{
   font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
   font-size: 0.8em;
   font-style:italic;
   text-transform: none;
}

#content .middle {
   font-size:0.8em;
   padding: 10px 10px 1px 10px;
   min-height: 30px;
}

#content .bottom .left {
   width: 5px;
   height: 5px;
   float: left;
}
#content .bottom .right {
   width: 5px;
   height: 5px;
   float: right;
}
#content .bottom .center {
   height: 6px;
   margin: 0 5px 10px 5px;
}

/*descriptif debut*/

#descriptif {
   margin: -75px 0 5px 0;
   min-height: 200px;
   }

#descriptif .desctopantoine{
   min-height: 157px;
   background-image: url('../image/descriptif_topantoine.png');
   margin: 0px;
}
#descriptif .desctoppatrick{
   min-height: 157px;
   background-image: url('../image/descriptif_toppatrick.png');
   margin: 0px;
}
#descriptif .desctoplaurent{
   min-height: 157px;
   background-image: url('../image/descriptif_toplaurent.png');
   margin: 0px;
}

#descriptif .descmiddle {
   color:#164b6f;
   font-size: 1.2em;
   line-height:1.2em;
   text-align:justify;
   font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
   font-style:italic;
   font-weight:bold;
   min-height:150px;
   background: url('../image/descriptif_middle.png') repeat-y;
   padding: 0px 30px 30px 30px;
   }
   
#descriptif .descmiddle .signAntoine{
   float:right;
   height:25px;
   width: 100px;
   background: url('../image/Signature_Antoine.png') no-repeat;
   }
   
#descriptif .descmiddle .signPatrick{
   float:right;
   height:25px;
   width: 100px;
   background: url('../image/Signature_Patrick.png') no-repeat;
   }
   
#descriptif .descmiddle .signLaurent{
   float:right;
   height:25px;
   width: 100px;
   background: url('../image/Signature_Laurent.png') no-repeat;
   }   
   
#descriptif .descbottom  {
   background: url('../image/descriptif_bottom.png') no-repeat;
   margin: 0 0 10px 0;
   height:50px;
   width:624px;
}

/*descriptif fin*/
.box {
   margin-bottom: 0px;
   
}
.box .top img {
   float: left;
   margin: 2px;
}
.box .top {
   height:50px;
   padding: 10px 0px 0px 0px;
   margin: 0;
   color: #ffffff;
   font-size: 1em;
   font-family : Georgia, "Bitstream Vera Serif", Norasi, serif;
   font-weight: bold;
   text-transform: uppercase;
}
#column_left .box .top {
   padding-left:10px;   
   background: url('../image/box_left_top.png') no-repeat;
}
#column_right .box .top {
   padding-left:3px;
   background: url('../image/box_right_top.png') no-repeat;
}
.box .middle {
   font-size:0.8em;
   list-style-image : url('../image/bullet_1.png');
   padding: 10px;
   margin: 0;
}#column_left .box .middle {
   background: url('../image/box_left_middle.png') repeat-y;
}
#column_right .box .middle {
   background: url('../image/box_right_middle.png') repeat-y;
}
#column_left .box .bottom {
   height: 50px;
   background: url('../image/box_left_bottom.png') no-repeat;
}
#column_right .box .bottom {
   height: 50px;
   background: url('../image/box_right_bottom.png') no-repeat;
}
.success {
   padding: 5px 0px;
   margin-bottom: 10px;
   background: #E4F1C9;
   border: 1px solid #A5BD71;
   font-size: 11px;
   font-family:  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
   text-align: center;
}
.warning {
   padding: 5px 0px;
   margin-bottom: 10px;
   background: #FFDFE0;
   border: 1px solid #FF9999;
   font-size: 11px;
   font-family:  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
   text-align: center;
}
.wait {
   padding: 5px 0px;
   margin-bottom: 10px;
   background: #FBFAEA;
   border: 1px solid #EFEBAA;
   font-size: 11px;
   font-family:  Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
   text-align: center;
}
.required {
   color: #FF0000;
   font-weight: bold;
}
.error {
   color: #FF0000;
   display: block;
}
.help {
   cursor: pointer;
}
.tooltip {
   border: 1px solid #FDDA5C;
   background: #FBFF95;
   padding: 5px;
   font-size: 11px;
   width: 250px;
}
.clear { /* generic container (i.e. div) for floating buttons */
   overflow: hidden;
   width: 100%;
}
.button {
   padding-left: 8px;
   display: inline-block;
   margin-right: 5px;
   background: url('../image/button_left.png') top left no-repeat;
   text-decoration: none;
   font-size:0.8em;
   font-weight:bolder;
   color:#FFFFFF;
}
.button span {
   color: #FFFFFF;
   display: block;
   padding: 2px 12px 5px 5px;
   background: url('../image/button_right.png') top right no-repeat;
}
.buttons {
   padding: 5px;
   margin-bottom: 10px;
}
.buttons input {
   padding: 0px;
   margin: 0px;
}
.buttons table {
   width: 100%;
   border-collapse: collapse;
}
.buttons table td {
   vertical-align: middle;
}
.contenunews {
   font-size:1em;
   color: #73695f;
   padding: 10px 0 10px 0;
   margin-top: 3px;
   margin-bottom: 10px;
}
.contenurecette {
   font-size:1em;
   color: #73695f;
   padding: 10px 0 10px 0;
   margin-top: 3px;
   margin-bottom: 10px;
}
.list {
   margin: -30px 0 60px 0;
   width: 100%;
}
.list a{
   font-size:0.8em;
   font-weight:bold
}
.list .annee {
   color: #999;
   font-size: 0.8em;
}
.list .prix {
   font-size: 0.7em;
   color: #dc0a00;
   font-weight: bold;
}
.list .prixbarre {
   font-size: 0.7em;
   color: #dc0a00;
   text-decoration: line-through;
}

.list td  {
   text-align: center;
   vertical-align: top;
   padding-top:0px;
   padding-bottom: 0px;
}
.list img {
   background-image: url('../image/listbg.png');
   padding: 20px 16px 80px 16px;
   margin : 30px 0 -80px 0;
}

.sort {
   margin-bottom: 10px;
   backgroud: #F8F8F8;
   height: 30px;
   width: 100%;
}
.sort .div1 {
   float: right;
   margin-left: 5px;
   padding-top: 6px;
   padding-right: 9px;
}
.sort .div2 {
   text-align: right;
   padding-top: 9px;
}
.sort select {
   font-size: 11px;
   margin: 0;
   padding: 0;
}
.pagination {
   font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
   font-size:0.6em;
   display: inline-block;
   width: 100%;
   margin-bottom: 10px;
}
.pagination .links, .pagination .results {
   padding: 7px;
}
.pagination .links {
   float: left;
}
.pagination .links a {
   border: 1px solid #bbbbbb;
   background: #ffffff;
   padding: 4px 7px;
   text-decoration: none;
   color: #000000;
}
.pagination .links b {
   border: 1px solid #324682;
   padding: 4px 7px;
   text-decoration: none;
   color: #ffffff;
   background: #324682;
}
.pagination .results {
   float: right;
}
.tabs {
   font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
   font-size:0.9em;
   line-height:1em;
   width: 100%;
   height: 29px;
   margin-bottom: 0px;
}
.tabs a {
   float: left;
   display: block;
   padding: 6px 15px 7px 15px;
   margin-right: 2px;
   border-top: 1px solid #164b6f;
   border-bottom: 1px solid #164b6f;
   border-left: 1px solid #164b6f;
   border-right: 1px solid #164b6f;
   background: #d2c0a0;
   color: #164b6f;
   font-weight: bold;
   text-decoration: none;
   z-index: 1;
   position: relative;
   top: 1px;
}
.tabs a.selected {
   background: #d2c0a0;
   border-bottom: 0px;
   padding-bottom: 8px;
   z-index: 3;
}
.tab_page {
   border: 1px solid #164b6f;
   background: #d2c0a0;
   padding: 10px;
   display: block;
   z-index: 2;
   margin-bottom: 10px;
}
.tab_forum {
   font-size: 0.8em;
   padding: 10px;
   margin-bottom: 10px;
}
#footer {
   font-size:0.6em;
   width: 1024px;
   clear: both;
   padding-top: 5px;
   border-top: none;
   background-image:url(../image/footer.png);
   height: 140px;
}
#footer .div1 {
   clear:left;
   padding-left: 160px;
   float: left;
   text-align: left;
}
#footer .div2 {
   padding-right: 160px;
   float: right;
   text-align: right;
}
#footer .information{
   margin : 0 160px 0px 160px;
   clear:both;
   }

#footer .information .top{
   height : 10px;
   width:700px;
   background-image: url('../image/infobgtop.png');
   }
#footer .information .middle {
   background: url('../image/infobgmiddle.png') repeat-y;
   padding: 1px 10px 20px 10px;
   width:700px;
   margin: 0;
}
#footer .information .bottom {
   height: 10px;
   width:700px;
   background: url('../image/infobgbottom.png') no-repeat;
}
   
#footer ul li {
   float:left;
   display:block;
   padding-left: 20px;
   list-style: url('../image/bullet_1.png');
   }
   
#footer ul li a{
   margin-right : 10px;
   }

#category ul {
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 8px;
   padding-left: 12px;
   list-style: url('../image/bullet_1.png');
}
#information ul {
   margin-top: 0px;
   margin-bottom: 0px;
   margin-left: 8px;
   padding-left: 12px;
   list-style: url('../image/bullet_2.png');
}
.cart {
   border-collapse: collapse;
   width: 100%;
   border: 1px solid #EEEEEE;
   margin-bottom: 10px;
}
.cart th {
   background: #EEEEEE;
   padding: 5px;
   font-weight: normal;
}
.cart td {
   padding: 5px;
}
.tags, .tags a {
   font-style: italic;
   font-size: x-small;
}
#module_cart .middle {
   padding: 5px;
}
.cart_module_total {
   padding: 0 3px 0 3px;
   font-size: 0.9em;
   color: #222;
}
.cart_remove {
   margin-top: 3px;
   background: url('../image/list_remove_btn.gif') no-repeat left center transparent;
   padding-right:10px;
   cursor:pointer;
}
.cart_remove_loading {
   margin-top: 3px;
   background: url('../image/ajax_load.gif') no-repeat transparent;
   padding-right:10px;
}
.button_add_small, a.button_add_small:visited {
   margin-top: 3px;
   background: url('../image/button_add_small.png') no-repeat left center transparent;
   padding:5px;
   text-decoration: none;
   cursor:pointer;
}
#content .middle .box {
   float: left;
   margin: 0 6px 10px 6px;
   min-height: 0px;
}
#content .middle .box .middle {
   width: 158px;
   min-height: 0px;
}



Voici l'URL du site : http://www.lacavpar3.fr/preprod/
Merci d'avance

[Imaxine]

Malheureusement ce sont les affres des navigateurs (surtout IE) et leur incompatibilités. Je te suggère de regarder vers des sites comme alsacréations ou le site du zéro, tu obtiendras peut être un remède à ce problème.

[jeromec]

Merci d'avoir pris le temps de répondre. Je jette un oeil au sites indiqués.

[interet]

Je te donne une réponse qui est à tester car j'ai eu le problème sur joomla, je l'ai solutionné par ajout d'une div spécial pour le header afin de le bloquer et je l'ai mis en même temps en absolute et non en float et depuis c'est ok.
Mais avec le template open cart, hormis dans le home.tpl ajouter cette div (en la renseignant de le style) et valider uniquement une partie du header dedans . header1 et header2.

je ne sais pas si c'est trop propre comme solution.

cordialement et bonne chance.

Manu