Bugs sous IE6 (bcp) et IE 7 (1)

Bonjour,

Cela fait environ 2 ans que je ne me prends plus la tête chaque jour avec les tests dans les différents navigateurs...
Eh oui, j'ai travaillé dans le print, quel bonheur.

Néanmoins, je présente tjs mon portfolio sur un site web, et j'ai donc refait le mien.
Je l'ai commencé sous MAC et ne l'ai donc testé que sous Firefox dans un premier temps.
Puis je suis passée sous PC, mais j'ai complètement oublié les tests (et oui, en 2 ans, on perd les reflexes.)
Je commence à diffuser l'adresse, quand une bonne âme m'a fait remarqué que sous IE6, c'était un peu bizarre...

Et là, je me demande vraiment si IE6 était aussi "chiant" à mon époque...
Je n'ai pas le souvenir d'avoir eu autant de différences et je n'arrive pas à les résoudre.

Dans IE7, j'ai également un espace plus grand à un endroit que sous Firefox sans aucune raison (pas de padding )....

Donc, si vous êtes une âme généreuse qui sait combattre IE6, je vous propose de regarder ce site : www.josfolio.com sous Firefox d'abord, puis sous IE6..... Puis sous IE7 éventuellement...

Sous IE6, on dirait que toutes mes marges font le double de Firefox, ce qui créé des décalages etc.
Sous IE7, le seul problème est l'espace avant le premier texte du menu, sans raison apparente....

Merci à ceux qui voudront bien se pencher sur mon cas.
C'est que j'ai déjà essayé bcp de choses !
Modifié par johanna33 (13 Sep 2007 - 15:54)

Salut...

essaie de mettre une div GLOBAL = a la div PAGE
je sais que ça regle pas mal de truc sous IE6...

pour le reste IE6 a toujours été aussi mauvais, si je me souviens bien a une epoque il ne géré pas les PNG (je sais pas si la mise a jour a regle le prob)

Pour ce qui est IE7 je ne peux pas t'aider, etant sous MAC j'utilise comme bcp Firefox et Safari

Bonne Chance

Merci pour ta réponse.

Je ne sais pas si j'ai bien compris l'astuce, mais j'ai rajouté un div appelé Global qui englobe "page" et je lui ai mis les mêmes attributs...

Cela n'a rien changé, mais j'ai peut-être pas bien saisi.

Pour le png, oui, c'était vraiment galère...

J'ai fait tout un tas d'inversion de float (right avant le left dans le contenu etc) et du coup, IE6 est pratiquement comme IE7 maintenant.

Reste plus que l'espace supplémentaire au début du menu.

On m'a aussi reporté un bug avec le menu qui ne s'affiche pas dès le début, si vous le rencontrez, merci de le dire

Rebonjour.........

Est-ce que qqn aurait un peu de temps pour me filer un coup de main...

Je galère vraiment pour ce qui est de l'affichage dans IE (6 bcp et 7 un peu) et je sais qu'il doit bien y avoir une raison pour ce décalage dans le menu (espace plus grand en haut) mais j'ai vraiment tout essayé et là je suis prête à abandonner......

Je rappelle le site : www.josfolio.com
Sous FF : normalement parfait (= tel que je le souhaite)
Sous IE6 : espaces anormalement grands partout
Sous IE7 : espace dans le haut du menu

Je me suis acharnée sous l'espace qui est dans le haut du menu.
Si je ne mets qu'un mot simple, il est collé en haut, mais dès que je mets un "display:block", il passe plus bas.
Enfin je crois.

Bonsoir Johanna,
tu es en effet confronté à d'épineux problèmes d'espaces non significatifs (quelques explications, voir aussi ici)
dus à la présence de span et des problèmes de fusion des marges plus classiques mais souvent inattendus (> margin-top:5px de tes LI)

EDIT : Pour info, une fois les image désactivées, beaucoup de contenus (dont les items de menu) ne sont plus accessibles et ces images insérées via background CSS ne seront pas référencées puisqu'elles ne peuvent contenir d'attribut alt.
Je dis pour info car la consultation d'un site traitant d'image sans les images n'a aucun sens et que par conséquent leur accessibilité n'est pas un critère primordial (hors critères de référencement).
Modifié par Hermann (10 Sep 2007 - 23:14)

