Forums des Zéros

4 janvier 2010 à 13:44:04

Bonjour à tous et une bonne année remplie de codes HTML/CSS qui marchent sans poser de questions !

Je commence à pas mal m'en sortir en web même si je suis principalement axé pré-presse.
Je me suis donc créé un site perso qui n'est autre que ma carte de visite professionnelle. Il faut donc qu'il marche dans toutes les circonstances, sur n'importe quel navigateur !

J'ai testé mon code HTML et CSS. Les deux ont été approuvés W3C.

pour l'HTML:
http://validator.w3.org/check?uri=http%3A%2F%2Fusers.skynet.be%2Fbk380762%2Findex2.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654

pour le CSS:
http://jigsaw.w3.org/css-validator/val [...] ing=1&lang=fr

Pourtant, sous IE6 et IE7... voici ce que ça donne. Vous avez les codes dans les deux liens précédents.

Déjà, une chose m'inquiète: pourquoi certaines de mes images de mon design ne sont pas uploadées?
Ensuite, pourquoi est-ce que tout semble "décalé"?
Une petite idée?

Un grand merci d'avance !

EDIT:
Attention, je travaille sur index2.html et design2.css pour ne pas déranger l'index normal de mon site. Si vous voulez voir la version la plus "à jour" et "correcte", il faut taper dans le navigateur http://www.nag-art.net/index2.html !

4 janvier 2010 à 14:15:50

Salut, au vu du rendu ce sont des problèmes de CSS. Tu devrais t'intéresser aux hacks CSS pour IE.
Préfère utiliser les commentaires conditionnels <!--[if IE]> ...

4 janvier 2010 à 17:12:01

IE n'accepte pas les mêmes propriétés CSS que les autres explorateurs?
Qu'est-ce que je dois "convertir" ? Il y a des balises, codes, fonctions ou autre qui ne passent pas sous IE?

En tout cas, merci de ta réponse. Je regarderai de ce côté-là!

4 janvier 2010 à 17:17:15

Ce n'est pas que IE n'a pas les mêmes propriétés CSS que les autres, c'est juste qu'il les interprète différemment. Et c'est un vrai cauchemar, si bien qu'une bonne partie des webmasters font une feuille de style spécial IE.
Fais tes tests avec différentes valeurs

4 janvier 2010 à 19:30:43

Est-ce que tu as une solution, à part installer Windows en BootCamp, pour tester mon site interactivement sur mon Mac? J'ai pas de PC à côté pour tester sous IE.

4 janvier 2010 à 20:27:56

Excuse-moi pour le retard, j'ai eu du mal à héberger l'image

Bon pour moi sous IE7 tout marche bien, c'est bien placé.

Je n'ai jamais travaillé sous Mac, donc je ne peux pas te dire quel programme prendre. Va sur Google et tu trouveras sûrement ce que tu cherches

5 janvier 2010 à 9:08:01

Tout marche ? Les menus déroulants, le hover ?
Bizarre. Tu saurais me donner la version précise de ton navigateur?

Merci d'avoir screenshoté pour moi en tout cas !

5 janvier 2010 à 9:44:57

Hello

Effectivement sous IE7 ça fonctionne, même le menu.

Pour IE6... sans avoir regardé le code en détail, ça sent le modèle de boîte foireux... voir ici : http://www.alsacreations.com/article/l [...] u-quirks.html

et ici : http://www.alsacreations.com/article/l [...] explorer.html

5 janvier 2010 à 12:57:43

Hello Mistike !

Donc mon site est compatible IE7, IE8, Opéra, FF, Safari. C'est déjà une bonne chose.

Reste IE6 donc. Je vais faire un tour sur tes liens

J'dois dire que je ne sais pas ce que c'est un modèle de boîte ! C'est le moment de se renseigner !

Merci de ton aide !

Chaft

5 janvier 2010 à 13:03:06

