Discussion :

[sheira]

Bonjour,

J'ai un pb de compatibilité de mon code sous IE.
Voici le lien du : Site en question.
Les pages : "Nos tarifs" et "Proposer une mission" dans le menu à gauche ne passent pas sous IE alors que ça fonctionne bien sous firefox et safari.
Toute aide est la bienvenue...je comprends pas tous ces décalages.

Merci d'avance

[c_s_s]

Bonjour,

Quelle version de IE ?
Avec une résolution particulière ?

[Air P-E]

Tu parles probablement de IE 6 ? Je viens de faire le test sous ce navigateur (je me demande pourquoi il est encore utilisé...)

Pour la page "nos tarifs" comment c'est fait ? Tu as deux div ? Une contenant la partie "simulation" et l'autre contenant la partie "plus de renseignements" ? Ou comment c'est fait ? Ne pourrais-tu mettre un petit peu de code ou au moins l'architecture...

Après si ton bug n'est que sous ie6, il y a un moment où il faut se dire qu'il faut arrêter de vouloir adapter aux versions antérieures à ie7, sinon on n'avancera jamais dans les nouvelles techno et applications !
IE 6 est surtout utilisé en entreprise, pour des raisons d'outils déjà mis en place qui fonctionnent, donc on ne veut rien modifier, etc...
Mais ton site en l'occurrence, je pense qu'il sera surtout visualiser par des particuliers... Plus beaucoup de monde est encore sous ie6 de nos jours...
Moi je serais toi je ne regarderais même pas le résultat sous IE6 (sauf pour rigoler un bon coup on se disant "aaah... Quelle belle daube !" )

[sheira]

Mdrrr Air P-E!

J'en ris aujoud'hui j'espère ne pas en pleurer plus tard...
Malheureusement ça ne passe pas non plus sous IE 8 avec une résolution 1440x900.

Pour ce qui est du code, y a plusieurs fichiers, est-ce que je pourrai vous les transmettre par mail?

[Air P-E]

Effectivement sous ie8, c'est un tantinet ballot si ça ne passe pas !

Cependant j'ai testé chez moi avec ie8 en résolution 1440x900 et ça passe, je ne vois aucun problème d'affichage particulier !

Par contre les problèmes surviennent quand tu resizes la fenêtre du naviateur, mais que ce soit sous ie8 ou firefox, tes divs s'entrelaçent... (Juste à noter que sous ie8, l'image de l'entreprise à droite pour l'onglet "proposer une mission" ne s'affiche pas et le panel contenant le formulaire au milieu s'allonge)

Pour le problème des divs qui s'entrelaçent, c'est sûrement parce que tu n'as pas définit de min-heigth et min-width (plus important) sur la/les divs en question !

j'allais te proposer d'utiliser le "reset.css" mais je vois que tu l'as déjà mis !

Le formulaire qui s'allonge vers le bas j'avais déjà eu ce problème, je l'avais réglé (il me semble) avec un hr et dans le css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
hr
{
    clear: both;
    visibility: hidden;
}

Et pour l'image qui disparaît, j'aurais tendance à penser que lors du resize, l'image est trop grande pour rester dans l'espace disponible... Pareil un min-width fera l'affaire je pense, au pire l'image sera un peu coupé...

Par contre j'ai regardé un peu la source, et je trouve qu'il y a énooooooormément de div ! En tout cas beaucoup plus que je n'en mettrais ! Tu es sûr d'avoir besoin de toute ces div ? Surtout que tu les imbriques comme ça sans avoir forcément de contenu (à part une autre div).

Pour les sources, je ne pense pas que tu sois censé les donner en entière ! et puis je n'accepte pas les mails perso, sinon le forum ne sert plus à rien !
Je voulais pas que tu nous mettes toutes les sources mais juste là où ça pose problème : code html des divs en questions et le css qui va avec.

[sheira]

Tout d'abord merci d'avoir pris sur votre temps pour me répondre.
Je n'ai pas vu de soucis d'affichage lorsque je réduis la page de mon navigateur sous ie8 et Firefox 3.6.10.

