Pourquoi ça fait chelou sous IE ? [+ SOLUTION]

Pourquoi ça fait chelou sous IE ? [+ SOLUTION] - HTML/CSS - Programmation

Marsh Posté le 15-06-2003 à 12:50:18    

J'ai un petit problème avec cette page :
 
http://c9x.org/tries/ls-new.html
 
Sous Opera et Mozilla ça s'affiche bien.
Sous IE :
1) En haut, il y a un espace entre le cadre central ("blablablablabla" ) et les cadres flotants autour. Pourquoi ? Ils sortent d'où les bougres ?
2) Je veux que ce soit tout bleu, jusqu'en bas. Mais sous IE, quand on charge la parge, malgré le style clear:both avant la fin du cadre, le bleu s'arrete immédiatement après le texte ("Contenu" ) . Par contre, quand on scrolle la page, IE affiche euh... un bout de bleu en bas et du blanc au milieu. Et si on passe la fenetre en plein écran, il affiche le bleu partout ?!
 
Je capte rien là...


Message édité par axey le 15-06-2003 à 22:25:59
Reply

Marsh Posté le 15-06-2003 à 12:50:18   

Reply

Marsh Posté le 15-06-2003 à 12:57:12    

ahhhh... les bug de IE. et pourtant c'est le plus utilisé :pt1cable:

Reply

Marsh Posté le 15-06-2003 à 13:30:03    

Je sais pas trop si c'est un bug d'IE ou un problème dans le code.
Apparemment ca dépend de la hauteur du cadre de gauche : si je fous genre 400px (ça tient dans la fenetre courante, pas de scroll), ça marche. Si je fous une valeur plus grande qui nécessite de scroller, ça foire.

Reply

Marsh Posté le 15-06-2003 à 13:40:59    

benh ie a une très mauvaise intégration des normes... mais, bon, ils ont un peu tous leurs défauts. Perso, je peux pas t'aider plus que ça... dsl

Reply

Marsh Posté le 15-06-2003 à 22:17:52    

Bon, voici une "solution" qui passe sous IE :
 
1) Mettre "position: relative" pour le bloc qui contient des "float" : ça fait que le "style:clear" fonctionne sans que l'on ait besoin de rafraichir la fenetre (débile mais bon...)
 
2) Mettre aussi "position: relative" pour les float dont la hauteur est plus grande que la taille de la fenetre. Sinon ils ne s'affichent plus quand on a fait le 1) .
 
3) Pour une raison ésothérique, il y a systématiquement 3 pixels de marge entre les float. Solution hyper crade juste pour IE : mettre une marge négative de 3 pixels et agrandir la taille des blocs de 3 pixels.
 
Code normal :
 


#hautdroit {
  float: right;
  width: 200px;
}
 
#hautgauche {
  float: left;
  width: 200px;
}


 
Modifs à apporter pour que IE rende ça correctement :
 


#hautdroit {
  float: right;
  width: 200px;
}
 
* html #hautdroit {
  margin: 0 -3px;
  width: 203px;
}
 
#hautgauche {
  float: left;
  width: 200px;
}
 
* html #hautgauche {
  margin: 0 -3px;
  width: 203px;
}


 
Complétement débile, mais ça à l'air de fonctionner, c'est toujours mieux que rien...
 
Page d'origine:
 
http://c9x.org/tries/ls-new.html
 
Page avec les horreurs pour IE en plus:
 
http://c9x.org/tries/ls-new-ie.html
 
J'imagine que ça doit par contre foirer sous IE Mac.

Reply

Marsh Posté le 15-06-2003 à 22:22:43    

Ah non je suis couillon, pas besoin de rendre les blocs plus larges, il suffit de compenser une seule des marges :
 


* html #hautdroit {
  margin-left: -3px;
}
* html #hautgauche {
  margin-right: -3px;
}

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed