[Resolu] Different sous ie6

Bonsoir,

Ma page web est complètement déformé sous IE6, alors que sous IE7 et sous Firefox 2 elle s'affiche tel que je la veux.

Mon css ne convient il pas à IE6 ?

merci
Modifié par kouiny (19 Nov 2006 - 23:19)

bonjour,

c'est le bug de IE qui double la valeur des marges .

tu peut par exemple appliqué un :

display:inline;

a div.news sans probleme , l'attributs float conservera au block ses caracteristiques d'elements flottants.

++

<edit> en regardant ta page , je m'aperçois maintenant que tu as de la chance que ça marche !!

les liens sont vide !!! , et la marge de 165px ne vient butter ni sur le contenu inexistant des balises de liens ni sur div.menu qui n'englobent pas ses flottants .
tes liens n'existent pas sans les images de fonds , il faut au moins reinseigner le title !
par exemple :

<a class="savoir" href="/forum" [b]title=" Le forum"[/b]></a> 

et puis un float:right serait peut-etre plus adapté.

.news {
height: 30px;
width: 480px;
display:inline;/* antie IE double marge bug */
float:right;
margin-right:50px;
}

re ++
Modifié par gcyrillus (18 Nov 2006 - 23:30)

merci gcyrillus,

ok pour les inline du bug de IE6, mais du coup le menu je le laisse en quelle float ? J'ai testé :

.menu {
float: left;
margin-left: 50 px
}

Du coup le div news passe en dessous du menu car il y a un conflit avec les right et left, mais que dois-je mettre pour la div menu ?

j'ai laissé comme celà :

.menu {
float: left;
}

Et ca s'alligne, mais j'aimerais avoir une marge gauche pour le menu de 50px. ?

?? , je te parlais du div.news a repassé en float:right; (voir le code proposé au dessus ).

Pour le menu il faudrait seulement que tu ajoute un attribut:title pour chacun de tes liens afin de les rendres visibles aux non-voyants (dont les moteurs de recherches font partis).

++

oui je les ai modifier les title dans les liens.

Pour le div.news comme tu peux voir dans le lien plus haut, j'ai fait la modif, c'était pour le div.menu qui float à gauche, si je met une marge, la div.news s'alligne en dessous

Comment pourrais-je faire ? je fait des test mais toujours rien, je voudrais une marge de 50 pixels à gauche pour le menu.

Voici le code actuelle modifié :

.conteneur2 {
  padding-top: 50px;
  margin-left: 50px;
  display:inline;
}

.menu {
float: left;
}

.news {
height: 30px;
width: 480px;
display:inline;
float:right;
margin-right:50px;
}

En même temps, mon div.conteneur2 qui englobe div.menu et div.news, ne fonctionne pas, il me fait pas la marge top de 50px.
Modifié par kouiny (19 Nov 2006 - 00:10)

ou la la , je suis désolé !

Tu as changé aussi d'autres valeurs dans le css , ils ne fallait pas mettre des display:inline partout , et puis d'autre trucs je supposse. aie aie.

Le resultat est encore plus desastreux qu'auparavant et la difference IE ff est accentuée.

J'avais ça comme css tout a l'heure:

@charset "iso-8859-1";

