[Résolu] L'affichage incorrect IE

Statut : non résolu

Ce sujet contient 4 réponses, 4 participants et a été mis à jour pour la dernière fois par bway, le il y a 17 années et 10 mois.

5 sujets de 1 à 5 (sur un total de 5)

Auteur

Messages

30 janvier 2007 à 9 h 04 min #450353

radiCarl

Membre

Chevalier WordPress

137 contributions

Bonjour,

– WordPress 2.1 :
– Theme Ego :

L’affichage de mon blog déconne dans IE:[/b]

En effet, je me suis arraché les cheveux toute la journée à bidouiller des paramètres du style sheet de mon template. Si tout est presque nickel dans Firefox, l’affichage de mon blogue explose dans Eurk-Xplorer. 😡

De la sorte, je fais, encore, appel à la communauté WordPress.😇

Donc, voyez-vous ici dans cette page introduisant mon blogue, http://radicarl.net/?page_id=7 , le cadre blanc dans lequel j’écris le texte est pour une raison qui m’échappe, décalé vers la gauche dans IE. Or, je n’ai pas encore compris l’endroit pour modifier ce paramètre d’affichage spécifique; c’est à dire les pages de mon thème.

Theme Name: egoSconnesso[dot]net
Description: Three column theme using greens/yellows. Clean appearance. Code by <a href="http://mystical-twilight.com/">Collen</a>
Version: 1.0
Author: egoSconnesso[dot]net
Author URI: http://www.egosconnesso.net/
*/

/* Basics and Typography */
body {
background:  url(images/back.gif);
 margin:  0;
 padding: 0;
 font: 75%/1.2 « Trebuchet MS », Verdana, Arial, Sans-Serif;
 color: #000;
 text-align: center;
}
#header {
 position: relative;
 top:1px;

 width: 966px;
 height: 131px;
 margin: 0 auto;
 padding: 0
}
#header h1 {
 padding: 46px 0 0 0;
 margin: 0;
 font-size: 1.7em;
 text-align: center;
}
#header h1 a {
 color: #fff;
}
#header h1 a:hover {
 color: #efefef;
 text-decoration: none;
}
#head {
 text-align:center;
}

p {
	font-size: 1em;
	margin: 0 0 1.2em;
	padding: 0;
	line-height: 1.5em;
}
ol, ul {
	font-size: 1em;
	line-height: 1.5em;
	margin: 1.2em 0 1.2em 3em;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	margin: .9em 0;
	font-family: « Trebuchet MS », Verdana, Arial, Sans-Serif;
	color: #000066; 
}
h1, h2 {
	font-size: 1.3em;
}
h3 {
 	font-size: 1.2em;
}
h4 {
	font-size: 1.0em;
}
a {
	text-decoration: none;
        background: none;
}
a:link {
	color: #0000cc;
}
a:visited {
	color: #000066;
}
a:hover, a:active {
	color: #cc3300;
}
input, textarea, select {
	border: 0px solid #000;
	background: #fff;
	color: #000;
	font: 8pt/1.2  « Trebuchet MS », Verdana, Arial, Sans-Serif;



}
.button {
	border: 1px solid #000;
	background: #fff;
	color: #000;
	font: bold 8pt/1.2 « Trebuchet MS », Verdana, Arial, Sans-Serif;
}
blockquote {

		
	padding: 8px;

	margin-left: 15px; 
	margin-top: 5px; 
	margin-bottom: 0px; 
    border-left: 4px solid #ba4942;
	
	 }
       
	font-size: 1.5em
	
	
}
code {
	font-family: monospace;
	color: #666;
}
form, img {
	margin: 0;
	padding: 0;
	border: 0px none;
}
.small {
	font-size: 0.9em;
	color: #999;
}
#container {
 width: 966px;
 margin: 0 auto;    
 padding: 0;
 background: #000033;
 border-left: 1px solid #000000;
 border-right: 1px solid #000000;
 border-top: 0px none;
 border-bottom: 1px solid #000000;
 text-align: center
}

