Décalage très problématique sous IE6

Statut : non résolu

Ce sujet contient 21 réponses, 5 participants et a été mis à jour pour la dernière fois par Comme une image, le il y a 16 années et 11 mois.

15 sujets de 1 à 15 (sur un total de 22)

1 2 →

Auteur

Messages
12 juillet 2008 à 18 h 39 min #461043
Julobox
Membre

Chevalier WordPress
138 contributions
bonjour,

Aujourd’hui, 12 Juillet, j’avais prévu d’ouvrir mon site au « grand public ». J’ai du le fermer 5 minutes après, en me rendant compte de l’affichage catastrophique sous Internet Explorer 6 (tiens donc, étonnant). En fait, tout mon contenu est trop décalé vers la droite ( de genre 10 ou 15 pixels environ), ce qui fait que ma deuxième sidebar n’a plus de place et s’affiche en dessous de tout le reste.

J’ai essayé de résoudre le problème par moi-même:

– Validation CSS OK
– Désactivation de tous les plugins OK
– Test sous IE7 OK
– Test sous Safari OK
– Désactivation d’une partie du code du header, dont la liste horizontale et le gif transparent OK

Et rien ne se passe, toujours ce décalage très problématique. ET après avoir bosser pas mal sur ce template, ça m’embête pas mal.

Je vous aurait bien fait une petite capture sous IE6, mais je suis sur Mac, sans PC à proximité…

