Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1559 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Texte, DIV, mauvaise taille dans IE....

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Texte, DIV, mauvaise taille dans IE....

n°782215
Leuen
Posté le 30-06-2004 à 11:33:03  profilanswer
 

Voir post tout en bas.


Message édité par Leuen le 18-08-2004 à 12:09:12
mood
Publicité
Posté le 30-06-2004 à 11:33:03  profilanswer
 

n°782219
Lord II
PIB2000
Posté le 30-06-2004 à 11:35:22  profilanswer
 

ou là c'est un peu bizarre, tu utilise left et right en meme temps. Il doit etre un peu perdu là


---------------
La bave du crapaud n'empèche pas la caravane de passer .
n°782264
Leuen
Posté le 30-06-2004 à 11:56:17  profilanswer
 

Oui mais j'ai pas tellement d'autre solutions et sous Mozilla &a marche super bien.  
 
Parceque en fait chiffres se dimensionne automatiquement en fonction de la taille de la fenêtre et reste néanmoins toujours à la même distance des bords gauches et droits ce qui est indispensable car à gauche et a droite il y a des images... Enfin c'est pas facile à expliquer.

n°783189
Leuen
Posté le 01-07-2004 à 09:21:47  profilanswer
 

J'ai les div chiffres et liens qui ne s'affichent pas sous IE mais parfaitement sous Mozilla.  
 
Un autre truc super étonnant est que je croyais avoir oublié de fermer un div. Je met une balise fermante, ça a amélioré pas mal de choses sous IE. Après coup en mettant de l ordre dans mon code, je m'appercois que la balise ne manquait pas, donc elle est à double. Mais sans cette balise fermante c est le bordel total sous IE.  [:jkley]  
 
Je vous met mon code html et mes CSS svp dites moi si vous voyez le problème !  :sweat:  
 