#topcontentdouble {
 float: left;
 width: 498px;
 height: 27px;
 /*background: #fff;*/
 margin: 0 9px;
 display: inline;
}
#topcontent {
 width: 966px;
 background: #fff;
 margin: 10px auto 0 auto;
 height: 27px;
}
#bottomcontentdouble {
 display: inline;
 float: left;
 width: 500px;
 /*background: #fff;*/
 margin: 9px 9px 0 9px;
 height: 27px;
}
#content {
 float: left;
 width: 575px;
 margin:  -13px 0px;
 display: inline;
}

#singlecontent {
 width: 730px;
 padding:0;
 margin: 0 auto;
}
.post {
 margin: 0 6px 30px 5px;
 padding: 5px;
 background: #fff;
 border: 0px solid #0033cc;
}

.post a {
 color: #000099;
 text-decoration: none;
}
.post a:hover {
 color: #990000;
}
.post a:visited {
 color: #000000;
}
.post h2 {
 color: #000099;
 font-size: 1.8em;
 margin: 40px 0 0 10px;
}
.post h3 {
 float: right;
 color: #000099;
 font-size: 1em;
 margin: 0; padding: 0;
}
.meta {
 font-size: .9em;
 line-height: 18px;
}
.feedback {
 text-align: right;
 font-size: 1.0em;
}
.author {
 width: 200px;
 float: right;
 text-align: right;
}


/* Page Navigation */
.postnavigation {
 height: 45px;
}
.left {
 float: left;
 padding-left: 105px;
}
.right {
 float: right;
 padding-right: 105px; 
}
.leftdouble {
 float: left;
 padding-left: 10px;
}
.rightdouble {
 float: right;
 padding-right: 10px; 
}


/* Sidebars */
#sidebar2 {
 position: relative;
 float: right;
 width: 190px;
 margin: 0px 5px 0 0px;
 display: inline;
}
#sidebar {
 position: relative;
 float: left;
 width: 190px;
 margin: 0px 0 0 5px;
 display: inline;
}
#sidebar h2 {
 margin:0; padding: 3px 0;
 color: #000066;
}
#sidebar ul, #sidebar2 ul {
 padding:0; margin:0;
}
#sidebar ul li, #sidebar2 ul li {
 list-style-type: none;
 list-style-image: url(‘none’);
}
#sidebar ul, #sidebar ul li {
 margin: 0;
 padding: 0;
}
#sidebar ul li ul, #sidebar2 ul li ul {
 margin: 0 5px 0 0;
 padding: 2px 3px 5px 3px;
}
#sidebar ul li ul li, #sidebar2 ul li ul li {
 margin: 0;
 display: block;
 background: url(‘images/bullet.gif’) no-repeat 0 .6em;
 padding-left:10px; padding-right:0; padding-top:0; padding-bottom:0
}
#sidebar ul li ul li a {
 display: block;
 height:1%; /* IE WIN */
}
#sidebar ul li ul li a:hover {
 text-decoration: none;
}
#sidebar ul li ul li ul {
 margin: 0;
 padding: 0;
}
#sidebar2 ul, #sidebar ul li {
 margin: 0;
 padding: 0; 
}
.sidebg {
 background: #f1f7dc url(‘images/sidebg.gif’) repeat-y;
 padding: 5px
}

/* The following is the fix for 3-pixel-jog bug in IE */
/* Hide from IE5-mac. Only IE-win sees this. */
* html #content {
 /*margin-right: 7px;*/
}
 
* html #sidebar, * html #sidebar2 {
 height: 1%;
}
/* End hide from IE5/mac */


/* Comments */