Que faire au vu de la feuille de style ?
```
Based on GridFocus and MassivePress.
*/


* {
margin:0;
padding:0;
}

html,body {
background:#333 url(images/) top repeat-x;
color:#333;
text-align:center;
}

body {
font:12px arial,helvetica,verdana,sans-serif;
}

h1 {
font-size:22px;
}

h2 {
font-size:18px;
}

h3 {
font-size:16px;
}

h4 {
font-size:14px;
}

h5 {
font-size:10px;
color:#7f7f7f;
padding-left:1px;
font-weight:400;
}

a {
color:#333;
text-decoration:none;
}

a:hover {
color:#666;
}

#wrapper {
margin:0 auto;
text-align:left;
width:1080px;
background:url(images/bg.png) repeat-y #999999;
}

/* masthead / footer – navigation and categories */
#masthead {
background:url(images/header.png) no-repeat;
height:180px;
margin-top:0px;
}

#masthead h1 a {
text-transform:uppercase;
width:400px;
float:left;
margin:12px 0 0;
}

#masthead h1 a em {
font-style:normal;
color:#555;
}

#headLinks {
padding-top:76px;
color:#333;
margin-left:0px;
}

#headLinks a {
font-size:12px;
color:#333;
}

#headLinks a:hover {
color:#CCC;
}

#headLinks ul li {
list-style:none;
display:inline;
margin:0 12px 0 0px;
}

#subHead {
width:1080px;
height:90px;
border-bottom:1px solid #B8B8B8;
padding-top:0px;
padding-bottom:5px;
display:none;
}

#headAds {
width:728px;
height:90px;
margin:auto;
display:none;
}

li.top {
border-left:1px solid #DDD;
float:right;
display:block; width:100px;
}

li.top a {
width:100px;
}

.nav li.skip a:hover,li.top a:hover {
background:transparent;
color:#333!important;
}

/* main – middle content and columns */
#mid {
}

#mainCol {
float:left;
margin:26px 0 0 13px;
width:464px;
overflow:hidden;
}

#vids {
padding-left:20px;
}

/* style individual sidebars */
#midCol a {
font-weight:700;
}

#midCol {
color:#444;
float:left;
margin:25px 0 0 20px;
width:250px;
line-height:1.3em;
}

#midCol p {
color:#777;
}

#midCol h3 {
color:#fff;
background:url(images/h3.gif);
}

#searchWrap,.middle_links {
}

#searchWrap input {
vertical-align:middle;
}

#searchWrap #s {
font-size:1.1em;
border:1px solid #BBB;
padding:1px 2px;
margin-right:3px;
width:265px;
}


.middle_links {
margin-bottom:18px;
}

.middle_links h3 {
margin-bottom:5px;
}

#midCol ul {
list-style:none;
margin:8px 0 4px;
}

.middle_links ul li {
color:#7F7F7F;
line-height:1.2em;
border-top:1px solid #BBB;
padding:3px 0 4px;
}

.middle_links img {
border:0;
}

#tertCol {
float:left;
width:300px;
margin:23px 5px 0 20px;
}

#tertCol p {
color:#777;
}

#tertCol ul {
list-style:none;
margin:8px 0 4px;
}

#elseWhere {
margin:0 0 20px;
}

#elseWhere h3 {
margin-bottom:5px;
}

#elseWhere img {
margin-bottom:5px;
border:1px dashed #333;
}


ul#imgLinks {
list-style:none;
margin:5px 0;
}

#imgLinks li {
color:#7F7F7F;
line-height:1.2em;
padding:0 0 1px;
}

#imgLinks li a img {
border:3px solid #EEE;
width:145px;
height:74px;
color:#333;
font-weight:700;
}

#imgLinks li a:hover img {
border-color:#DDD;
}

#introIMG {
float:left;
margin:6px 0 0 0;
overflow:hidden;
}

#introIMG img {
border:none;
padding:4px;
border:1px dashed #333333;
width:454px;
height:120px;
}

.rss_links h3 {
margin-bottom:5px;
}

.rss_links {
margin-bottom:20px;
text-align:justify;
}

.rss_links ul li {
background:url(images/rss.gif) no-repeat 0 3px;
color:#7F7F7F;
line-height:1.2em;
border-top:1px solid #BBB;
padding:3px 0 4px 16px;
}

.prep h3 {
margin-bottom:5px;
}

.prep {
margin-bottom:20px;
text-align:justify;
}

.prep ul li {
background:url(images/prep.gif) no-repeat 0 3px;
color:#7F7F7F;
line-height:1.2em;
border-top:1px solid #BBB;
padding:3px 0 4px 16px;
}



.user_links h3 {
margin-bottom:5px;
}

.user_links {
margin-bottom:20px;
}

.user_links ul li {
background:url(images/user.gif) no-repeat 0 3px;
color:#7F7F7F;
line-height:1.2em;
border-top:1px solid #BBB;
padding:3px 0 4px 16px;
}

#featured {
padding:2px;
}

#featured img{
width:300px;
height:50px;
margin-bottom:5px;
border:1px dashed #333333;
}

/* wordpress entries styling – main content column */
#postMain {
height:280px;
overflow:hidden;
margin-bottom:15px;
}

.postMeta {
background:url(images/dot.gif) repeat-x left center;
text-transform:uppercase;
font-size:11px;
text-align:right;
margin-bottom:5px;
}

.postMeta span.date {
background:#FFF;
color:#7F7F7F;
padding:0 2px 0 4px;
}

.postMeta span.comments {
background:#FFF url(images/user.gif) no-repeat left center;
padding-left:15px;
margin-left:2px;
}

.postMeta span.comments a,.postMeta span.date a {
color:#555;
}

.post {
margin:0 0 10px;
}

.post h2 {
line-height:1.2em;
}

.post h2 a {
width:100%;
display:block;
outline:none;
}

.entry h3 {
margin:1em 0;
}

.post .entry {
line-height:1.4em;
overflow:hidden;
}

.post .entry p {
margin:5px 0;
text-align:justify; 
}

.post .entry p a {
background:url(images/dot.gif) repeat-x bottom left;
font-weight:700;
}

.entry blockquote {
margin:0 1.3em;
}

.entry ul {
margin:0 1.3em;
list-style:none;
}

.entry li a {
color:#333;
font-weight:700;
background:url(images/dot.gif) repeat-x bottom left;
}

.entry ul li {
background:url(images/li.gif) no-repeat 0 1px;
padding-left:18px;
margin-bottom:7px;
}

.entry ol {
margin:0 1em 0 3em;
}

.entry ol li {
margin:0 0 7px;
}

.entry img,.entry a img {
/*border:3px solid #EEE;*/
}

.entry a:hover img {
border-color:#DFDFDF;
}

.entry table tr {
padding:15px 0;
}

.entry table tr.alt {
background:#eee;
}

/* style pagination buttons */
#more_reading {
color:#7F7F7F;
font-size:11px;
text-transform:uppercase;
margin-bottom:15px;
margin-top:15px;
text-align:right;
}

span.navback{
width:25px;
height:15px;
display:block;
float:right;
background:url(images/arrow_prev.gif) top right no-repeat;
cursor:pointer;
}

span.navforward{
width:25px;
height:15px;
display:block;
float:right;
background:url(images/arrow_next.gif) top right no-repeat;
cursor:pointer;
}

/* style me some comments and inputs */
#comments {
width:435px;
padding:12px 0 0;
}

#comment {
width:458px;
overflow:auto;
font:12px arial,helvetica,verdana,sans-serif;
}

h2.commh2 {
font-size: 1.4em !important;
padding: 0 0 5px;
color:#333 !important;
}

ol.commentlist {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 12px;
line-height: 20px;
}

ol.commentlist p {
margin-bottom:10px;
line-height: 20px;
}

ol.commentlist cite {
font-style: normal;
font-weight: bold;
}

ol.commentlist li {
padding: 20px 10px 10px 10px;
}

ol.commentlist li.alt {
padding: 10px 10px 5px 10px !important;
border:1px solid #BBBBBB;
}

input#submit {
cursor:pointer;
margin:5px 0 15px 0;
}

#comment,#author,#email,#url {
border:1px solid #BBBBBB;
padding:2px;
margin:0 0 5px 0;
}

.labeltext {
padding:0 0 10px 0;
}


/* footer – text string and links */
#footer {
font-size:11px;
padding-top:10px;
background:url(images/footer.png) no-repeat;
padding-bottom:100px;
margin:15px 0 0 0;
}

#footer p a {
font-weight:700;
color:#333;
}

/* float rules */
.floatleft {
float:left;
margin:3px 7px 0 0;
}

.floatright {
float:right;
margin:3px 0 0 7px;
}

.right {
float:right;
}

.left {
float:left;
}

.clear {
clear:both;
}

.fix:after {
content: ». »;
display:block;
height:0;
clear:both;
visibility:hidden;
}

.fix {
display:inline-block;
}

* html .fix {
height:1%;
}

.fix {
display:block;
}

/* Tips */
.tool-tip {
color:#ccc;
width:150px;
z-index:13000;
}

.tool-title {
font-weight:700;
font-size:11px;
margin:0;
color:#fff;
padding:8px 8px 0 8px;
background:#192227;
text-align:left;
}

.tool-text {
font-size:11px;
padding:0 8px 8px 8px;
background:#192227;
text-align:left;
}
```
12 juillet 2008 à 21 h 11 min #636574