je te conseille quand meme de regarder le nombre de visiteur sous IE6 a moins que tu n'est pas encore lancé le site sache qu'il y en a de moins en moins (sauf cas particulier)

Exemple: entreprise qui utilise des outils compatible IE6 uniquement

5 janvier 2010 à 13:10:46

Hello Chaft !

Comme tu dis, pas mal d'entreprises sont encore sous IE6 ! Et justement, en tant qu'infographiste, je recherche des stages un peu partout. Ça arrive souvent que ça soit la secrétaire qui regarde en premier mon site avant de le communiquer aux graphistes de l'entreprise. Il faut donc que mon site soit compatible avec un maximum de choses pour toucher un maximum de monde et être un maximum professionnel

Je ferai tout ce qu'il faut pour que mon site soit compatible IE6.

Merci de ta remarque en tout cas

5 janvier 2010 à 13:31:15

Regarde aussi du côté des bugs de marges doublées. Désolée je ne peux pas faire de tests depuis là où je suis aujourd'hui...

Je pense que tu n'as qu'un problème et qu'il se situe quelque part au niveau de ton menu et de ses ul. L'ul principal est répété deux fois, ses li sont trop bas. Et du coup, ton image de droite passe en dessous, mais elle est bien là.

5 janvier 2010 à 13:33:57

Juste une question (puisque je ne peux pas regarder ton code de là où je suis, même combat

) : utilises-tu la pseudo-classe :hover sur autre chose qu'un lien pour ton menu ?

5 janvier 2010 à 13:46:23

Mistike:
Je n'ai pas l'impression d'avoir tapé 2x mon UL principal. Ceci dit, tant que je ne suis pas sûr, rien ne vaut la remise en question.

Voici le bout de code qui se trouve dans la div du menu principal.

<div class="menu">
<ul>
<li><a href="index.html" target="_self" >Accueil</a>
</li>
<li><a href="" target="_self" >Nag'ar(t)?</a>
<ul>
<li><a href="bioCV.html#bio" target="_self">Bio</a></li>
<li><a href="bioCV.html#CV" target="_self">CV</a></li>
</ul>
</li>
<li><a href="" target="_self" >Portfolio !</a>
<ul>
<li><a href="affiches.html" target="_self">Affiches</a></li>
<li><a href="dessins.html" target="_self">Dessins</a></li>
<li><a href="illustrations.html" target="_self">Illustrations</a></li>
<li><a href="layout.html" target="_self">Layout</a></li>
<li><a href="logos.html" target="_self">Logos</a></li>
<li><a href="packagings.html" target="_self">Packagings</a></li>
<li><a href="photos.html" target="_self">Photos</a></li>
<li><a href="web.html" target="_self">Web</a></li>
<li><a href="misc.html" target="_self">Misc</a></li>
</ul>
</li>
<li><a href="contact.html" target="_self" >Contact</a>
</li>
</ul>
</div>

Et voici le CSS de mon menu.

.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font-family: "Helvetica", "Times New Roman", Times, serif;
	font-size: 1em;
	font-weight: normal;
	
	}
