Aller au menu - Aller au contenu

[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les forums > Site Web > XHTML / CSS > gros souci IE > Lecture du sujet

gros souci IE

ou pourquoi qu'il me coupe ma page :(

Vous devez être inscrit pour pouvoir poster des messages

Page : 1 
Auteur Message
1 visiteur sur ce sujet (1 anonyme)
Page : 1 
Hors ligne kaillou38 # Posté le 25/11/2005 à 07:01:50
Groupe : Membres
bonjour

ceci est certainement le dernier post sur html/css, enfin jusqu'au moment ou il me prendra de rechanger de design...

ma page marche tres bien avec ff, mais a 2 gros soucis avec IE

a voir ici : www.kaillou.net/new

le premier, c'est que j'arrive pas a enlever ces especes d'espaces entre les blocs des cadres

j'ai beau bouger les margin ou autres trucs comme ca, rien y fait :(

je poste le code :


Code : HTML
<div id="introduction">
   <div class="haut-boite">
   <div class="coin-haut-gauche"></div>
   <div class="coin-haut-droit"></div>
   <div class="tranche-haut-droit"><h5>Bonjour, et bienvenue sur Kaillou.net</h5></div>
   <div class="coin-haut-milieu"></div>
   <div class="tranche-haut-gauche"></div></div>

   <div class="corps-boite">   

      <div class="centre-corps">
          ce site est "optimisé" pour les navigateurs respectant les normes du web, donc ceux utilisant encore internet explorer, veuillez cliquer
          <a href="http://www.mozilla.fr">ici</a><br />
          Bon surf (bien que tres limité pour le moment)</div></div>
   
   <div class="bas-boite"> 
   <div class="coin-bas-gauche"></div>
   <div class="coin-bas-droit"></div>
   <div class="tranche-bas"></div></div>

</div>


Code : CSS
#introduction
{
  background-color:#f0f0f0;
  margin: 0px;
  padding: 0px;
  margin-top: 6px;
  }

#introduction h5
{
  font-size: 1em;
  padding :0px;
  margin: 0px;
  margin-top:15px;
}

.coin-haut-gauche
{
  border: 0px solid;
  float: left;
  margin: 0px;
  padding: 0px;
  height: 47px;
  width: 16px;
  background-image: url("kaillou_fichiers/coin-haut-gauche.png") !important;
  background-image: url("kaillou_fichiers/coin-haut-gauche-ie.png");
  background-repeat: no-repeat;
  }

.tranche-haut-gauche
{

  border: 0px solid;
  margin: 0px;
  margin-left: 16px;
  margin-right: 16px;
  padding: 0px;
  height: 47px;
  background-image: url("kaillou_fichiers/tranche-haut-gauche.png") !important;
  background-image: url("kaillou_fichiers/tranche-haut-gauche-ie.png");
  background-repeat: repeat-x; 
  }

.coin-haut-milieu
{
  border: 0px solid;
  float:right;
  margin: 0px;
  padding: 0px;
  height: 47px;
  width: 33px;
  background-image: url("kaillou_fichiers/coin-haut-milieu.png") !important;
  background-image: url("kaillou_fichiers/coin-haut-milieu-ie.png");
  background-repeat: no-repeat; 
  }

.tranche-haut-droit
{

  border: 0px solid;
  float:right;
  margin: 0px;

  padding: 0px;
  height: 47px;

  background-image: url("kaillou_fichiers/tranche-haut-droit.png") !important;
  background-image: url("kaillou_fichiers/tranche-haut-droit-ie.png");
  background-repeat: repeat-x; 
  }

.coin-haut-droit
{
  border: 0px solid;
  float:right;
  margin-right: 0px;
  padding: 0px;
  height: 47px;
  width: 16px;
  background-image: url("kaillou_fichiers/coin-haut-droit.png") !important;
  background-image: url("kaillou_fichiers/coin-haut-droit-ie.png");
  background-repeat: no-repeat; 
  }

.corps-boite
{
  margin:0px;
  padding:0px;
  border: 0px solid;
  background-image: url("kaillou_fichiers/tranche-milieu-gauche.png") !important;
  background-image: url("kaillou_fichiers/tranche-milieu-gauche-ie.png");
  background-repeat: repeat-y; 
  }

.tranche-milieu-gauche
{
  line-height:0px;
  border:0px solid;
  float:left;
  margin: 0;
  padding: 0px;
  width: 16px;
  height: 100%;
  vertical-align:bottom;
  background-image: url("kaillou_fichiers/tranche-milieu-gauche.png") !important;
  background-image: url("kaillou_fichiers/tranche-milieu-gauche-ie.png");
  background-repeat: repeat-y; 
  }

.centre-corps
{
  margin: 0px;
  padding: 0px;
  margin-left:16px;
  padding-right: 16px;

  background-color: #d7dffe;
  background-image: url("kaillou_fichiers/tranche-milieu-droit.png") !important;
  background-image: url("kaillou_fichiers/tranche-milieu-droit-ie.png");
  background-repeat: repeat-y; 
  background-position: right;

 
  }

.tranche-milieu-droit
{
  float:right;
  margin: 0px;
  padding: 0px;
  width: 16px;
  border:0px solid;
  background-image: url("kaillou_fichiers/tranche-milieu-droit.png") !important;
  background-image: url("kaillou_fichiers/tranche-milieu-droit-ie.png");
  background-repeat: repeat-y; 
  }

.coin-bas-gauche
{

  float:left;
  margin: 0px;
  padding: 0px;
  height: 16px;
  width: 16px;
  background-image: url("kaillou_fichiers/coin-bas-gauche.png") !important;
  background-image: url("kaillou_fichiers/coin-bas-gauche-ie.png");
  background-repeat: no-repeat; 
  }

.tranche-bas
{
  border: 0px solid;
  margin: 0px;
  margin-right:16px;
  margin-left:16px !important;
  margin-left:0px;
  padding: 0px;
  height: 16px;
  background-image: url("kaillou_fichiers/tranche-bas.png") !important;
  background-image: url("kaillou_fichiers/tranche-bas-ie.png");
  background-repeat: repeat-x; 
  }

.coin-bas-droit
{
  border: 0px solid;
  float:right;
  margin: 0px;
  padding: 0px;
  height: 16px;
  width: 16px;
  background-image: url("kaillou_fichiers/coin-bas-droit.png") !important;
  background-image: url("kaillou_fichiers/coin-bas-droit-ie.png");
  background-repeat: no-repeat; 
  }


ca fait beaucoup de code en css, c'est pas tout tres utile, mais ca marche sous ff
et si une fois corrigé, ca interesse quelqu'un, c'est absolument libre de droit...


le second, et c'est le plus embetant, c'est qu'il lui arrive assez souvent de couper la page completement, et ca je vois pas du tout d'ou ca vient!!!
j'heberge moi meme mon site (debian+apache2), mais je pense que ca vienne de ca
Édité le 25/11/2005 à 07:32:05 par kaillou38
Hors ligne cgrard # Posté le 25/11/2005 à 07:20:11
Avatar
Groupe : Membres
C'est assez dur a changer mais pour faire tous les coins , a la place des class jue mettrait sa dans un tableau :)

Meme si les tableau ne serve pas as sa je pense que tu aura un code plus cours et moins de probleme par la suite ;)

