Différence d'affichage entre FF et IE

Bonjour à tous,
J'ai un photoblog (dont alsacreations avait d'ailleurs parlé dans l'article Partager ses photos sur le web ) que je désire migrer dans un template wordpress, ce sera plus facile pour moi de le faire évoluer sans avoir à demander de l'aide à quelqu'un qui s'y connait en php. Le site en travaux est ici.
J'ai modifié le thème pour qu'il soit adapté à mes goûts, il fonctionne super bien dans FF et Safari (je travaille avec un mac), j'ai demandé à un ami de vérifier dans IE (PC), et là carnage. Je me doutais qu'il y aurait quelques bugs, mais pas à ce point là. Je suis vraiment dépité.
En plus je n'ai pas de PC sous la main et ne peux donc pas vraiment faire grand chose pour arranger ça.
Est-ce que l'un d'entre vous peut regarder et me dire si c'est si grave que ça. Si je laisse tomber et continue de me concentrer sur mes photos .
Merci d'avance pour votre aide.
Modifié par sylvainman (05 Dec 2006 - 22:18)

J'oubliais, ma feuille de style est en chantier, car je travaille dessus.
C'est donc normal qu'il y ait plein de trucs commentés et que le "footer" s'appelle "header". Je mettrais tout en place et propre une fois fini.

Bonjour,

Ben, entre firefox et IE6 on ne peux pas dire que ce soit la joie, impossible de savoir à quoi doit ressembler ton design ... originel.
C'est pas mal la pagaille.

N'ayant pas de mac sous la main, il faudrait peut être nous fournir un screen de ce que tu attends ...

C'est vrai c'est sans doute la meilleure solution.
Voici donc deux captures telles que je les ai dans FF mac et Safari. C'est également à ça que ça devrait ressembler (j'étais en train de plancher pour que le nom du site et la barre de navigation soient collés au bas de la page).
Première capture quand on arrive sur la page d'accueil :

Deuxième capture quand on a cliqué sur le titre de la photo et sur le nombre de commentaires :

Modifié par sylvainman (05 Dec 2006 - 23:05)

Bonjour,

Hé bien, je viens de regarder sur FF pc et IE 6... il n'y a pas grand chose de différent comparé à tes captures.
Simplement, dans le descriptif de la photo, tout est en majuscules avec des barres verticales | en fin de ligne. Sans doute un petit réglage à faire mais ça n'a pas l'air méchant.
Voilà pour ce que j'ai vu...

M.

Re,

@Melkior

On ne dois pas avoir la même version d'IE6 alors ...
A vérifier

Merci les gars pour votre rapidité.
Je sais ce qui s'est passé. J'avais mis des // devant chaque ligne de ma feuille de style que je n'utilisais pas, mais que je voulais garder pour ne pas avoir à tout rechercher.
Je pense que IE6 ne les supporte pas. Y a-t-il autre chose qu'on peut utiliser à la place ?
Finalement j'aurais pris peur pour rien.
Cela dit si certains peuvent m'aider à résoudre les qq différences entre les deux, ce sera bienvenu.
Merci !

/*bla bla bla bla */

Devrait passer
<edit> très jolies photos, chapeau !! </edit>
Modifié par ghost (05 Dec 2006 - 23:54)

Bonsoir,

la syntaxe // n'est pas valide pour les commentaires en CSS. Il faut utiser /* */.

Si tu avais pris la peine de valider ta feuille de styles, tu le saurais.

<edit>Damned... 14 secondes...</edit>
Modifié par Eldebaran (05 Dec 2006 - 23:54)

Oui, ça va mieux, il y a une chose que je ne saisie pas, tes pages sont en height 100% ?
Sinon, l'architecture serait :
bloc photo
bloc titre
bloc commentaires (overflow: auto si 100% hidden si non)
bloc footer (bas de page si 100%)
bloc logo bloc menu

Si c'est le cas ton code est assez tarabiscoté ...

Oui mes pages sont en height 100% car je veux que mon logo soit toujours collé à mon bas de page. J'ai suivi cette technique mais ça fonctionnait à moitié. J'ai donc tout rétabli comme avant sans tout enlever.
Sinon pour l'architecture, je sais, c'est le bordel car je suis parti d'une feuille existante que j'ai pas mal modifié et les appelations sont restées.
Merci pour les compliments pour les photos.

Re,

Sinon tu fixes html et body à height 100% en position relative
tu places ton conteneur min-height: 100% (pour IE

html>body #conteneur {height: 100%;}

) avec un padding-bottom de la hauteur de ton footer (en %).
Pour éventuellement avoir un bloc scrollable dans ton conteneur, il faut lui conférer overflow: auto;
Puis tu places ton footer (logo+menu) en absolute, bottom: 0;

Le seul truc, c'est de donner aux heights de chaque bloc des valeurs en % dont le total ne dépasse pas 100 !!
Modifié par ghost (06 Dec 2006 - 03:33)