Code :
  1. body     {
  2.       font-family      : arial            ;
  3.         }
  6. #portail    {
  7.       position       :  absolute         ;
  8.       bottom       : 0px         ;
  9.       left        : 0px         ;
  10.       right       : 0px         ;
  11.       top        : 0px         ;
  12.       width       : 100%         ;
  13.       height       : 100%         ;
  14.      }
  16. #logo     {
  17.       position      : absolute        ;
  18.       background-image    :  url(../../images/logoPortail.gif)   ;
  19.          background-repeat   :  no-repeat        ;
  20.       top              :  0px                 ;
  21.       left        : 0px         ;
  22.        width       :  232px         ;
  23.        height       :  50px         ;
  24.        padding      :  0px         ;
  25.       z-index      : 1          ;
  26.      }
  28. #homme    {
  29.       position      : absolute        ;
  30.       background-image    : url(../../images/homme_trait.jpg)  ;
  31.          background-repeat   :  no-repeat        ;
  32.       bottom             :  0px                 ;
  33.       left        : 0px         ;
  34.        width       :  185px         ;
  35.        height       :  483px         ;
  36.        padding      :  0px         ;
  37.      }
  39. #recherche   {
  40.       position      : absolute        ;
  41.       top        : 0px         ;
  42.       right       : 0px         ;
  43.       width       : 239px         ;
  44.       height       : 65px         ;
  45.      }
  46. .recherche    {
  47.       margin-top      : 12px         ;
  48.       padding-left     : 16px         ;
  49.      }
  50. .rechOption   {
  51.       padding      : 0px         ;
  52.       padding-left     : 22px         ;
  53.      }
  54. input      {
  55.       border-color     :  rgb(0,0,0)        ;
  56.       border-width     :  1px         ;
  57.       font-size      :  9px         ;
  58.       size       : 15px         ;
  59.      }
  60. form      {
  61.       font-size      :  10px         ;
  62.      }
  64. #femme    {
  65.       position      : absolute        ;
  66.       background-image    : url(../../images/femme.jpg)   ;
  67.          background-repeat   :  no-repeat        ;
  68.       bottom             :  0px                 ;
  69.       right       : 0px         ;
  70.        width       :  207px         ;
  71.        height       :  126px         ;
  72.        padding      :  0px         ;
  73.      }
  75. #chiffres    {
  76.       position      : absolute        ;
  77.       background-image    : url(../../images/chiffres.jpg)   ;
  78.       background-repeat   : repeat-x        ;
  79.       bottom             :  5px                 ;
  80.       left        : 185px         ;
  81.       right       : 185px         ;
  82.       height       : 16px         ;
  83.       z-index      : 1          ;
  84.       padding      :  0px         ;
  85.      }
  87. #centre    {
  88.       position      : absolute        ;
  89.       background-image    : url(../../images/centre.jpg)    ;
  90.          background-repeat   :  no-repeat        ;
  91.       bottom             :  35%               ;
  92.       left        : 20%         ;
  93.       width       : 455px         ;
  94.       height       : 135px         ;
  95.       z-index      : 1          ;
  96.       padding      :  0px         ;
  97.      }
  99. #nouvelle    {
  100.       position      : absolute        ;
  101.       right       : 5%          ;
  102.       top        : 20%         ;
  103.       width       : 20%         ;
  104.       height       : 15%         ;
  105.       overflow      : hidden         ;
  106.       text-align      : center         ;
  107.       border-right     : 2px solid rgb(80,80,80)    ;
  108.       border-bottom     : 2px solid rgb(80,80,80)    ;
  109.       border-left      : 2px solid rgb(80,80,80)    ;
  110.       border-collapse    : collapse        ;
  111.       z-index      : 2          ;
  112.      }
  114. #manifestation   {
  115.       position      : absolute        ;
  116.       right       : 5%          ;
  117.       top        : 40%         ;
  118.       width       : 20%         ;
  119.       height       : 15%         ;
  120.       overflow      : hidden         ;
  121.       text-align      : center         ;
  122.       border-right     : 2px solid rgb(80,80,80)    ;
  123.       border-bottom     : 2px solid rgb(80,80,80)    ;
  124.       border-left      : 2px solid rgb(80,80,80)    ;
  125.       border-collapse    : collapse        ;
  126.       z-index      : 2          ;
  127.      }
  129. .autresManif   {
  130.       padding-top     : 10px         ;
  131.      }
  133. #liens     {
  134.       font-family      :  arial         ;
  135.       font-size      : 10pt         ;        position      : absolute        ;
  136.       left        : 25%         ;
  137.       bottom       : 5%          ;
  138.       width       : 50%         ;
  139.       height       : 10%         ;
  140.       overflow      : hidden         ;
  141.       z-index      : 2          ;
  142.      }
  144. #lien1     {
  145.       position      : absolute        ;
  146.       top        : 0%          ;
  147.       left        : 0%          ;
  148.       width       : 50%         ;
  149.       height       : 50%         ;
  150.       overflow      : visible         ;
  151.      }
  153. #lien2     {
  154.       position      : absolute        ;
  155.       top        : 0%          ;
  156.       right       : 0%          ;
  157.       width       : 50%         ;
  158.       height       : 50%         ;
  159.       overflow      : visible         ;
  160.      }
  162. #lien3     {
  163.       position      : absolute        ;
  164.       bottom       : 0%          ;
  165.       left        : 0%          ;
  166.       width       : 50%         ;
  167.       height       : 50%         ;
  168.       overflow      : visible         ;
  169.      }
  171. #lien4     {
  172.       position      : absolute        ;
  173.       bottom       : 0%          ;
  174.       right       : 0%          ;
  175.       width       : 50%         ;
  176.       height       : 50%         ;
  177.       overflow      : visible         ;
  178.      }
  182. .titre     {
  183.       font-size      : 10pt         ;
  184.       color       : rgb(107,134,151)      ; 
  185.       padding      : 2px         ;
  186.       font-weight      : bold         ;
  187.       font-style      : normal         ;
  188.       text-align      : center         ;
  189.       border-top      : 2px solid rgb(80,80,80)    ;
  190.       border-bottom     : 2px solid rgb(80,80,80)    ;
  191.      }
  193. .margeSup    {
  194.       padding-top     : 8px         ;
  195.      }


 
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  5. <head>
  6. <title>test</title>
  7. <meta name="GENERATOR" content="Arachnophilia 4.0">
  8. <meta name="FORMATTER" content="Arachnophilia 4.0">
  9. <meta http-equiv="Content-Type" content="text/html; charset='iso-8859-1'" />
  10. <meta http-equiv="Content-Style-Type" content="text/css" />
  11. <link title="test.html" type="text/css" rel="stylesheet" href="styles/style.css" />
  12. </head>
  14. <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
  16. <div id="portail">
  18.  <div id="logo">&nbsp;</div>
  19.  <div id="recherche">
  20.   <form method="post" action="http://www.kartoo.com/perso.php3" id="kartoo">
  21.    <div class="recherche">
  22.     Rechercher:
  23.     <input type="text" name="q" />
  25.     <input type="submit" name="submit" value="ok" style="background:rgb(204,0,0); color:white;" />
  26.    </div>
  27.    <div class="rechOption">
  28.     <input type="radio" name="lg" value="1" checked />web fran&ccedil;ais &nbsp;&nbsp;&nbsp;
  29.     <input type="radio" name="lg" value="0" />web mondial
  30.    </div>
  31.    <div>
  32.     <input type="hidden" name="fd" value="1" />
  33.     <input type="hidden" name="tr" value="2" />
  34.     <input type="hidden" name="bo" value="0" />
  35.    </div>
  36.   </form>
  37.  </div>
  38.  </div>
  39.  <div id="centre">&nbsp;</div>
  40.  <div id="liens">
  41.   <div id="lien1">
  42.    <img src="../images/lien.gif" alt="lien.gif (859 octets)" title="lien.gif (859 octets)" /> Inscription papier - formation ES
  43.   </div>
  44.   <div id="lien2">
  45.    <img src="../images/lien.gif" alt="lien.gif (859 octets)" title="lien.gif (859 octets)" /> Inscription papier - formation ES
  46.   </div>
  47.   <div id="lien3">
  48.    <img src="../images/lien.gif" alt="lien.gif (859 octets)" title="lien.gif (859 octets)" /> Inscription papier - formation ES
  49.   </div>
  50.   <div id="lien4">
  51.    <img src="../images/lien.gif" alt="lien.gif (859 octets)" title="lien.gif (859 octets)" /> Inscription papier - formation ES
  52.   </div>
  53.  </div>
  54.  <div id="nouvelle">
  55.   <div class="titre">
  56.    Dernières nouvelles
  57.   </div>
  58.    Contenu
  59.  </div>
  60.  <div id="manifestation">
  61.   <div class="titre">
  62.    Prochaines manifestations
  63.   </div>
  64.   <div class="margeSup">
  65.    Il n'y a pas de manifestation pour l'instant.
  66.   </div>
  67.  </div>
  68.  <div id="homme">&nbsp;</div>
  69.  <div id="chiffres">&nbsp;</div>
  70.  <div id="femme">&nbsp;</div>
  71. </div>
  72. </body>
  74. </html>


