IE6 et CSS height

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par zeb, 9 Décembre 2007.

  1. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
    Bonjour,

    Je seiche sur un problème a la con de hauteur d'une div.

    J'ai une page, qui comprend (entre autre) deux blocs (div) qui doivent respectivement avoie une hauteur de 50% du total de la surface affichable du navigateur.

    Ces deux div sont positionnées par CSS l'une au dessus de l'autre.

    En toute logique si elle font 50 % de la hauteur totale et et positionnées l'une au dessus de l'autre, cela doit me donner une occupation totale de l'écran et ces deux blocs doivent coller l'un a l'autre.

    exemple en image :

    [​IMG]

    Sous IE, les propriétés height 50% ne semblent pas interprétées voir :

    [​IMG]

    Une idée ?

    La page est ici : http://www.sculpture-et-pierre.fr/Ombre.php

    le Html pour ces deux blocs est comme ceci :

    Code:
      <div class="B1">
       <div class="content">
        <!-- contenu textuel de la page -->
        <h1>Ombre</h1>
        <br/>
        L'ombre est un mystère vivant. <br/><br/>
        Vivant parce que seuls les morts n'ont plus d'ombre, <br/>
        mystère parce que cet étrange double de nous-mêmes 
        s'attache à nos pas et nous échappe en même temps.<br/><br/>
        Catherine d'Humières
        <!-- fin du contenu textuel de la page -->
       </div>
      </div>
      
    
      <div class="B3">
       <div class="menu">
        <a href="http://www.sculpture-et-pierre.fr/" title="Sculpture et pierre">accueil</a><br/><br/>
        <a href="http://www.sculpture-et-pierre.fr/Artiste.php" title="">l'artiste</a><br/>
        (...)
        <a href="http://www.sculpture-et-pierre.fr/Lumiere.php" title="lumière">la lumière</a><br/>
        <a href="http://www.sculpture-et-pierre.fr/Contraste.php" title="">le contraste</a><br/>
       </div>
      </div>
    et le CSS associé :

    Code:
    /*******************************************************************************
       block de contenu general
    *******************************************************************************/
    .B1{
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	width: 250px;
    	height: 50%;
    	color: #ffffff;
    	background-color: #000000;
    	border-right: 1px solid #898a89;
    	filter: alpha(opacity=50);
    	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    	opacity:0.50;
    }
    /* sous bloc de contenu (inclus dans le B1) */
    .content{
    	width: 220px;
    	height: 80%;
    	position: relative;
    	left: 10px;
    	top: 10px;
    }
    /*******************************************************************************
       bloc de menu principal (menu)
    *******************************************************************************/
    .B3{
    	position: absolute;
    	top: 50%;
    	left: 0px;
    	width: 250px;
    	height: 50%;
    	color: #0000ff;
    	background-color: #ffffff;
    	border-right: 1px solid #898a89;
    	filter: alpha(opacity=50);
    	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    	opacity:0.50;
    }
    /* sous bloc de menu */
    .menu{
    	width: 220px;
    	height: 80%;
    	position: relative;
    	left: 10px;
    	top: 10px;
    }
    Merci
     
  2. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
    si quelqu'un peut me dire ce qu'il voie sous IE7 cela m'arangerais aussi car je ne suis pas encore équipé de ce navigateur.
     
  3. Vap
    Vap WRInaute impliqué
    Inscrit:
    17 Juin 2007
    Messages:
    983
    J'aime reçus:
    0
    Sur IE7 et Firefox ça s'affiche bien.

    Sinon, ton css n'est pas valide. filter n'est pas dans le standard. As tu essayé sans? Si cela marche sans sous IE6, il faut que tu n'active les filtres que pour les naviagteurs plus récents.

    Vap
     
  4. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
    merci ça me console un peut car je vais vers du mieux (dans les 5 prochaines années lol)

    Filter n'est pas le problème, il passe bien sous tous les navigateur que j'ai sauf Konqueror mais ça gache pas tout pour autant.
    sinon, même enlevé, le problème persiste sous IE6.

    sinon pour faire le tour, j'ai testé sous safari 1.3, firefox (1 / 2) IE6, Konqueror, tous passe a peut près bien sauf IE6.
     
  5. Vap
    Vap WRInaute impliqué
    Inscrit:
    17 Juin 2007
    Messages:
    983
    J'aime reçus:
    0
    Essaie ce qui suit. Chez moi ça à l'air de marcher sans les filtres. Je te laisse voir si ça résoud ton pb.

    Code:
    body{
    	background-repeat: no-repeat;
    	background-position: top right;
    	font-family: Arial,verdana;
    	font-size: 12px;
    
    	color: #000000;
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;
      width: 100%;
    }
    
    L'idée est de ne JAMAIS laisser des définitions de valeur implicites.

    Vap
     
  6. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
    Bien vue l'artiste !!! chapeau bas Monsieur et un grand merci.

    Ne pas laisser de valeur implicite car IE6 ne sous entend pas qu'on utilise tout l'espace ... (a méditer et a retenir, j'avais jamais rencontré ce problème de façon si flagrante)

    Dans la même série et une fois compris le concept que tu m'exposait, j'ai du aussi ajouter les valeurs de margin et padding pour avoir l'effet désiré.

    Mille fois merci et si je peut te rendre un service ... n'hésite pas ;-)
     
  7. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
  8. Vap
    Vap WRInaute impliqué
    Inscrit:
    17 Juin 2007
    Messages:
    983
    J'aime reçus:
    0
    Ca fait plaisir d'aider quelqu'un comme toi!

    L'artiste est ma femme, je ne suis que le webmaster de son site! Merci pour le lien en tout cas!

    Je vais lui montrer ton site, car le design est original et franchement, j'aime beaucoup.

    Vap
     
  9. Vap
    Vap WRInaute impliqué
    Inscrit:
    17 Juin 2007
    Messages:
    983
    J'aime reçus:
    0
    Je pense à une chose: teste ton site sur un petit écran, ou retaille la fenêtre de ton navigateur avant de visiter ton site.

    Sur grand écran il rend très bien, mais il se peut que pour des petites tailles d'écran le retaillage automatique tronque tes menus.

    Vap
     
  10. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
    en 1024 x 768, ça passe bien en revanche le 800 x 600 est une vrai cata (plus de menu et images trop courtes) mais bon ... cela m'impose un travail que je ne souhaite pas faire pour l'instant. (j'ai encore pas mal de page a faire et bien que le travail ne soit pas trop important, c'est pas simple pour moi de gérer les images donc on verra plus tard)

    En fait je voudrais effectuer une adaptation dynamique (côté client) de la feuille de style, pour pouvoir présenter des fond de pages adaptés à toutes les résolutions.
     
Chargement...
Similar Threads - IE6 CSS height Forum Date
Menu CSS qui ne fonctionne pas sous IE6 Développement d'un site Web ou d'une appli mobile 2 Avril 2010
[CSS] : scroller overflow et ie6 :-( Développement d'un site Web ou d'une appli mobile 12 Mai 2009
[SOLUTION] Differencier IE6 IE7 et FIREFOX en CSS Développement d'un site Web ou d'une appli mobile 8 Janvier 2008
[résolu] CSS : position fixed et IE6 Développement d'un site Web ou d'une appli mobile 13 Juillet 2007
[resolu]problème css IE6 Développement d'un site Web ou d'une appli mobile 6 Juin 2007
Probleme CSS avec IE6 (div coupé par son conteneur) Développement d'un site Web ou d'une appli mobile 16 Avril 2007
[CSS] Problème avec IE6... Développement d'un site Web ou d'une appli mobile 17 Janvier 2007
CSS difference entre FireFow et IE6 Administration d'un site Web 13 Février 2004
Microsoft veut touner la page IE6 Développement d'un site Web ou d'une appli mobile 5 Mars 2011
Vérifier sur IE6 Développement d'un site Web ou d'une appli mobile 2 Août 2010
menu deroulant fonctionnant sous ie6 mais pas sous ie8 Développement d'un site Web ou d'une appli mobile 6 Juillet 2010
JS : script menu déroulant fonctionnant sur FF, IE8, WK mais pas IE6 et 7 ! Développement d'un site Web ou d'une appli mobile 13 Avril 2010
Commentaires conditionnels valable seulement pour ie6 et inférieur ? Développement d'un site Web ou d'une appli mobile 15 Novembre 2009
IE6 no more ! Développement d'un site Web ou d'une appli mobile 30 Octobre 2009
bloquer zoom IE6 Développement d'un site Web ou d'une appli mobile 29 Mai 2009
Prob affichage IE6 Développement d'un site Web ou d'une appli mobile 22 Mai 2009
Utilisation de la librairie DD_belatedPNG.js pour la transparence PNG IE6 Développement d'un site Web ou d'une appli mobile 11 Mai 2009
Problème de marge sous IE6 Développement d'un site Web ou d'une appli mobile 30 Mars 2009
Mon site ne s'affiche plus sous IE6 et 5.5 !!! Développement d'un site Web ou d'une appli mobile 26 Mars 2009
Script ".js" fonctionnel depuis 4 ans sous IE6 et plus avec Développement d'un site Web ou d'une appli mobile 10 Février 2009