Bonjour,
J'ai un problème d'affichage d'un tableau qui marche très bien sur Firefox mais sous IE, il est "décalé" vers la droite ...
Voici la source CSS :
body { margin: 10px; padding: 0; font: 0.8em "Trebuchet MS", helvetica, sans-serif; text-align: center; background-color: #DDEEAA;} ul { list-style-type: none; width: 100%; /* précision pour Opera */ } .menu li { float: left; margin-bottom: 30px; } .menu a { margin: 0 2px; width: 100px; height: 20px; display: block; text-align: center; border: 1px solid gray; text-decoration: none; color: #000; background: #fff; } .menu a:hover { background: #ccc; border: 1px solid gray; } .menu a:active { background: gray; border: 1px solid gray; color: #fff; } div#conteneur { width: 750px; margin: 0 auto; text-align: left; background: #ffffff; border: 1px solid #000000; } /* On définit la largeur de la division qui contient l'ensemble de la page à 770 pixels */ /* margin: 0 auto; est la méthode correcte pour centrer les éléments de type block (comme les divisions), nous centrons donc cette division */ /* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */ div#header { height: 130px; margin-top: 0px; margin-right: 0px; margin-bottom: 40px; background-image: url(/alkablog_header.jpg); } /* On définit la hauteur de la partie header, contenant le titre du site */ pre { overflow: auto; } /* En passant on définit l'overflow de la balise pre à auto pour permettre d'afficher des barres de défilement si le texte contenu dans cette balise est trop grand */ * html pre { width: 636px; } /* On dois donner une largeur au pre à cause d'Internet Explorer, on ne va donc l'appliquer qu'à Internet Explorer en utilisant un "hack", la combinaison " * html " permet de n'appliquer ce qui suis qu'à Internet Explorer */ div#contenu { padding: 0 30px 0 30px; margin-right: 150px; } div#contenu h2 { padding-top:25px; padding-left: 25px; line-height: 25px; font-size: 1.4em; background: url("/petit_logo.png") no-repeat left bottom; color: #333333; border-bottom: 1px solid #000000; } div#contenu h3 { margin-left: 15px; padding-left: 5px; border-bottom: 1px solid #9b2; border-left: 3px solid #9b2; color: #9b2; } div#contenu p { text-align: justify; text-indent: 2em; line-height: 1.7em; } div#contenu a { color: #8a0; } div#contenu a:hover { color: #9b2; } p#footer { margin: 0; padding-right: 10px; line-height: 30px; text-align: right; color: #333333; } pre { overflow: auto; background: #dea; border: 2px solid #9b2; padding: 5px 0 0 5px; font-size: 1.2em; } pre span { color: #560; } pre span.comment { color: #b30000; } table#header { background-color: #000000; color: #FFFFFF; } form { margin: 0px; } div#contenu table { clear: left; } div#colonne_droite { right:0; width: 150px; float: right; font-size: 11px; } div#colonne_droite h3 { font-size: 12px; font-weight: bold; } ul#stats { margin-left: 0px; padding-left: 0px; } /* MENU */ td.item { background: #F5F5F5; font-size: 8pt; padding: 5px; padding-left: 4px; border-bottom: 1px solid #AAAAAA; } td.item2 { background: #DDDDDD; font-size: 8pt; padding: 5px; padding-left: 4px; border-bottom: 1px solid #AAAAAA; } td.itemcat { background: #666666; color: #FFFFFF; font-size: 8pt; padding: 5px; padding-left: 4px; border-bottom: 1px solid #AAAAAA; } /* PROFILE PAGE */ table.profile { border: 1px solid #AAAAAA; } td.profile1 { background: #DDDDDD; font-weight: bold; border-bottom: 1px solid #AAAAAA; padding: 6px; padding-bottom: 0px; } td.profile2 { background: #F5F5F5; padding: 6px; line-height: 17px; color: #333333; } /* TABLES */ td.content { padding: 10px; padding-top: 2px; padding-right: 0px; line-height: 17px; color: #333333; } td.list { background: #FFFFFF; padding: 7px; border: 1px solid #AAAAAA; border-top: none; color: } td.header { border: 1px solid #AAAAAA; padding: 7px; padding-bottom: 7px; background: #DDDDDD; font-weight: bold; } td.box { padding: 7px; line-height: 17px; padding-left: 0px; padding-top: 0px; } td.empty { background: #F5F5F5; padding: 7px; border: 1px solid #AAAAAA; } td.entry1 { border-right: 1px solid #DDDDDD; padding: 5px; padding-right: 10px; padding-bottom: 0px; } td.entry2 { padding: 5px; padding-left: 10px; padding-bottom: 0px; } td.advanced { padding: 5px; background: #EEEEEE; border-bottom: 1px solid #AAAAAA; } div.float { float: left; padding-right: 1px; } table.box { border: 1px solid #666666; border-bottom: 2px solid #666666; background: #F5F5F5; } /* ALTERNATING LISTS */ td.list1a { background: #FFFFFF; padding: 7px; border: 1px solid #CCCCCC; border-top: none; border-right: none; } td.list1b { background: #FFFFFF; padding: 7px; border: 1px solid #CCCCCC; border-top: none; } td.list2a { background: #F5F5F5; padding: 7px; border: 1px solid #CCCCCC; border-top: none; border-right: none; } td.list2b { background: #F5F5F5; padding: 7px; border: 1px solid #CCCCCC; border-top: none; } /* OTHER FONTS */ font.disabled { color: #666666; } font.gray { color: #666666; } font.stats { font-size: 7pt; font-family: arial, verdana, tahoma; } font.url { font-size: 9pt; font-weight: normal; } /* INPUT STYLES */ input.button { background-color: #DDDDDD; padding: 3px; font-size: 9pt; font-weight: bold; font-family: verdana, arial, tahoma; } input.sbutton { background-color: #DDDDDD; font-size: 8pt; font-weight: bold; font-family: verdana, arial, tahoma; } input.text { font-family: arial, verdana, tahoma; } textarea, select { font-family: arial, verdana, tahoma; margin-top: 1px; font-size: 10pt; } select.small { font-size: 8pt; margin-left: 4px; } div#blogposttitle { background: url("/icone-billet.png") no-repeat left bottom; padding-left: 22px; } div#contenu_2 { padding: 0 30px 0 30px; margin-right: 0px; } div#contenu_2 h2 { padding-top:25px; padding-left: 25px; line-height: 25px; font-size: 1.4em; background: url("/petit_logo.png") no-repeat left bottom; color: #333333; border-bottom: 1px solid #000000; } div#contenu_2 h3 { margin-left: 15px; padding-left: 5px; border-bottom: 1px solid #9b2; border-left: 3px solid #9b2; color: #9b2; } div#contenu_2 p { text-align: justify; text-indent: 2em; line-height: 1.7em; } div#contenu_2 a { color: #8a0; } div#contenu_2 a:hover { color: #9b2; } div#contenu_2 table { clear: left; } [/code]
et HTML
[code]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>XXXXXXXXX</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> <link href="/style_alkablog.css" rel="stylesheet" type="text/css"> </head> <body> <div id="conteneur"> <div id="header"> </div> <ul class="menu"> <li>MENU</li> </ul> <div id="colonne_droite"> <h3>XXXXXX</h3> <p> </p> <h3>XXXXXX</h3> <p> </p> <h3>XXXXXX </h3> <p> </p> </div> <div id="contenu"> XXXXXXXXXXXXXX </div> <p id="footer">XXXXXXXXXXX</p> </div> </body> </html>
Merci de votre aide ...