.menu ul{ /* design barre menu principal*/
	height:44px;
	width: 512px;
	list-style:none;
	margin-top:60px;
	padding:0;
	}
	.menu li{
		float:left;
		padding:0px;
		width: 128px;
		}
	.menu li a{ /*menu principal cases*/
		/*background:white url("images/seperator.gif") bottom right no-repeat;*/
		color:#666666; /*couleur texte case menu principal*/
		/*text-align: center;*/
		display:block;
		font-weight:normal;
		line-height:35px;
		margin:0px;
		padding:0px 25px; /*largeur case menu principal */
		text-align: center;
		text-decoration:none;
		}
		.menu li a:hover { /* design survol cases 2 menus */
			/*background: #2580a2 url("images/hover.gif") bottom center no-repeat;*/
			color:#666666;
			font-weight: bold;
			text-decoration: none;
			}
			
		.menu ul li:hover a{ /* design survol cases menu principal et cases menu déroulant non survolées, juste affichées*/
			/*background: #2580a2 url("images/hover.gif") bottom center no-repeat;*/
			color:#666666;
			text-decoration: none;
			}
		
	.menu li ul{ /* design cases menu déroulant non survolées, juste affichées*/
		background: transparent url("fondTR.png") repeat;
		display:none;
		height:auto;
		padding-top:10px;
		margin:0px;
		border:0px;
		position:absolute;
		width:128px; /* largeur case menu déroulant*/
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		
		}
	.menu li li {
		/*background:url('images/sub_sep.gif') bottom left no-repeat;*/
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:128px; /* largeur case surlignage menu déroulant */
		}
	.menu li:hover li a{
		background:none;
		
		}
	.menu li ul a{ /*textes menu déroulant (car align-center dans menu principal*/
		display:block;
		height:35px;
		font-size:1em;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:left;
		text-indent: 23px;
		}
		.menu li ul a:hover, .menu li ul li:hover a{ /*design survol des cases du sous menu*/
			/*background:#2580a2 url('images/hover_sub.gif') center left no-repeat;*/
			border:0px;
			color:#666666;
			text-decoration:none;
			}
	.menu p{
		clear:left;
		}

Je ferai des tests de mon côté ce soir.

Merci de votre aide!

PS: Polok, tu peux voir que j'ai effectivement fait des hover sur d'autres éléments tels des UL ou LI.

5 janvier 2010 à 13:53:00

Citation : zorkzyd

Mistike:
Je n'ai pas l'impression d'avoir tapé 2x mon UL principal. Ceci dit, tant que je ne suis pas sûr, rien ne vaut la remise en question.

Non ce n'est pas ce que je voulais dire. Ton UL principal fait une certaine taille. Ce qu'il y a dedans ne rentre pas, et donc IE le fait se répéter verticalement (ou il l'affiche plus grand, comme tu veux). Tu vas me dire, pourquoi ce qu'il y a dedans ne rentre pas ? Ben... parce que c'est IE6 ;-)

C'est pour ça que j'ai d'abord pensé à un passage en mode Quirks et à l'utilisation du vieux box-model d'IE5.5 (voir mon lien précédent). Mais en regardant à nouveau ton code, il ne me semble pas qu'il y ait une erreur pouvant déclencher ce mode dans IE6... mais comme je ne peux pas tester en local...

Et donc, la seconde piste (même s'il ne faut pas éliminer la première comme ça), ce serait le "bug" du HasLayout (mon second lien), ou celui du "double margin" ou un de ses petits copains du même genre...

5 janvier 2010 à 13:58:22

Donc, en gros, mon menu ne rentre pas à cause des paddings au sein même de mes UL? Vu que IE6 compte les paddings en plus de la taille de l'UL normal, ce qui fait que tout sort.

Ce qui rejoint ce que tu dis: problème de HasLayout.

ThePooh

5 janvier 2010 à 14:09:55

Pour ton problème tu vas être obligé de créer une règle spéciale pour tes padding très probablement.

Sache juste que de tout temps IE 6 a toujours posé des problèmes de compatibilité.

Aujourd'hui il doit y avoir 10 % des utilisateurs qui l'utilisent...

Arrêtons d'assurer la compatibilité (marre des trucs qui brident l'inspiration), laissons le mourir tranquille

Projets : Blog Neetcafe.com (En attendant le site) - CakeResque - ResqueBoard . CakePHP & NoSQL enthusiast

5 janvier 2010 à 14:23:32

Citation : ThePooh

Arrêtons d'assurer la compatibilité (marre des trucs qui brident l'inspiration), laissons le mourir tranquille

Ca bride pas l'inspiration, ça emm... les développeurs en leur faisant perdre du temps, nuance

Et zorkyd a très bien expliqué la raison pour laquelle il souhaite que son site site soit compatible IE6.