#response {
 margin: 0px 110px;
}
#commentlist {
 padding: 0px 10px 0px 10px;
 margin-left: 10px;
 margin-right: 10px;
 color: #777;
 list-style-type: none; 
 text-align: justify;
}
#commentlist li  p{
 padding: 0px;
 margin: 8px 0px 0px 0px;
}
.commentname {
 width: 220px;
 float: left;
 font-size: 0.9em;
 margin: 0;
 padding: 0  0 2px 0;
}
.commentinfo{
 width: 250px;
 float: right;
 text-align: right;
}
.commenttext {
 clear: both;
 padding-top: 0px;
 margin-top: 0px;
 margin-bottom: 70px;
 border-top: 1px solid #e4ebef;
 text-align:left; 
 line-height:16px;
}

/* Comment Form  */
h2#postcomment {
 margin: 40px 0px 0px 0px;
 padding: 0 0 20px 10px;
}
#commentform {
 padding: 1px 20px;
 margin: 0;
}
#commentboxes {
 width: 200px;
 float: left;
 color: #000;
 font-size: 0.9em;
}

#inputbox {
 clear: both;
 color: #777;
 font-size: 0.9em;
}
#button {
 padding-top: 0.5em;
}
#commentsbottom {
 margin: 0;
 padding: 0;
 height: 22px;
}

/* Credits */
#footer {
 margin: 3px auto;
 width: 966px;
 font-size: .8em;
}
#footer p {
 margin-top: 0;
}
.clearer {
 clear: both;
 line-height: 0px;
}


/* Typography */

.post {
 color: #000;
 text-align: justify;
}

.title a  {
 clear:both;
 text-align: left;
 height: 20px;
 color: #003399;
 display: block;
 text-decoration: none;
 font-size: 1.6em;
 padding: 8px 0 6px 0;
}
.title a:hover {
 color: #cc3300;
}
.storycontent {
 padding: 30px 4px 5px 1px;
}
.singlepages p {
 text-align: justify;
 margin: 0px 105px 80px 105px;
 line-height: 20px;
}
.storycontent a {
 color: #0000cc;
 text-decoration: underline;
}
.storycontent a:hover {
 color: #cc0000;
}
.storycontent a:visited {
 color: #000033;
}

/* Page Navigation */
.left a {
 color: #000099;
 font-size: 0.9em;
}
.right a{
 font-size: 0.9em;
 color: #000099;
}
.leftdouble a{
 color: #000099;
 font-size: 0.9em;
}
.rightdouble a{
 font-size: 0.9em;
 color: #000099;
}


/* Comments */
.commentauthor {
 font-weight: bold;
 font-size: 1.2em;
 padding: 0 0 2px 0;
 margin: 0;
 color: #000000;
}
.commentauthor a {
 font-weight: bold;
 margin: 0;
 background: url(‘images/bullet.jpg’) no-repeat top right;; padding-left:0; padding-right:20px; padding-top:0; padding-bottom:0
}
.commentdate {
 font-size: 0.8em;
 text-align: right;
 line-height: 18px;
 padding: 0;
 margin: 0;
}
#nocomment, #commentsclosed {
 text-align: center;
 color: #777;
 font-size: 1.1em;
}

/* Comments Form */
#comment  {
 width: 465px;
}
#comment, #author, #url, #email, #press{
 background: #fff;
 font-size: 1.1em;
 color: #777;
 padding: 1px 2px 1px 1px;
}
#comment, #author, #url, #email{
 border: 1px solid #000;
}
#comment:hover, #author:hover, #url:hover, #email:hover{
 border: 1px solid #777;
}
#comment:focus, #author:focus, #url:focus, #email:focus{
 background: #fff;
 border: 1px solid #000;
 color: #777;
 padding: 1px 2px 1px 1px;
}
#commentboxes p {
 margin: 0;
 padding-bottom: 0.9em;
}


h2#comments {
 margin-bottom:40px;
}


p.feeds {
 float: right;
 margin-top: -1.8em;
 font-size: 0.9em;
}


p.feeds a, p.feeds a:hover  {
 text-decoration: none;
}