body { background: #fff url(images/altm-ptsv1_corps1.jpg) center top repeat-y; color: #000; margin: 0; }

a.lien:hover { text-decoration: none; }
a img {border: 0;}

.conteneur { background: #fff url(images/barre.jpg); color: #000; width: 750px; height: 790px; margin-left: auto;  margin-right:auto; }



.conteneur2 {
  padding-top: 50px;
  margin-left: 50px;
overflow:hidden;
zoom:1;
}

.menu {
float: left;
}

.news {
height: 30px;
width: 480px;
display:inline;
float:right;
margin-right:50px;
}


.meteo2 { background: #fff url(images/fd2.png); color: #000; width: 425px; height: 214px; padding-top: 12px; padding-left: 25px; display:inline;
float:right;
margin-right:50px; }

.im1 { height: 200px; width: 200px; }

.fondded {
background: #fff url(images/fondded.png);
height: 100px;
width: 200px;
float: left;
overflow:hidden;
}

.ded {
height: 100px;
width: 180px;
}

.conteneur3 {
zoom:1;
margin-left:50px;
overflow:hidden;

}

.pub {
margin-left:50px;
margin-top:-100px;
}

.conteneur5 {
width: 761px;
height: 300px;
padding-top: 10px;
padding-left: 20px;
}

.texte { font-family: verdana, arial; font-size: 1em; font-style: italic; font-weight: bold; color: #C02020; margin-left: 30px;}
/* Centrage de la date et de l'heure */
div.centrage { text-align: center; }
/* Menu de gauche */
.savoir { display:block; width:130px; height:30px; background-image:url(images/menu/savoir.jpg); }

.savoir:hover { background-image:url(images/menu/savoir2.jpg); }

.choc { display:block; width:130px; height:30px; background-image:url(images/menu/choc.jpg); }

.choc:hover { background-image:url(images/menu/choc2.jpg); }

.toutsavoir { display:block; width:130px; height:30px; background-image:url(images/menu/toutsavoir.jpg); }

.toutsavoir:hover { background-image:url(images/menu/toutsavoir.jpg); }

.meteo { display:block; width:130px; height:30px; background-image:url(images/menu/meteo.jpg); }

.meteo:hover { background-image:url(images/menu/meteo2.jpg); }

.horoscope { display:block; width:130px; height:30px; background-image:url(images/menu/horoscope.jpg); }

.horoscope:hover { background-image:url(images/menu/horoscope2.jpg); }

.tv { display:block; width:130px; height:30px; background-image:url(images/menu/tv.jpg); }

.tv:hover { background-image:url(images/menu/tv2.jpg); }

.annonce { display:block; width:130px; height:30px; background-image:url(images/menu/annonce.jpg); }

.annonce:hover { background-image:url(images/menu/annonce2.jpg); }
/* Fin du Menu de gauche */
.footer { background: #fff url(images/pts-vbs_footer1_sliced.jpg); color: #000; width: 770px; height: 100px; margin-left: auto;  margin-right: auto; }


/**** Inline STYLE-tag style sheet ****/

/* @import url(2448.css); */


/**** Inline STYLE-tag style sheet ****/

.texte_gn{font-family:Verdana; font-size:13px;}


/**** Inline STYLE-tag style sheet ****/

.textededicace2{font-family: Arial; font-size: 12px; color: #CC0000;}

Du coup je ne sais plus ou tu en est et ce que tu comprends de la mise en forme .

++

Même moi je suis perdu j'arrive plus à alligné la météo en dessous des news.

.conteneur3 {
  margin-top:: 580px;
  margin-left: 500px;
  
}

.meteo2 { background: #fff url(images/fd2.png); color: #000; width: 425px; height: 214px; padding-top: 12px; padding-left: 25px; 
float:right;
margin-right:50px;}

.im1 { height: 200px; width: 200px; }

J'ai fait toutes les soluces à ma connaissances pas moyen, Rrrr pourquoi tant de navigateur, pour quand un universel !

Reédit !!

Oulà j'y crois pas, merci pour le travail accomplit, je cherche un collaborateur pour mon site, si ça t'intéresse, il y a pas de problème.

Je vais voir la css, ce que tu as corrigé, pour apprendre.

Je ne sais pas quoi dire, merciiii beaucoup !!

ps: pour ce que je te propose on peut en parler en mp ou sur msn.
Modifié par kouiny (19 Nov 2006 - 01:18)

Re ,

En fait je crois que tu cherche a tout faire d'un coup.

Une methode , parmis d'autres ce serait de commencer a faire que la partie html de ta page , avec un minimum de balise et de zone .

d'abord un conteneur principal

<div id="page">

</div><!-- fin #page -->

avec un commentaire pour reperer la balise fermante.

ensuite par exemples

<h1>titre</h1>

comme titre de page (c'est une balise block au même titre qu'un div , alors pas besoin forcement de l'encadrer dans un div .

pour un menu , idem pour le div qui n'est peut-etre pas utile , <ul> suffit

<ul id="menu1>
 <li> ..liens
....</li>
</ul> <!-- fin menu1 -->

et les differentes zones:

<div id="division1">
<h2></h2>
<p></p>
...</div><!-- fin #division1 -->

etc ..

Une fois que tu as structuré ta page et mis le contenu il est temps de penser a la mise en forme et de pas commencer a styler la fin du dernier block.

applique des bordures ou des couleurs differentes a chaque zone , pour commencer a les voir et placer sur la page.

et la commence les test entre chaques navigateurs.Si besoin ajouter des balises pour regrouper differents contenu ou les separer et consulter les tutos disponibles sur le web et presentant des similtudes ou techniques appropriés aux resultats que tu recherche ,(oui , ça c'est faile a dire).

Une fois que le "gabarits commence a tenir la route , il est temps d'ajouter les fonds et images graphiques et de rendre l'ensemble homogene d'un navigateur a l'autre.

Arrivé a ce stade , il suffit de reprendre les elements les uns aprés les autres et fignoler leurs mise en formes.
(ne pas oublié de commenté le css et de mettre entre des balises commentaires les regles tester qui semblent ne servir a rien avant de les virer totalement.).

des qu'un probleme survient , il est preferable de le regler avant de passer a autre chose , l'ensemble des regles css interagissent , alors quelques erreurs ou mauvais choix au depart ne vont que multiplier les "deboires".

Ne pas oublié de tester en redimensionnant la fenetres et les tailles d'affichages , histoires de ne pas se rendre compte a la fin que la page ne peut-etre vu correctement que sur ton pc et ta resolution du moment.

bon , ce ne sont que quelques conseils , et les methodes a mettre en oeuvre evoluent avec l'habitude .

++

gcyrillus je t'ai envoyé un mp et mon adresse msn, je te vois pas connecté.
Modifié par kouiny (19 Nov 2006 - 23:18)