Merci ghost pour ton aide, seulement je ne m'en sors pas.
Mon "footer" ne reste pas collé au bas de la page (par contre il ne passe plus sur les autres éléments).
Voici les éléments de ma feuille de style nous intéressant (bloclogo est mon footer) pour voir si j'ai bien répété les instructions :

html,body, {
height: 100%;
position: relative;
}
#container {
width: 860px;
margin: 0 auto;
font-size: 0.75em;
text-align: left;
overflow: auto;
height: 100%;
min-height: 100%;
position: relative;
padding-bottom: 7%;
}
#bloclogo {
padding-top: 0px;
width: 720px;
height: 7%;
position: absolute;
bottom: 0;
}

À propos, comment calcule-t-on la hauteur de son footer en % ?

Re,

Un truc comme cela

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

		

		<title>test</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

*{margin:0; padding:0}
body, html {
height: 100%;
}

body{
background: #fff;
position: relative;
}

#conteneur {
width:900px;
height: 100%;
margin: auto;
background: #fffe65;
}

html>body #conteneur {
min-height: 100%;
}

#bloc1{
width: 80%;
margin: auto;
height: 25%;
background: #adff9a;	

}

#bloc2{
width: 80%;
margin: auto;
height: 60%;
background: #8efdff;	
overflow: auto;
}

#footer{
height: 15%;
width: 900px;
background: orange;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -450px;
}
</style>
</head>

<body>
<div id="conteneur">

	<div id="bloc1">
	</div> 
	
	<div id="bloc2">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit purus, dignissim a, aliquet sit amet, posuere pretium, eros. Nam felis enim, dictum eu, semper sed, ornare malesuada, est. Proin lorem. Integer auctor commodo justo. Vestibulum elementum sodales felis. Fusce feugiat lobortis tellus. Morbi nonummy lacus sit amet odio. Suspendisse potenti. Vestibulum eu justo tristique massa bibendum consectetuer. Quisque dignissim, sapien ut iaculis mattis, risus neque suscipit dui, vel pharetra risus lacus id dui. Nullam facilisis facilisis velit. Maecenas justo purus, convallis non, tristique a, aliquet a, nisi. In sodales interdum diam. Proin vehicula mi sit amet erat. Duis sed sapien. Cras nonummy magna vitae nisl. Nullam vehicula velit ac nunc. In nonummy. Duis sed sem quis arcu semper congue.
	 <br />
Donec semper, risus ac placerat imperdiet, mi ligula rhoncus nunc, luctus vestibulum libero sapien quis metus. Donec urna. Donec vestibulum lacinia odio. Nullam orci neque, nonummy vitae, congue at, tristique eget, nisl. Maecenas justo enim, dapibus eget, semper in, suscipit nec, est. Quisque ornare felis. Vivamus suscipit, tortor convallis porttitor dignissim, lorem felis consequat est, in vulputate nunc diam vel pede. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin risus pede, euismod porta, sollicitudin quis, pharetra a, urna. Nulla facilisi. Vestibulum vel pede eu turpis consequat elementum. Phasellus sapien libero, convallis vitae, viverra eu, nonummy eu, est. Ut dictum dictum velit.
	 <br />
Sed luctus. Nullam a nunc vitae sapien iaculis sodales. Pellentesque condimentum. Donec laoreet sem ut mauris. Vestibulum hendrerit porta magna. Integer in urna. Etiam hendrerit, turpis interdum faucibus blandit, est mi pretium odio, in tincidunt purus lectus at nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec viverra porta elit. Sed lacinia accumsan risus. Mauris neque. Nullam velit quam, feugiat nec, dapibus ac, pretium pulvinar, mauris. Integer eget metus et nisi egestas ullamcorper. Proin dui. Vivamus aliquam odio et nisi. Curabitur dictum lacus ac sapien. Ut sed justo sit amet dolor ultricies tincidunt.
	</p> 
	</div>	

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

Bon courage

Mais ne dors-tu donc jamais ???
J'essaie les changements dès que j'ai un peu de temps.
Merci encore.

Bonjour,

Si, si je dorts mais quand j'ai un boulot que je n'ai pas envie de terminer, je cherche toutes excuses pour trouver un dérivatif qui soit justifiable comme de tenter de prêter un coup de pouce ...

Pour le merci, c'est peut être un peu prématuré !

a écrit :
Pour le merci, c'est peut être un peu prématuré !

Effectivement tu avais vu juste...
J'ai effectué tous les changements que tu m'as proposé.
Mais le bas de page passe toujours sur les autres éléments de la page quand on réduit la fenêtre ou qu'on clique sur le titre de l'image ou sur les commentaires.
Comme pour les % je ne sais pas quelle valeur leur donner... Surtout pour les parties déroulantes en javascript.