p.feeds a:hover {
 color: #000000;
}
#inputbox {
 clear: both;
 color: #777;
 font-size: 0.9em;
}
#inputbox a {
 color: #777;
}
#inputbox a:hover {
 color: #FFFFFF;
}


p.inputbox {
 margin: 0;
 padding-bottom: 10px;
}


p.pages {
 margin: 0;
 padding: 40px 40px;
 padding-top: 0;
 text-align: center;
}


p.pages a {
 color: #0033cc;
}


/* Credits */
p.credits {
 padding: 0px;
 text-align: center;
 margin: 10px 0px; 
 color: #999;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 0.9em;
}


/* Search/Archives/Categories Results Pages */
.searchresult, .searchresult h2 {
 padding: 0;
 margin: 0;
}
.searchresult a {
 color: #0000cc; 
}
.searchinfo {
 font-size: .9em;
 line-height: 18px;
 padding: 0 0 2px 0;
 color: #000;
 margin: 0 ;
}
.searchdetails {
 font-size: .9em;
 line-height: 18px;
 padding: 0 0 2px 0;
 color: #000;
 margin: 0 ;
 border-bottom: 1px solid #d6debb;
}

/* 
This piece of code is for clearing
the floats without structural markup
Don’t modify it
*/
.clearfix:after {
 content: « . »; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;
}
.clearfix {
 display: inline-table;
}

/* Hides from IE-mac */
* html .clearfix {
 height: 1%;
}
.clearfix {
 display: block;
}
/* End hide from IE-mac */
.alt {
        border-bottom: 1px solid #efefef;
        }
.notice {
       color: #0066ff;
       font-size: 1.2em;
       font-weight: bold;
        }
.notice2 {
        color: #000099;
        font-weight: bold;
         }
#wp-calendar a {
   background: #f4fbd9;
}
*

Et pour terminer ici spécifiquement :

.storycontent {
 padding: 30px 4px 5px 1px;
}
.singlepages p {
 text-align: justify;
 margin: 0px 105px 80px 105px;
 line-height: 20px;

En quoi consiste exactement storycontent et storypages ? Et surtout; le fameux ordre à laquelle refère la série de quatre valeur en px, ou puis-je savoir exactement a quoi leur emplacement fait référence…. car ce n’est pas evidant à deviner.😕

Merci encore de pouvoir m’aider… moi, de mon côté, je vous laisse mon theme beta actif car je vais me coucher.
:rolleyes:
zzz

30 janvier 2007 à 18 h 09 min #590734

Membre

Maître WordPress

2484 contributions

M’Oo’do : un titre explicite facilite la recherche !

30 janvier 2007 à 20 h 31 min #590735

alakhnor

Participant

Maître WordPress

996 contributions

.storycontent et .storypage sont des identifiants que tu retrouveras dans la syntaxe .

margin: 0px 105px 80px 105px; signifie : 0 marge haut, 105 pixels marge droite, 80 pixels marge bas, 105 pixels marge gauche (pour se rappeler, on part du haut et on tourne dans le sens des aiguilles d’une montre).

Pour repérer un style sur ta page, je te conseille d’utiliser l’extension Web Developper de Firefox. Elle te permet de savoir quel style est actif à un endroit de ta page par un simple survol à la souris.

6 février 2007 à 1 h 48 min #590736

radiCarl

Membre

Chevalier WordPress

137 contributions

Ta réponse m’a beaucoup aidé alakhnor. D’ailleurs, grace à l’extension Web Developper, j’ai réussis à « bizouner » le ssheet de mon template. Toutefois, ce fut laborieux du fait que le probleme auquel je faisais face a rapport avec le « 3-pixel-jog bug in IE ».

Mais bon, le résultat actuel me satisfait; je dois passer à d’autre chose.

Merci encore.

NB A mort Eurk-Xplorer !!! http://radicarl.net/?page_id=57

6 février 2007 à 22 h 31 min #590737