Carpe Diem :p
 
Hors ligne kaillou38 # Posté le 25/11/2005 à 07:31:39
Groupe : Membres
j'ai oublié l'url du site pour visualisation des problemes

et ca me ferait chié de tout changer alors que finalement, c'est juste un probleme avec IE...
Hors ligne jp949 # Posté le 25/11/2005 à 07:56:58
toujours dispo ou presque
Avatar
Groupe : Membres
essaie de mettre des margin negatifs -3px par exemple
decoupediz
jp949
 
Hors ligne kaillou38 # Posté le 25/11/2005 à 08:08:44
Groupe : Membres
c'est bizarre effectivement

un margin negatif sur ma "tranche bas" sert a rien, je suis à 16px de base (l'épaisseur des coins), et descendre ne fait rien (j'ai essayé -3 aussi pour voir)

ce qui est bizarre c'est que si je met -3px comme margin pour un coin, ca me le decalle, mais ca colle aussi la tranche contre, ce que je voudrai faire...

je vais donc chercher dans cette voie

enfin pour l'instant, on emmene la voiture au controle technique et dodo...

[edit] bon avant le dodo, j'ai halluciné un peu

l'espece de bidouillage qui marche j'en revient pas

dans la tranche extensible, je rajoute ca
Code : CSS
  margin-right:16px !important;
  margin-right:-3px;
  margin-left:16px !important;
  margin-left:-3px;


et dans les coins, un margin apposé au coin a -3 px aussi

et si je met 2px, par exemple, ca me laisse un ecart, et si je met qu'un element, ca ne fait rien o_O

enfin, ca marche comme, plus qu'a resoudre mon probleme de page couper, et c'est la fete :D
(bon un peu de boulot sur les couleurs de texte et l'arrangement des news...)
Édité le 25/11/2005 à 08:19:02 par kaillou38
Hors ligne jp949 # Posté le 25/11/2005 à 08:12:11
toujours dispo ou presque
Avatar
Groupe : Membres
alors bonne nuit a +
decoupediz
jp949
 
Hors ligne mrdus # Posté le 25/11/2005 à 12:35:08
Avatar
Groupe : Membres
voici ce que ça donne sous opera 8.5 avec une resolution de 1280*1024

Image utilisateur

il y a la banniere google qui se retrouve sur tes news et des problemes avec les é è etc. (encodage?)
Hors ligne kaillou38 # Posté le 25/11/2005 à 18:51:59
Groupe : Membres
ouai, je sais, on m'a dit ca ce matin deja sur un autre forum...

je suis en train de chercher la cause :(
mais je comprend pas du tout, ce serait pas opera qui serait un peu mauvait avec les float?

Code : CSS


#pub
{
  float: right;
  margin:0px;
  margin-top: 5px;
  height:610;
  width:125;
  padding:5px;
  padding-right:0px;
  background-image: url("kaillou_fichiers/pub.png") !important;
  background-image: url("kaillou_fichiers/pub-ie.png");
  background-repeat: no-repeat;


j'ai ca dans mon css pour ma pub, donc je comprend pas pourquoi elle est pas collé a droite :(

Retour au forum "XHTML / CSS" ou à la liste des forums

Vous devez être inscrit pour pouvoir poster des messages

Changer de design | En savoir plus | Plan du site | Politique d'accessibilité | Règles | RSS tutoriels | RSS news
Édité par Simple IT SARL : Nous contacter | Notre blog | Revue de presse | Publicité

Y'a plus rien à lire, faut remonter maintenant !

Hébergement web - Correction de tutoriels - Créer un site
Vous souhaitez apparaître ici ? Contactez-nous.

Nombre de connectés 747 Zéros connectés | Requêtes SQL 7 requêtes | Temps de génération de la page : Total (SQL) 0.0852s (0.0603s)