Lumiere de Lune
Participant

Maître WordPress
20531 contributions

Ce probleme de décalage provient habituellement d’une façon légèrement différente de recalculer les marges.

La taille d’une boite, c’est sa largeur + la largeur de sa bordure + la largeur des marges. Il suffi d’oublier un pixel pour que ça se décale.

Sans une page à voir, avec le code html, le css est totalement inutile.
Tu peux utiliser le plugin maintenance mode …. et au moins faire une copie du html généré

12 juillet 2008 à 22 h 32 min #636575

Julobox
Membre

Chevalier WordPress
138 contributions

Exact. J’ouvre même le site, tant pis pour IE6, tout en essayant de trouver le problème.

Au niveau des marges, c’est moi qui ai procédé à la création des colonnes, au nombre de 3, ainsi qu’à leurs marges respectives (les marges agissent sur le côté droit des boîtes si mes souvenirs sont bons). Mais il est possible qu’il y ai un dépassement quelque part.

En ayant désactivé successivement le header, le contenu avec les images, et le footer, le problème a tout de même persisté il s’agit donc probablement d’une erreur de valeur dans le css.

Le site est maintenant visible… hmm je vois pas pour le moment.

12 juillet 2008 à 23 h 46 min #636576

Lumiere de Lune
Participant

Maître WordPress
20531 contributions

Avec une url pour qu’on puisse voir ?

13 juillet 2008 à 1 h 27 min #636577

Maitre Mo
Participant

Maître WordPress
1653 contributions

Ce que c’est de ne plus dormir du tout… C’est ici.
C’est pas une question de largeur globale ?

13 juillet 2008 à 2 h 37 min #636578

Lumiere de Lune
Participant

Maître WordPress
20531 contributions

Cher Maitre, il y a un formulaire, et le formulaire il est là pour donner les renseignements dont on a besoin 🙂

Le site web n’étant pas obligatoirement le site qui a des problèmes, j’ai décidé d’arrêter d’essayer de deviner ou de jouer à la boule de cristal 🙂

Et d’ailleurs, ce site là il est très bien dans IE chez moi 🙂

Après global ou pas, c’est une question de taille, oui. Sur un thème aussi graphique, je ne le ferais pas comme pour le votre, il faut vraiment voir quelle zone a une taille erronnée

13 juillet 2008 à 3 h 48 min #636579

Maitre Mo
Participant

Maître WordPress
1653 contributions

Je disais juste ça pour vous adresser le clien d’oeil du matin..!
Chez moi (IE7) sinon, il s’affiche effectivement avec la partie de droite en partie « hors écran », et la colonne centrale un peu bouffée par les autres.

13 juillet 2008 à 8 h 40 min #636581

jessy
Participant

Chevalier WordPress
461 contributions

Bonjour

Effectivement il y a un dépassement de taille sous IE6 soit 11px si je me trompe pas.

La plus facile à réduire serait la colonne du milieu soit la div #midCol en la passant de 250px à 239px