ThePooh

5 janvier 2010 à 14:46:04

Oui oui je sais je suis juste un partisan du mouvement IE 6 no more

Projets : Blog Neetcafe.com (En attendant le site) - CakeResque - ResqueBoard . CakePHP & NoSQL enthusiast

5 janvier 2010 à 15:05:51

ThePooh, quand tu dis de créer une règle spéciale, c'est créer une autre feuille de style CSS uniquement pour IE avec l'aide de la balise "IF IE"? Ou tu as une autre solution plus facile.

Je suis parfaitement d'accord avec vous, IE6 plombe. Mais faut aussi savoir respecter ses ancêtres

5 janvier 2010 à 15:39:15

Non, pas besoin de fichier CSS en plus, suffit juste de faire :

<!--[if IE6]>
	<style>
		/*Ton code CSS ici*/
	</style>
<![endif]-->

Et IE6 posera un problème de compatibilité évident, vu qu'il n'accepte pas que l'on utilise la pseudo-classe :hover sur autre chose qu'un lien

5 janvier 2010 à 16:02:57

Citation : Polok

Non, pas besoin de fichier CSS en plus, suffit juste de faire :

Et IE6 posera un problème de compatibilité évident, vu qu'il n'accepte pas que l'on utilise la pseudo-classe :hover sur autre chose qu'un lien

Oui enfin, s'il y a plusieurs pages, c'est quand même mieux de mettre ça dans un fichier à part, comme l'autre. Ca évite de se répéter ;-)

5 janvier 2010 à 16:58:17

Rha. Faudra créer un autre menu rien que pour IE6 alors. Un bête pas bô.

5 janvier 2010 à 17:49:38

Mais non, il "suffit" de trouver les paramètres qui déforment ton menu, et de les restyler dans un css à part déclaré comme ça :

<link href="design2.css" rel="stylesheet" type="text/css" />
<!--[if IE6]>
 <link href="ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

5 janvier 2010 à 19:40:55

Mais... Si on me dit que les hover ne marchent que pour des liens... Mon menu n'a plus vraiment raison d'être.
Je vais toujours tenter

On verra bien.

EDIT:

J'ai vite fait un essai tout bête: supprimer tout mon menu, et le tester avec browsershot sous IE7 et 6. Déjà là, ça coince !

Sur IE7:

Sur IE6:

Je me suis donc dit que ça ne pouvait être qu'un problème de <div>. J'ai imprimé mon code et j'ai barré successivement les div. Aucune balise n'est en trop ! Je suis un peu désemparé...

mon code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Nag Art</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Bienvenue sur le portfolio de Davy Delbecq !"/>
  <meta name="keywords" content="nagar, Nagar, Nag-art, nag-art, nag, Nag, Nagart, nagart, Nag'Art, Nag'art, nag'art, infographiste, Infographiste, graphiste, Graphiste, illustation, Illustration, design, Design, photo, Photo, davy delbecq, Davy Delbecq, Davy, Delbecq"/>
  <meta name="author" content="Nagar"/>
  <meta name="generator" content="Nagar"/>
  <meta name="language" content="fr-BE"/>
  <meta name="robots" content="all"/>
 <link rel="icon" type="image/png" href="favicon.png" />
 <link href="design2.css" rel="stylesheet" type="text/css" />

  	
	<script type="text/javascript" src="00design/lightbox2.04/js/prototype.js"></script>
	<script type="text/javascript" src="00design/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
	<script type="text/javascript" src="00design/lightbox2.04/js/lightbox.js"></script>
    
    <link rel="stylesheet" href="00design/lightbox2.04/css/lightbox.css" type="text/css" media="screen" />
    
    <style media="all" type="text/css">@import "menu/menu_style.css";</style>
</head>

<body>
<div id="bord_gauche"></div>

