28221 sujets

CSS et mise en forme, CSS3

[resolu par moi] Petit espace sous IE

salut
Je viens de suivre le site:
http://blog-and-blues.org/weblog/2004/09/24/304-des-colonnes-de-meme-hauteurs-en-css
ca m'a bien aidé, j'avais aussi ce probleme.
Merci pour ce lien.

Mais j'ai un petit probleme que je n'arrive pas a resoudre :
voilà deja l'apercu de mon probleme :

- sous firefox :
http://alien7.free.fr/img1.jpg

- sous IE :
http://alien7.free.fr/img2.jpg

Donc ca pose probleme sur IE, je n'arrive pas a resoudre ce petit bug.
Merci.

je rajoute le code css :
body {
margin: 0;
padding: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color:#fff;
}
#header {
	background-image:url(../img/fond1.png);
	height: 100px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	border-bottom: 0;
}
#bienvenue {
	background-color:#663399;
	text-indent:15px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}
#header, #conteneur, #pied {
display: table;
width: 100%;
border-bottom: 0;
}
#conteneur {
backgroundolor: #fff;
}
#gauche, #droite {
display: table-cell;
height: 100%;
}
#gauche {
float: left;
width: 35%;
background-image:url(../img/fond2.jpg);
border-right: 1px solid #000;
}
html>body #gauche {
float: none;
}
#droite {
background-color:#fff;
}
#pied {
clear: both;
background-color:#663399;
text-align: center;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
position: relative;
}


J'ai presque rien changé du code du site en question.

Je precise juste que la partie droite contient un code php, en fait c'est un frame en php.
Modifié le 20 Dec 2004 - 02:50
Hello,

Je pense au vu du symptome que c'est le fameux bug de 3 pixel qui affecte IE/Win (http://www.positioniseverything.net/explorer/threepxtest.html). La solution proposée, toutes précautions prises pour les autres navigateurs, est d'ajouter "height:1%;" dans ton "#droite", afin de forcer IE à considérer la dimension de cet élément qu'il adaptera de toute façon au contenu.

Mais je peux me tromper...avec ton code HTML ça aiderait. Smiley cligne
le height:1%; ne donne rien, et pour le padding, margin sont à zero dans body.

Voilà le code html enfin php plutot


<body> 
<?php
	if (!isset($_GET['page'])) 
		$page= 'actu';
	else 
		$page= $_GET['page']; 
 		switch($page)
			{
				case 'actu': $color="accueil";break;
			} 
?>

<div id="header">
 <img src="../img/ws.gif" width="195" height="100" />
</div> 

<div id="conteneur"> 

  <!-- Menu Gauche //--> 
  <div id="gauche"> 
    <div id="ombre1"></div> 
    <br> 
    <h4>Identifiez-vous</h4> 
    <div id="menufond"> 
      <p>Login</p> 
      <form name="form1" id="form1" method="post" action=""> 
        <p> <input class="input" type="text" name="login" /> </p> 
        <p>Mot de passe</p> 
        <p> <input class="input" type="text" name="pass" /> 
          <input name="submit" type="submit" class="rechercher" value="Go" /></p> 
        <p>Mot de passe perdu</p> 
      </form> 
    </div> 
  </div>

  <!-- Centre //--> 
  <div id="droite"> 
    <div id="ombre2"></div> 
    <?php 
		if (!isset($_GET['page'])) 
			$page= 'pres_acc'; 
		else 
			$page= $_GET['page']; 
 			switch($page)
				{
					case 'pres_acc': include ('pres_acc.php');;break;

				} 
	?> 
  </div> 
</div> 
</body>

Modifié le 17 Dec 2004 - 17:42
C'est enervant IE j'ai essayé de changer la disposition et ca me donne cette fois un ptit espace a gauche et en bas. Il aime pas les images IE ??
Bah il manquait un float:left; dans :

#droite {
background-color:#fff;
}

Voilà ce que ca fait de copier betement sans comprendre lol.
Sujet clos
Aller à