Voici le code de la partie "centrale de ma page" (les deux images) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
    <div id="col1n2" class="maxheight" style="float:left;width:74.5%;overflow-y:hidden";>
    <!-- [start Col2-->
    <div id="candArea" class="col_2 maxheight withbgphoto"><?php
      $this->user = Zend_Auth::getInstance()->getIdentity();
      if (@$this->user->role == 'candidat') {?>
        <div onclick="window.location = 'candidats/account/dashboard';" class="indent maxheight"><?php
      }else{?>
        <div onclick="pushDivContent2div('loginCand','recruArea','no','loginCandidat');" class="indent maxheight"><?php
      }?>
        <div class="block1 maxheight">
          <div class="maxheight bgphoto">
          <img class="maxheight" style="-ms-interpolation-mode: bicubic;" src="<?= DEFAULT_SKIN_PATH;?>images/candidat2.jpg" />
          </div>
          <div style="position:relative">
            <div class="inner withbgphoto" id="contentCand">
              <div class="title_block">
                <a href="<?= $this->baseUrl();?>/candidats/auth/login"><h2>Candidat</h2></a>
                <div class="clear"></div>
              </div>
              <div class="inner1">
                <p>Optimisez vos chances de trouver l'<strong><a href="<? $this->baseUrl();?>index/recherche?cr=poste">emploi</a></strong> dont vous avez besoin. Avec <?=SITE_DOMAIN;?>, vous rentrez en contact avec des centaines de recruteurs sur tout le territoire et dans tous les secteurs.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- [end] Col2-->
    <!-- [start] Col3-->
    <div id ="recruArea" class="col_3 maxheight withbgphoto"><?php
      $this->user = Zend_Auth::getInstance()->getIdentity();
      if (@$this->user->role == 'client' || @$this->user->role == 'admin' || @$this->user->role == 'agence') {
                          switch (@$this->user->role) {
                            case 'agence':
                              $redir = 'manager/clients/dashboard/ag_id'.$this->user->nodes_access;
                              break;
                            case 'client':
                              $redir = 'manager/clients/dashboard/cli_id/'.$this->user->nodes_access;
                              break;
                            case 'admin':
                              $redir = 'manager/index/dashboard';
                          }?>
        <div onclick="window.location = '<?= $redir;?>';" class="indent maxheight"><?php
      }else{?>
        <div class="indent maxheight" onclick="pushDivContent2div('loginRecru','candArea','no','login')" style="cursor: pointer"><?php
      }?>
        <div class="block1 maxheight">
          <div class="maxheight bgphoto">
            <img class="maxheight" style="-ms-interpolation-mode: bicubic;" src="<?= DEFAULT_SKIN_PATH;?>images/recruteur2.jpg" />
          </div>
            <div style="position:relative">
              <div class="inner" id="contentRecr">
                <div class="title_block">
                  <a href="<?= $this->baseUrl();?>/recruteurs"><h2>E.T.T.</h2></a>
                <div class="clear"></div>
              </div>
              <div class="inner1">
                <p>Maximisez vos chances de trouver le meilleur candidat pour vos clients. Avec <?=SITE_DOMAIN;?>, des milliers de candidats vous proposent leurs services et consultent chaque jour vos <strong><a href="<? $this->baseUrl();?>index/recherche?cr=poste">offres</a></strong>.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- [end] Col 3-->
  </div>
  <div class="clear"></div>  
</div>

J'utilise le javascript pour modifier le contenu suivant le clic en appelant la fonction pushDivContent2div.

Voici maintenant le script de ma page "Proposer une mission:

1ère partie (le formulaire):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div style="padding: 1em;position: relative; line-height: 2em;">
  <h1 style="text-align: center">Appel d'offres</h1><?php
if ($this->message) {
  print $this->message;
}else{?>
  <div style="redac">Pour passer un appel d'offre, remplissez le formulaire suivant. Apr&egrave;s validation, vous recevrez un mail contenant un lien. Ce n'est que lorsque vous l'aurez cliquer que votre appel d'offre sera actif.</div>
  <form id="callForm" method="post" action="<?php echo $this->baseUrl(); ?>/entreprise/call/index" class="formBase">
  <h3>Mission</h3>
  <label for="intitule">Intitul&eacute; de mission</label>: <?php print $this->formText('intitule');?><br />
  <label for="periode">P&eacute;riode</label>: <?php print $this->formText('periode');?><br />
  <label for="regionId">R&eacute;gion</label>: 
  <select name="regionId" id="regionId">
    <option value="">-- S&eacute;lectionnez --</option><?php
    foreach($this->regions as $k => $v) {?>
      <option value="<?= $k;?>"><?= $v;?></option><?php
    }?>
  </select><br />
  <label for="secteurId">Secteur d'activit&eacute;</label>: 
  <select name="secteurId" id="secteurId">
    <option value="">-- S&eacute;lectionnez --</option><?php
    foreach($this->secteurs as $k => $v) {?>
      <option value="<?= $k;?>"><?= $v;?></option><?php
    }?>
  </select><br />
  <label for="desc">Descriptif</label>: <?php print $this->formTextarea('desc');?><br />
 
  <h3 style="padding-top: 100px">Contact</h3>
  <label for="societe">Soci&eacute;t&eacute;</label>: <?php print $this->formText('societe');?><br />
  <label for="nom">Votre nom</label>: <?php print $this->formText('nom');?><br />
  <label for="mail">Email</label>: <?php print $this->formText('mail');?><br>
  <label for="tel">T&eacute;l&eacute;phone</label>: <?php print $this->formText('tel','',array('style'=>'width:133px'));?>
  <?php print $this->formSubmit('submit','Ok',array('style'=>'left:273px;width:40px;'));?>
 
  </form><?php
}?>
</div>

et l'image:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id='callpix' class="maxheight" style="display:none;"><div style="height:100%;width:99.6%;background:#cfeffe;overflow:hidden">
  <img src='<?= DEFAULT_SKIN_PATH;?>/images/entreprise.jpg' style='height:100%' class="maxheight"  />
            <div style="position:relative;background:#cfeffe">
            <div class="inner withbgphoto" style="width:100%;">
              <div class="title_block">
                <h2>Entreprise</h2>
                <div class="clear"></div>
              </div>
              <div class="inner1">
                <p style="text-align: center">Lancez un appel d'offre en utilisant le formulaire ci-contre.<br /> Les agences d'int&eacute;rim pourront les consulter dans leur espace d'administration et vous faire leurs propositions.</p>
              </div>
            </div>
          </div>
</div></div>

Pour le css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.page1  .row_1 .col_2 , .page1  .row_1 .col_3, .page1  .row_1 .block1, .page1  .row_1 .block1 .bgphoto{
height: 458px;
 
 
.col_1, .col_2, .col_3, .col_4, .col_5, .column1, .column2, .column3, #search_engine_inputs,  #gosearch {
  display: inline;
 
 
.withbgphoto .inner a {color: #EEE9E0;}
 
.withbgphoto .block1 {
background: transparent;
}
 
.withbgphoto .inner {
bottom:-1px;
left:0;
background: rgba(0,0,0,.5);
color: white;
position: absolute;
width: 100%;
}
 
.withbgphoto .left_bottom_corner {
}
}
}

J'espère que ça pourra vous aider à m'aider...parce que le css c'est pas vraiment ma tasse de thé.

Il y a un phénomène étrange de toute façon quand je clic d'abord sur la page "Nos tarifs" puis que je clic que proposer une mission, celle ci s'affiche correctement.

Merci d'avance

[Air P-E]

Bon deuxième tentative... J'ai eu un bug juste magnifique !

Donc Salut Sheira !
Désolé de ne pas avoir répondu plus tôt ! J'ai beaucoup de taf en ce moment !

Tu as avancé depuis la dernière fois, t'as résolu quelque chose ?

En voyant ton code je me suis dit que j'étais content de ne pas faire du php !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$this->user = Zend_Auth::getInstance()->getIdentity();
      if (@$this->user->role == 'candidat') {?>

Sérieux, la syntaxe, elle est dégueu ! (Attention je dis pas que ce que tu as fait n'est pas bien, je dis que la syntaxe de php est franchement bof...) Après je ne connais que trèèèèèèès peu php, je suis plus orienté java, donc j'y suis pas habitué... Bref !

Dans ton code plusieurs choses m'interpèlent !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="col1n2" class="maxheight" style="float:left;width:74.5%;overflow-y:hidden";>

essaie de bien séparer le HTML du CSS ! Tu vas gagner en lisibilité et en maintenance, c'est indéniable ! Si tu commences à mettre du CSS dans le HTML mais aussi dans le fichier CSS, tu sauras plus ce que tu as mit et où...

Fait plutôt ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div id="col1n2" class="maxheight" >

(dans ton HTML)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
#col1n2 //ou .maxheight, ça dépend ce que tu veux...
{
    float: left;
    width: 74.5%;
    overflow-y: hidden;
}

Comme ça ton code HTML est bien plus lisible et si tu veux savoir comment il doit être agencé, affiché, coloré etc... tu vas jeter un coup d'oeil dans le CSS et tu vois tout d'un coup.

Ensuite pour une architecture comme la tienne, qui est assez conséquente, je te suggère de hiérarchiser ton CSS pour chaque élément, comme tu l'as fait un peu :

par exemple pour définir un texte rouge d'une balise p dans des divs imbriquées :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
#div1 #div2 #div3 p
{
    color: red;
}

Crois moi ça t'évitera souvent des problèmes ! Et tu gagnes en lisibilité aussi, après c'est une question d'habitude !
Mais ceci n'est pas à appliquer sur des style que tu veux commun sur toute la page par exemple la couleur de ton lien, dans ce cas tu mets directement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
a
{
    color: blue;
}

Evites les espaces pour les noms des ids, class, nom de fonction javascript ou php comme tu le fais ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<div onclick="window.location = 'candidats/account/dashboard';" class="indent maxheight">

ton attribue class contient un espace, remplace les espaces par des undescore.
Je ne suis pas sûr que le CSS comprenne quelque chose dans le genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#div_sans_espaces #div avec espaces #div1

Je n'ai jamais essayé ça mais à mon avis ça ne fonctionne pas, il doit prendre l'espace comme si tu spécifiais l'id suivant ! A confirmer

Un dernier truc, je t'en ai déjà parlé. Es-tu sûr d'avoir besoin de toutes tes divs ?
Par exemple, ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div style="position:relative">
            <div class="inner withbgphoto" id="contentCand">
              <div class="title_block">
                <a href="<?= $this->baseUrl();?>/candidats/auth/login"><h2>Candidat</h2></a>
                <div class="clear"></div>
              </div>
              <div class="inner1">
                <p>Optimisez vos chances de trouver l'<strong><a href="<? $this->baseUrl();?>index/recherche?cr=poste">emploi</a></strong> dont vous avez besoin. Avec <?=SITE_DOMAIN;?>, vous rentrez en contact avec des centaines de recruteurs sur tout le territoire et dans tous les secteurs.</p>
              </div>
            </div>
          </div>

A quoi sert la première div ? Elle contient qu'une seule div ! Tu peux définir le position relative (dans le CSS bien sûr ! ) sur sa seule div enfant et donc supprimer une div qui ne sert à rien ! Et je suis sûr que tu as fait ça un peu partout !

Finalement je me demande si tes problèmes d'affichages ne sont pas en partie lié à tout ce que je viens de te dire ! surtout les noms avec espaces et les divs inutiles.

Essai d'alléger ton code HTML en enlevant tout ce qui est superflue et sépare le HTML du CSS, on y verra plus clair après !