<div id="centre">

    <div id="head">

    
       <div id="header1"></div>
        
       <div id="header2">
        
          <div id="header2_1"></div>
            
          <div id="header2_2"></div>
            
          <div id="header2_3"></div>
        
       </div>
        
       <div id="header3"></div>   
    
    </div>
	
    
    <div id="body"><center><br /><br /><br /><br /><br />
<font size="+2">Bienvenue sur Nag-art !</font><br /><br />
Toutes mes plus belles créations regroupées en un seul site, c'est-y pas beau?<br /><br />
Bonne visite !<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
Dernière mise à jour: 27 décembre 2009.<br /><br />
Toutes les images affichées sur ce site sont la propriété exclusive de Nagar.<br /> Il est interdit de les copier, les réutiliser ou se les approprier.<br /><br />
© Nag-art / © Nagar

<br /><br /><br /><br /><br /><br />
Nag-art.net est optimisé pour Firefox, Opera, Safari et IE 8. Les versions inférieures d'Internet Explorer étant devenues obsolètes.</center>


    </div>

    <div id="footer"></div>
    
</div>

<div id="bord_droit"></div>

</body>
</html>

10 janvier 2010 à 12:02:48

Pour ceux que ça intéresse, j'ai compris pourquoi mon site n'était pas compatible IE7:
- mes menus étaient à la base codés à partir d'un code de ce site http://www.positioniseverything.net/css-dropdowns.html
Même s'ils le prétendent, la compatibilité IE7 n'est pas assurée.
J'ai tout recodé à partir de ce site-ci http://www.cssmenumaker.com/
(qui précise quand même:

My menu wont work in IE6?

We have officially decided to drop support for IE6. Less and Less people are using this browser everyday and the amount of work to get websites working properly in this browser is enormous. Most of our single level menus will work in IE6, but our drop down menus will not.)

... et bien sur, j'ai pris un dropdown

Je vais devoir repenser mon site pour IE6, nouvelle feuille de style et tout le bazar.

10 janvier 2010 à 13:44:00

Il y a peut-être plus simple, en fonction de la façon dont ton menu est fait.

Tu peux te contenter d'un menu déroulant qui ne se déroule pas, mais dont le premier niveau (celui qui est visible d'office) est cliquable, et renvoie sur la bonne page. C'est nickel à plusieurs conditions :

1) tu as une page de niveau "1" pour chaque section
2) dans cette page d'accueil de section, ton sous-menu apparait "normalement" quelque part
2) ton menu se déroule normalement par hover et non pas par clic

Tout ça devrait d'ailleurs être fait pour le cas où le javascript est désactivé si c'est un menu JS.

D'ailleurs, beaucoup de menus déroulants fonctionnent sous IE6... si ça se trouve c'est facile à corriger dans ton cas... il fonctionne comment ton menu ?

10 janvier 2010 à 14:11:31

J'aime bien l'idée du menu déroulant car il est vraiment plus agréable. De plus, je n'ai pas de page niveau 1 pour chaque section.

Mon menu est fait à partir d'ul et de li. Ce qui ne passe pas bien sur IE6 du fait qu'il n'accepte des hover que sur des balises de type a.

J'ai trouvé sur le net un menu apparemment compatible IE6:
http://bormat2.free.fr/

Je suis en train de l'expérimenter mais je le trouve sacrément plus compliqué que celui que j'ai mis pour l'instant.

Si tu veux avoir mon code du menu: http://www.nag-art.net/menu/menu_style.css

10 janvier 2010 à 14:27:53

J'ai testé super rapidement avec webdevelopper, si tu remplaces tous tes li:hover par un hover sur le a qui va avec, ça fonctionne toujours sous FF. Donc ça devrait aussi fonctionner sous les autres y compris IE6.

Essaye, et si ça créé d'autres problèmes ailleurs, refais le dans une feuille spéciale IE6.

.oO(comme quoi des fois on refuse de faire un truc compatible IE6 juste par principe, alors que ça ne prend pas plus de 5 minutes)