Merciiiiiiiiiiiiiiii !!

J'avais lu quelque part que les images de liens devaient être dans le code...
Mais je suppose que je vais avoir des soucis pour mettre une image particulière sur les pages courantes... (Lien actif...)

Je vais donc me pencher sur l'accessibilité.

Mais dans tous les cas, tes liens sont supers intéressants, je ne connaissais pas ces bugs ! Je vais me pencher dessus également pour tenter de résoudre mes problèmes d'affichage.

Mais tout ceci attendra demain

Bonne nuit et encore ... merci !

EDIT : tu as édité ton message pendant que je répondais, et du coup, j'ai l'impression que mon histoire d'images dans le css est moins important
Cela m'arrange, car en fait, question référencement, pour ce site, ce n'est pas grave.
Mais je le saurai pour l'avenir !
Modifié par johanna33 (10 Sep 2007 - 23:20)

Bououhouh...

Je pensais vraiment avoir trouvé la solution avec les liens que tu m'as donné, mais je ne pense pas que mon problème soit lié à ce qui est exposé dedans.
En effet, sur l'exemple, les espaces sont en dessous, alors que moi, il semble être au dessus...

Par contre, j'ai fait d'autres modifs que tu m'avaient conseillées dans l'autre post.

Je remet en lumière mon problème principal : l'espace au dessus du premier bouton de menu, qui ne veut pas disparaître sous IE 6 et 7...

Il ne s'agit pas de whitespace.

Désolé pour les fausses pistes mais le modèle sur lequel j'étais n'était étrangement pas le même que celui en ligne.
Ton problème est peu prés le même que celui lié à une hauteur minimum des div sur IE dépendante de la taille de la police mais ici tu as du contenu donc c'est quand même étrange...
Pour corriger des problème d'espacement superflu, il faut ajouter un
line-height: 0; aux div qui le nécessitent sans oublier de redéfinir plus bas le line-height à sa valeur par default (environ 1.2em):
appliqué à #content, #menu et #side.

#menu {
	margin-left: 20px;
	text-align: left;
	list-style: none;
	background:#5F4532;
	color:#FFFFFF;
	width:250px;
	line-height: 0;
}

#menu ul {
	margin-right:10px;
	
}

#menu li {
	display: inline;
	margin: 0;
	padding: 0;
	width: 240px;
	list-style: none;

}

#menu a {
	display: block;
	height: 36px;
	margin-top: 5px;
	padding: 0px;
	text-decoration: none;
}

.hidden {
	position:absolute;
	clip:rect(1px, 1px, 1px, 1px);
	clip:rect(1px 1px 1px 1px);
}


/*------------------------------------------------------------------*/

#submenu {
	height:28px;
	float:right;
}

#submenu a {
	display:block;
	height:28px;
	float:left;
	margin-right:40px;
}

#submenu li, #submenu ul {
	list-style-type:none;
	margin:0px;
	padding:0px;
}

/*------------------------------------------------------------------*/
#content{
	line-height: 0;
	padding-top:10px;

}

#side {
	margin-left:20px;
	width:250px;
	line-height: 0;
}

#side1 {
	background-color:#00A0C6;
	color:#FFFFFF;
	padding:10px;
	line-height: 1.2em;
}

#side1 a:link, #side1 a:visited {
	color:white;
}

#side2 {
	background-color:#ffffff;
	margin-top:10px;
	padding:10px;
	line-height: 1.2em;
}

Modifié par Hermann (13 Sep 2007 - 17:41)

Wooowwww !!!

ça marche !!!

Merci !!! Merci merci !!!

Si je peux faire qqch pour toi !! N'hésite pas !
Je commençais franchement à désespérer et là, c'est presque incroyable, mais les 3 navigateurs (FF, IE 6 et 7) sont pareils.

Hermann assistance est à votre service

johanna33 a écrit :
Si je peux faire qqch pour toi !! N'hésite pas !
Je commençais franchement à désespérer et là, c'est presque incroyable, mais les 3 navigateurs (FF, IE 6 et 7) sont pareils.

Ok merci.
Modifié par Hermann (13 Sep 2007 - 20:42)