Message édité par Leuen le 01-07-2004 à 09:24:27
n°783193
boulax
Inserer phrase hype en anglais
Posté le 01-07-2004 à 09:36:32  profilanswer
 

code pas clair, et hop une erreur
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. </head>
  6. <body>
  8. <div id="portail">
  9. <div id="logo">&nbsp;</div>
  10. <div id="recherche">
  11.   <div class="recherche"></div>
  12.   <div class="rechOption"></div>
  13.   <div></div>
  14. </div>
  15. </div>
  17. <div id="centre">&nbsp;</div>
  18. <div id="liens">
  19. <div id="lien1"></div>
  20. <div id="lien2"></div>
  21. <div id="lien3"></div>
  22. <div id="lien4"></div>
  23. </div>
  25. <div id="nouvelle">
  26. <div class="titre"></div>
  27. </div>
  29. <div id="manifestation">
  30. <div class="titre"></div>
  31. <div class="margeSup"></div>
  32. </div>
  34. <div id="homme">&nbsp;</div>
  35. <div id="chiffres">&nbsp;</div>
  36. <div id="femme">&nbsp;</div>
  38. //</div>
  40. </body>
  42. </html>


Message édité par boulax le 01-07-2004 à 09:37:03

---------------
Posté depuis des chiottes, sales. Me gusta.
n°783206
Leuen
Posté le 01-07-2004 à 09:56:50  profilanswer
 

:heink: le /div à la fin que tu as mis en commentaire, ferme le div principal: "portail".

n°783207
boulax
Inserer phrase hype en anglais
Posté le 01-07-2004 à 09:57:58  profilanswer
 

non. Portail est fermé a la fin du premier bloc de mon quote.


---------------
Posté depuis des chiottes, sales. Me gusta.
n°783215
Leuen
Posté le 01-07-2004 à 10:03:19  profilanswer
 

boulax a écrit :

non. Portail est fermé a la fin du premier bloc de mon quote.


 
Ce qui n'est pas très pratique pusique portail est censé être un div qui contient tous les autres.
 
EDIT: par contre je reconnais qu il y a une balise fermante en trop. Mais si je l'enlève cette saloperie de IE me fait n importe quoi.   :fou:


Message édité par Leuen le 01-07-2004 à 10:05:46
n°783217
boulax
Inserer phrase hype en anglais
Posté le 01-07-2004 à 10:06:05  profilanswer
 

"trop de div tue le div"
 
ca marche maintenant alors ?


---------------
Posté depuis des chiottes, sales. Me gusta.
n°783221
boulax
Inserer phrase hype en anglais
Posté le 01-07-2004 à 10:11:34  profilanswer
 

url ?


---------------
Posté depuis des chiottes, sales. Me gusta.
mood
Publicité
Posté le 01-07-2004 à 10:11:34  profilanswer
 

n°783234
Leuen
Posté le 01-07-2004 à 10:19:11  profilanswer
 

Pas online pour l'instant.  
 
Tu as raison mon div portail ne sert à rien !  
 
Donc je l'ai supprimé. Tout fonctionne comme avant sous Mozilla. Par contre sous IE chiffres et liens ne s'affichent toujours pas.

n°783235
boulax
Inserer phrase hype en anglais
Posté le 01-07-2004 à 10:20:13  profilanswer
 