Toutefois la colonne de droite (#tertCol) étant plus grande (300px) il serait possible de jouer sur celle-ci en lui enlevant là aussi 11px sur la largeur soit par exemple au lieu de 23px 5px 0 20px, mettre 23px 2px 0 12px.

Le site étant OK sous FF IE7 Safari il serait préférable de passer ces nouvelles dimensions par les commentaires conditionnels.

Nota : La div main#Col est présente 3 fois.

13 juillet 2008 à 14 h 13 min #636582

Julobox
Membre

Chevalier WordPress
138 contributions

Merci pour vos nombreuses (si si) réponses.

Structurons:

Ce que c’est de ne plus dormir du tout… C’est ici.
C’est pas une question de largeur globale ?

Oui et non. C’est à dire que j’ai conscience que le site est un peu trop large et difficilement affichable pour les résolutions un peu plus petites (voilà ce que c’est que de développer sur grand écran avec une grande résolution, on perd toute notion d’échelle). Mais le souci sur PC avec IE6 n’avait rien à voir avec un report du au dépassement latéral de la page elle-même.

Cher Maitre, il y a un formulaire, et le formulaire il est là pour donner les renseignements dont on a besoin smile

Le site web n’étant pas obligatoirement le site qui a des problèmes, j’ai décidé d’arrêter d’essayer de deviner ou de jouer à la boule de cristal smile

Certes, je suis en tord. Mais pour ma défense, le formulaire, je l’ai rempli tellement de fois, que j’ai pris l’habitude de l’effacer. Mille excuses pour le manque d’informations, je vais tenter de palier à cette lacune… Je confirme, l’URL, c’est bien http://thewall.fr

Je disais juste ça pour vous adresser le clien d’oeil du matin..!
Chez moi (IE7) sinon, il s’affiche effectivement avec la partie de droite en partie « hors écran », et la colonne centrale un peu bouffée par les autres.

Voilà, ça c’est du à la largeur trop importante du contenu, qui apparemment pose problème même sur IE7. Quelle est votre résolution d’écran, cher Maître, sans indiscrétion?

Effectivement il y a un dépassement de taille sous IE6 soit 11px si je me trompe pas.

La plus facile à réduire serait la colonne du milieu soit la div #midCol en la passant de 250px à 239px

Toutefois la colonne de droite (#tertCol) étant plus grande (300px) il serait possible de jouer sur celle-ci en lui enlevant là aussi 11px sur la largeur soit par exemple au lieu de 23px 5px 0 20px, mettre 23px 2px 0 12px.

Le site étant OK sous FF IE7 Safari il serait préférable de passer ces nouvelles dimensions par les commentaires conditionnels.

Tout ceci me semble fort sage. Il m’était en effet venu à l’esprit de créer une feuille de style exclusive pour IE6 en utilisant dans le header l’appel conditionnel à ie.css
Ce « hack » est-il fiable? Propre? Sûr?

Merci à vous 3 pour vos réponses ci-dessus et les prochaines ci-dessous

13 juillet 2008 à 15 h 17 min #636583

jessy
Participant

Chevalier WordPress
461 contributions

Julobox wrote:

Ce « hack » est-il fiable? Propre? Sûr?

Ce n’est pas un hack mais bien le contraire. Propre et sûr of course puisque recommandé par Microsoft qui nous a pondu (hélas) ce IE6.

A ce sujet voir ce qui se dit ici : http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows

13 juillet 2008 à 15 h 31 min #636584
Maitre Mo
Participant

Maître WordPress
1653 contributions
Bonjour Julobox,
Et merci de ta patience face à mes légendaires apartés ! Je suis en 1024×768, sous IE7 à jour, et je ne vois pas la colonne droite directement à l’écran à compter précisément du 2éme w de l’adresse www… qui est en haut.

Sinon, à toutes fins, j’utilise un trois colonnes qui « passe » partout à ma connaissance… (remarque non, je dis ça mais pas sous la première version IE6, la colonne de droite « sautant » carrément ! Donc en tout cas sous IE7 !), et voilà ma feuille de style, si jamais…
```
/*  
Theme Name:Unnamed
Theme URI:http://xuyiyang.com/wordpress-themes/unnamed/
Description:<a href="http://xuyiyang.com/wordpress-themes/unnamed/">Unnamed</a> is a three-column, widget-ready wordpress theme with some AJAX functions. It is easy to use and highly customizable.
Version:1.23
Author:Xu Yiyang
Author URI:http://xuyiyang.com/

I get the AJAX commenting from K2 by Michael, Chris, Zeo and Steve Lam. Thanks for their great work.
You can get K2 here:
http://getk2.com/

The Live Search originally based on the code of K2 Live Search Mod by Steve Lam:
http://stevelam.org/2006/04/k2-live-search-mod/

This theme uses the wonderful Sweetie Icons by Joseph North:
http://sweetie.sublink.ca/

The theme is released under GPL:
http://www.opensource.org/licenses/gpl-license.php
*/

/* General */
*, html {
	margin:0;
	padding:0;
}
body {
	font:62.5% « Arial »,Lucida Grande, Segoe UI, Verdana, Arial, sans-serif;
	text-align:center; /*Taille de tous les textes de la page*/
}
fieldset, select, img {
	border:0;
}
hr, #searchform br, .counter {
	display:none;
}
a, a:link, a:active, a:visited {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
p {
	margin:0 0 10px;
}
ol li {
	list-style:decimal outside;
}
acronym, abbr, span.caps {
	cursor:help;
}
acronym, abbr {
	border-bottom:1px dashed #3465a4;
}
blockquote {
	margin:20px;
	padding-left:10px;
	font-style:italic;
}
cite, ins {
	text-decoration:none;
}
code, pre, kbd {
	font:1em ‘Arial’, Courier New, Courier, sans-serif;
}
small {
	font:.8em Arial, Helvetica, sans-serif;
	color:#777;
}
strike, del {
	color:#777;
	text-decoration:line-through;
}
label {
	cursor:pointer;
}
/*Taille de tous les titres*/ 
h1, h2, h3, h4 {
	font-family: « Arial », Lucida Grande, Georgia, Times New Roman, Times, serif;
}
h1 {
	font-size:3.8em;
	text-align:left;
	padding:18px 0 5px 20px;
}
h2 {
	margin:5px 0;
	font-size:1.6em;
}
h3, h4 {
	margin:5px 0 0;
	font-size:1.2em;
}
/* Container */
#container {
	position:relative;
	margin:0 auto;
	font-size:1.2em;
	width:1020px;
	background:url(images/bg_content.png) repeat-y center top;
}
#content {
	width:1020px;
	margin:0 auto;
}
/* Header and Navigation */
#header {
	margin:0 auto;
	line-height:1.2em;
         	width:1020px;
}
.description {
	font-size:1em;
	text-align:left;
         margin:15px 0;
	padding:0 0 5px 20px;

}

#nav {
	display:block;
	height:32px;
	margin:0 auto !important;
	margin:0;
	padding:0;
	text-align:left;
	letter-spacing:0.05em;
	text-transform:uppercase;
	width:1020px;
	background:url(images/bg_nav.png) repeat-x left top transparent;
	list-style:none;
	z-index:8;
}
#nav li {
	float:left;
	padding:0;
	margin:0;
}
#nav li a {
	display:block;
	line-height:32px;
	padding:0 10px;
	color:#fff;
	text-decoration:none;
}
#nav li a:hover {
	color:#fff;
	background:#333;
}
#nav li li {
	width:200px;
}
#nav ul a {
	color:#fff;
	line-height:24px;
}
#nav ul {
	position:absolute;
	z-index:500;
	top:auto;
	list-style:none;
	display:none;
	width:200px;
	list-style:none;
	text-align:center;
	border:1px solid #333;
	background:url(images/bg_nav_ul.png) repeat left top transparent !important;
	background:#444;
}
#nav ul ul {
	top:0;
	left:100%;
}
#nav li:hover, #nav li.sfhover {
	color:#fff;
	background:#333;
	cursor:pointer;
	z-index:100;
}
#nav li:hover ul ul, #nav li li:hover ul ul, #nav li li li:hover ul ul, #nav li li li li:hover ul ul, #nav li.sfhover ul ul, #nav li li.sfhover ul ul, #nav li li li.sfhover ul ul, #nav li li li li.sfhover ul ul {
	display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {
	display:block;
}
/* Primary Content and Entries */
#primary-content {
	float:left;
	text-align:left;
	line-height:1.6em;
	margin:0 1.5%;
	width:540px;
	display:inline;
	overflow:hidden;
}
.pagetitle {
	margin-top:15px;
	text-align:center;
}
.entry {
	text-align:justify;
	padding:10px 8px;
}
.entry ul, .entry ol {
	margin:0 0 0 40px;
}
.entry li {
	padding-bottom:8px;
}
.entry-header {
	font-size:1.6em;
	font-weight:400;
	margin:0;
	padding:3px 0;
}
.entry-date {
	text-align:right;
	font-size:.9em;
	color:#93a9af;
	background:url(images/bg_meta.png) no-repeat top center;
	margin-bottom:4em;
}
.entry-footer {
	color:#ccc;
	font-size:0.9em;
	text-align:left;
	margin:40px 0 20px;
	line-height:1.3em;
	padding:4px 0;
	background:url(images/bg_meta.png) no-repeat top center;
}
/* Sidebar */
#sidebar {
	float:right;
	line-height:1.2em;
	margin:13px 1.5% !important;
	margin:13px 0;
	width:400px;
	text-align:left;
	font-size:1em;
}
/*Titres des widgets de la sidebar*/
#sidebar h2 {
	font-size:1.2em;
	font-weight:400;
	margin:10px 2px 0 7px;
	padding:2px 0;
}
#sidebar ul {
	color:#777;
	list-style:none;
}
#sidebar li {
	width:100%;
}
#sidebar ul ul li {
	width:100%;
	margin:0 5px;
	padding:2px;
}
#sidebar ul ul li a, #sidebar ul ul li a:link, #sidebar ul ul li a:visited {
	padding:2px 4px;
}
.left-sidecolumn {
	float:left;
	width:46%;
	padding:0 2%;
}
.right-sidecolumn {
	float:right;
	width:46%;
	padding:0 2%;
}
.intro {
	font-size:.9em;
	color:#777;
	width:90%;
	margin:8px 4%;
	padding:0 0 15px 0;
	background:url(images/bg_meta.png) no-repeat center bottom;
	line-height:1.4em;
}
/* Shelf */
#shelf {
	float:left;
	line-height:1.2em;
	width:100%;
}
#toggle {
	width:1020px;
	margin:0 auto !important;
	margin:0;
	text-align:left;
	background:#000;
	list-style:none;
	overflow:hidden;
}
#toggle h2 {
	color:#fff;
	font-size:1.2em;
	font-weight:400;
	margin:15px 2px 0;
}
#toggle ul {
	list-style:none;
	margin:10px 0 10px;
}
#toggle li {
	float:left;
	width:21%;
	background:transparent;
	margin-left:1.8% !important;
	margin-left:1.5%;
	padding:0 4px 6px 4px;
	display:inline;
}
* html #toggle li {
	width:20%;
}
#toggle ul li {
	width:100%;
	margin:2px 0;
	padding:0 8px;
}
#toggle ul li a, #toggle ul li a:link, #toggle ul li a:visited {
	display:block;
	background:transparent;
	color:#fff;
	padding:2px;
	border-top:1px solid #3465A4;
	border-bottom:1px solid #3465A4;
	text-decoration:none;
	white-space:nowrap;
}
#toggle ul li a:hover {
	border-top:1px solid #3465a4;
	border-bottom:1px solid #3465a4;
}
#toggle li.tags {
	width:45%;
}
#toggle li.tags a:hover {
	background:none;
	text-decoration:underline;
}
#sidebar ul ul, #toggle ul {
	margin:0;
	padding:0 0 10px;
}
/* Footer */
#footer {
	clear:both;
	height:64px;
	margin:0 auto;
	width:1020px;
	background:url(images/bg_footer.png) /*no-repeat center*/ top transparent;
}
#footer p {
	color:#fff;
	text-align:center;
	font-size:.9em;
	line-height:1.5em;
	padding:12px 0 0;
}
/* Search */
#search {
	width:100%;
	line-height:1em;
	display:block;
}
.searchinput {
	font-size:1em;
	width:88%;
	margin:5px 4%;
	padding:3px;
	border:1px solid #ccc;
	height:16px;
	background:url(images/bg_search.png) right 3px no-repeat #f4f4f4;
}
.searchinput:focus, .searchinput:hover {
	border:1px solid #3465a4;
	background:url(images/bg_search.png) right -16px no-repeat #fff;
}
#live-results {
	margin:0;
	padding:2px 0;
}
#live-results h2 {
	margin:5px 0;
	padding:0;
}
#live-results h3 {
	font-size:1em;
	font-weight:400;
	margin:0;
	padding:0;
}
.more-results {
	display:block;
	background:url(images/search-more.png) left center no-repeat;
	margin:5px 15px 0 0;
	padding:2px 0 2px 18px;
}
#search-loading {
	margin:-25px 0 0 94%;
	height:18px;
	width:18px;
	background:url(images/spinner.gif) center center no-repeat;
}
#search-reset {
	margin:-25px 0 0 94%;
	height:18px;
	width:18px;
	background:url(images/cancel.png) center center no-repeat;
	cursor:pointer;
}
#search-results {
	width:90%;
	margin:5px 4%;
}
#search-results li {
	background:url(images/item.png) left center no-repeat;
	margin:0;
	padding:0;
}
#search-results h3 {
	margin:0;
	padding:0 0 0 8px;
}
/* Comments and Trackbacks */
.comment-section {
	margin:30px 10px;
	text-align:left;
}
#leavecomment {
	margin:30px 25px 20px 0 !important;
	text-align:center;
	color:#ccc;
	font:1.8em « Arial », Georgia, Times New Roman, Times, serif;
}
.section-title {
	font-size:1.6em;
	font-weight:400;
	text-align:center;
	margin:5px 25px 5px 0;
}
#commentform {
	margin:15px 0;
}

#authorinfo {
	width:100%;
}
input#author, input#email, input#url, textarea#comment {
	border:1px solid #ccc;
	padding:1px;
	background:#f4f4f4;
}
#commentform input:focus, #commentform textarea:focus, #commentform input:hover, #commentform textarea:hover {
	border:1px solid #3465a4;
	background:#fff;
}
textarea#comment {
	width:99%;
}
#submit, #previewcomment {
	float:right;
	margin:0 0 0 10px;
	border:1px solid #3465A4;
	color:#fff;
	background:#5D8BB3;
	padding:0 2px;
}
#submit:hover, #previewcomment:hover {
	border:1px solid #3465A4 !important;
	color:#fff !important;
	background:#3465A4 !important;
}
.comment-header {
	text-align:left;
	margin:4px 0;
	font:1.6em « Arial », Georgia, Times New Roman, Times, serif; 
}
.comment-content {
	margin:10px;
        text-align:justify;
}


.comment-footer {
	text-align:left;
	margin:4px 0 0;
	font-size:.9em;
}
#commentlist, #pinglist, #previewlist {
	list-style:none;
}
#commentlist li, #pinglist li, #previewlist li {
	margin:10px 0;
	list-style:none;
	padding:4px 0;
	line-height:1.8em;
	background:url(images/bg_meta.png) no-repeat top center;
}
#commentlist li .counter, #pinglist li .counter {
          	display=none;
} 
#commentlist li img {
	padding:0;
	border:0;
}
#commentlist li span.gravatar {
	float:right;
	margin:0px 0px 0px 10px;
	border:1px solid #ccc;
	width:32px;
	height:32px;
}
#error {
	margin:2px;
	padding:2px;
	text-align:center;
	color:#FF0000;
	background:#FFFF99;
	border-left:1px solid #3465a4;
	padding:2px 5px;
}
#commentload {
	padding-top:3px;
	float:right;
	vertical-align:middle;
	height:18px;
	width:18px;
	background:url(images/spinner.gif) center center no-repeat;
}
/* Images */
img {
	border:0;
}
p img {
	border:0;
	max-width:100%;
	padding:2px;
}
img.center, img[align= »center »] {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
img.alignright, img[align= »right »] {
	padding:4px;
	margin:0 0 2px 7px;
	display:inline;
}
img.alignleft, img[align= »left »] {
	padding:4px;
	margin:0 7px 2px 0;
	display:inline;
}
img.noborder {
	border:0 !important;
}
.feedlink img {
	display:inline;
	float:left;
	margin:0;
	padding:0;
}
/* Text align */
.center {
	text-align:center;
}
.alignleft {
	float:left;
}
.alignright {
	float:right;
}
.item {
	text-align:right;
}
/* Float */
.floatright {
	float:right;
}
.floatleft {
	float:left;
}

/*
Plugin Name: WP-Digg Style Paginator
Plugin URI: http://www.mis-algoritmos.com/2007/09/09/wp-digg-style-pagination-plugin-v-10/
Author: Victor De la Rocha
Author URI: http://www.mis-algoritmos.com
*/

/*CSS black style pagination*/
	div.pagination {
		padding: 3px;
		margin: 3px;
		text-align:center;
		color:#a0a0a0;
		font-size:80%;
	}
	div.pagination a {
		border: 1px solid #909090;
		margin-right:3px;
		padding:2px 5px;
		background-image:url(‘bar.gif’);
		background-position:bottom;
		text-decoration: none;
		color: #c0c0c0;
	}
	div.pagination a:hover, div.meneame a:active {
		border: 1px solid #f0f0f0;
		background-image:url(invbar.gif);
		background-color:#404040;
		color: #ffffff;
	}
	div.pagination span.current {
		margin-right:3px;
		padding:2px 5px;
		border: 1px solid #ffffff;
		font-weight: bold;
		background-color: #606060;
		color: #ffffff;
	}
	div.pagination span.disabled {
		margin-right:3px;
		padding:2px 5px;
		border: 1px solid #606060;
		color: #808080;
	}

/* Miscellaneous */
.content-top {
	font-size:.9em;
	text-align:right;
	width:1020px;
	background:url(images/bg_content_top.png) transparent repeat-x top center;
	margin:0 1px;
	height:15px;
}
.content-top a {
	margin:0 15px 0;
}
.content-bottom {
	background:url(images/bg_content_bottom.png) repeat-x bottom left;
	height:6px;
	margin:0 1px;
	width:1020px;
}
.navigation {
	display:block;
	font-size:.9em;
	text-align:center;
	padding:10px 0;
}
.alert {
	color:#FF0000;
	background:#FFFF99;
	border-left:1px solid #fc0;
	text-align:center;
	margin:10px auto;
	padding:5px;
}
.metacmt {
	background:url(images/comment.png) left center no-repeat;
	padding:2px 0 2px 17px;
}
.metacat {
	background:url(images/tag1.png) left center no-repeat;
	padding:2px 0 2px 16px;
}
.metatag {
	color:#ccc;
	background:url(images/tag2.png) left center no-repeat;
	padding:0 0 0 16px;
}
.metaedit {
	background:url(images/edit.png) left center no-repeat;
	padding:2px 0 2px 17px;
}
.clear {
	clear:both;
}

/*———————————————————- Classes ajoutées                   */

.citation {color:#3366ff;}
blockquote.citation {border:none; border-color:white;}

.separateur {text-align:center; 
		margin-top:2em;
		margin-bottom:2em;}

.Mô {color:#3465a4;}
```
Courage et obstination..!
13 juillet 2008 à 16 h 06 min #636585

Julobox
Membre

Chevalier WordPress
138 contributions

jessy wrote:

Julobox wrote:

Ce « hack » est-il fiable? Propre? Sûr?

Ce n’est pas un hack mais bien le contraire. Propre et sûr of course puisque recommandé par Microsoft qui nous a pondu (hélas) ce IE6.

A ce sujet voir ce qui se dit ici : http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows

Certes, voilà pourquoi j’ai mis le terme entre guillemets (j’ai lu ça quelque part ailleurs sur internet, alors c’est pas moi le responsable!).

Je vais m’oreinter vers cette solution…

Maitre Mo wrote:

Et merci de ta patience face à mes légendaires apartés ! Je suis en 1024×768, sous IE7 à jour, et je ne vois pas la colonne droite directement à l’écran à compter précisément du 2éme w de l’adresse www… qui est en haut.

Sinon, à toutes fins, j’utilise un trois colonnes qui « passe » partout à ma connaissance… (remarque non, je dis ça mais pas sous la première version IE6, la colonne de droite « sautant » carrément ! Donc en tout cas sous IE7 !), et voilà ma feuille de style, si jamais…

Toutes tes petites explications sont très précieuses, je t’en remercie. Je crois que malheureusement, en ayant choisi un site large de 1080 pixels, il ne peut s’afficher correctement sur une résolution comme la tienne de 1024×768, étant donné que, jusqu’à preuve du contraire, 1080, c’est plus grand que 1024. Ajoutée à cela la place de la barre de scroll, et éventuellement le volet d’historique, c’est mort… Avec ton template qui est dimensionné en largeur à 1020 pixels, tu n’a pas ce genre de problème.
Si le site est trop large pour la résolution, et donc, en définitive, pour l’écran, que ce soit sous IE, FF, Safari ou Camino, ça revient au même, l’affichage sera tronqué, ou pire décalé.
Ceci est valable aussi pour ton site par exemple, pour une résolution de 800×600 (qui se fait rare, heureusement).
En créant le template en résolution 1920×1200, forcément, je ne mettais pas trop posé la question…

En ayant pris en considération vos remarques, je vais encore regarder les statistiques de résolutions d’écrans des internet, et s’il s’avère que cette largeur est trop importante, je changerai profondément le template pour l’amener à du 960 pixels de large. Si le bug arrive encore sous IE6 après ces changements, je créerais un ie.css rien que pour ce fabuleux navigateur… Qu’en pensez-vous. Ca c’est du programme non?

Merci à vous.

13 juillet 2008 à 17 h 17 min #636587

Lumiere de Lune
Participant

Maître WordPress
20531 contributions

C’est du bon programme.
Je te conseille fortement de la faire.
Beaucoup de gens qui ont des écrans très larges ont aussi des panneaux verticaux dans leurs navigateurs, qui en utilisent une partie, 1024 en maximum est une bonne résolution.
Ou alors un design fluide 🙂

13 juillet 2008 à 17 h 49 min #636586

Julobox
Membre

Chevalier WordPress
138 contributions

1024 maximum maximum

Quand tu dis design fluide, j’imagine que tu penses aux largeurs générées en pourcentage et non en valeurs fixes?
Ca règle pas mal de problèmes, il est vrai, mais, comment dire… culturellement, je n’en serai pas capable. j’ai mes petites habitudes en css, et des div qui s’adaptent selon l’écran sans que je puisse rien contrôler, ça me fait froid dans le dos…

Autre possibilité, une fois le design moins large achevé, penser à réduire le contraste entre la couleur de la page et celle du fond de la page. Visuellement, moins de séparation, donc une impression de « grandeur » plus importante.

13 juillet 2008 à 18 h 37 min #636588

Lumiere de Lune
Participant

Maître WordPress
20531 contributions

Tu peux contrôler 🙂 Tu peux faire un design fluide en em et pas en pourcentage, par exemple, tu peux indiquer des largeurs minimum et maximum…
Auteur

Messages