t'as bien vérifié que tout se referme bien ? je vais encore jeter un coup d'oeil aux css


---------------
Posté depuis des chiottes, sales. Me gusta.
n°783238
Leuen
Posté le 01-07-2004 à 10:24:28  profilanswer
 

Oui j'ai relu au moins 5 fois. Mais à force on voit même plus l'érreure si il y en a une. Comme le portail par exemple j était partit au tout départ dans l'idée d un div qui contient les autre pour pouvoir le positionner et au fur et à mesure que j ai développé le reste, portail ne sert plus à rien...  
 
 
Merci pour ton aide.  :jap:

n°783306
Leuen
Posté le 01-07-2004 à 11:16:11  profilanswer
 

[:yoyoz]  :cry:

n°783320
boulax
Inserer phrase hype en anglais
Posté le 01-07-2004 à 11:22:52  profilanswer
 

Leuen a écrit :

[:yoyoz]  :cry:


tu peu poster une capture d'ecran du resultat sous ie et moz ?


---------------
Posté depuis des chiottes, sales. Me gusta.
n°783345
boulax
Inserer phrase hype en anglais
Posté le 01-07-2004 à 11:38:52  profilanswer
 

je vois pas tes images, va sur imageshack.us


---------------
Posté depuis des chiottes, sales. Me gusta.
n°783350
Leuen
Posté le 01-07-2004 à 11:43:52  profilanswer
 

Merci je connaissais pas ! Excellent !

n°783368
boulax
Inserer phrase hype en anglais
Posté le 01-07-2004 à 11:53:11  profilanswer
 

tes liens1, liens2, liens3 etc... ne devraient pas etre en position absolute je pense, car comme ca il se "détachent" de leur conteneur il me semble.


---------------
Posté depuis des chiottes, sales. Me gusta.
n°783375
Leuen
Posté le 01-07-2004 à 11:59:03  profilanswer
 

Effectivement si je met en relative ca apparait :bounce:  mais tout en ligne, je vois pas comment gérer ça pourqu'ils se mettent comme ils devraient !

n°783382
boulax
Inserer phrase hype en anglais
Posté le 01-07-2004 à 12:03:46  profilanswer
 

mets les dans un tableau... ca marche toujours sous mozilla en parallele ?


---------------
Posté depuis des chiottes, sales. Me gusta.
n°783436
Leuen
Posté le 01-07-2004 à 12:58:05  profilanswer
 

Si je met en relative sous moz ca merde aussi. Ils sont pas en ligne mais y en a juste deux a gauche je pense qu ils sont l un sur l autre.  
 
Ok je vais faire un tableau ca sera plus simple.
 
Sinon Pour les chiffres en bas tu as une idée ? D'après moi c'est parcqu il n y a pas de largeur définie qu IE n aime pas. Mais bon il devrait quand meme supporter ça c'est un peu la base ?!?


Message édité par Leuen le 01-07-2004 à 13:44:01
n°783537
Leuen
Posté le 01-07-2004 à 14:27:39  profilanswer
 

Bon merci pour ton aide, avec ces maudis chiffres rien à faire je trouve pas de solution. Le design m'est imposé alors faudra bien que j'en trouve une ....

n°823988
Leuen
Posté le 16-08-2004 à 10:26:24  profilanswer
 

[:yoyoz]  :o

n°825745
Leuen
Posté le 18-08-2004 à 12:12:25  profilanswer
 

Dernier problème en date. J'ai un div qui contient du texte.
 
Ce div à une taille défini à l'aide d'un pourcentage de son conteneur (donc la page).  
 
Sous Mozilla comme d'hab pas de prob le div fait la bonne taille.  
 
Sous IE <- :fou: comme d'hab ca merde.
 
Le div se dimmensionne en fonction du texte qu'il contient et rien à foutre qu'on lui ai fixé une hauteur avec des pourcents.  
 
Ok je pourrait définir une hauteur "fixe" en pixel. Mais il faut que mon div se redimensionne en fonction de la taille de la fenêtre.
 
Donc que faire ???  [:jkley]


Message édité par Leuen le 18-08-2004 à 13:31:20
n°825799
Leuen
Posté le 18-08-2004 à 13:31:27  profilanswer
 

[:yoyoz]

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Texte, DIV, mauvaise taille dans IE....

 

Sujets relatifs
Problème CSS avec IEEnlever la dernière ligne d'un fichier texte en batch
[CSS] affichage d'une image au survol d'un texteblocs de taille fixes + remplissage ?
Pb focus sur le premier champ texte d'une variable de type tableauPb avec un menu superposé à un bloc qui décale le texte
tableau de taille indetermineeparcourir un fichier texte
probleme de CSS avec les liens externes 
Plus de sujets relatifs à : [CSS] Texte, DIV, mauvaise taille dans IE....

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.137 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR