18041 sujets

Questions générales et questions de débutants

Problème de design sous IE

Bonjour tout le monde,

je viens vers vous car j'ai un problème avec mon design sous IE 6.0

J'ai tiré mon css du tuto d'ici : http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Design-XHTML-CSS-complet-avec-2-colonnes-de-meme-hauteur

donc globalement tout marche bien sous FF, mais sous IE, gros problème, je m'explique :

Mon css ressemble à ça :


/* CSS Document */
html, body {
	height: 100%;
	margin: 0;
	background: url(../images/fond_degrade_bleu.jpg) repeat-x;
	font: 90% "Trebuchet MS", sans-serif;
	}
	
div#global {
	height: 100%;
	width: 750px;
	padding: 0 10px;
	margin: 0 auto;
	/*position: relative;*/
	position: static;
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/global.png", sizingMethod="scale");
	/*background: url(images/global.png) center repeat-y;*/
	}

div#center {
	/* Pour éviter la superposition du pied de page et du contenu : */
	padding-bottom: 50px; 
	/*overflow: auto;*/
	overflow: visible;
	height: 1%;
	}
	
div#content {
	float: left;
	width: 530px;
	margin-left: 10px;
	display: inline;
	}
	
div#content h2 {
	padding-left: 35px;
	background: #fff ;
	color: #6c0;
	}
div#content h3 {
	color: #c00;
	font-variant: small-caps;
	}
	
div#sidebar {
	float: right;
	width: 200px;
	}
	
div#sidebar h3, div#footer p, div#sidebar p  {
	padding: 0 5px;
	color: #2B2BBA;
	font-size:16px;	
	}
ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	}
	
ul#menu li a {
	display: block;
	height: 30px;
	line-height: 30px;
	background: url(../images/mini_logo_stell.gif) no-repeat 10px 5px ;
	padding-left: 35px;
	padding-bottom: 5px;
	margin: 2px 0;
	border-bottom: 1px solid #7fcf2e;
	color: #390;
	font: small-caps 1.1em/15px Georgia,serif;
	text-decoration: none;
}

ul#menu li a:hover {
	background-position: 5px 5px;
	color: #c30;
}

div#header {
	background: #7fcf2e url(../images/header.jpg) no-repeat;
	color: #FFFFFF;
	height: 201px;
	position: relative;
	}

div#header h1 {
	margin: 0;
	position: absolute;
	bottom: 10px;
	left: 30px;
	font: 3em Georgia, serif;
	}
	
a {
	color: #6c0;
	font-weight: bold;
	}
a:hover {
	color: #c00;
	}

#content, #sidebar {
	margin-top: 15px;
	}
	
a, pre {
	position: relative;
	}
body {
	position: relative;
	}



/* tableaux */
.bh {
	background-image: url(../images/tablo/bord_h.gif);
	background-repeat: repeat-x;
	background-position: left;
	font-family: "Trebuchet MS", sans-serif;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	}
.bb {
	background-image: url(../images/Tablo/bord_b.gif);
	background-repeat: repeat-x;
	background-position: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #009999;
	}
.bg {
	background-image: url(../images/Tablo/bord_g.gif);
	background-repeat: repeat-y;
	background-position: top;
	}
.bd {
	background-image: url(../images/Tablo/bord_d.gif);
	background-repeat: repeat-y;
	background-position: top;
	}
/* fin tableaux */

div#footer {
	position: absolute;
	width: 750px;
	bottom: 0;
	background: #7fcf2e url(../images/footer.jpg) repeat-x;
	color: #FFFFFF;
	}

div#footer p {
	margin: 2px 0;
	font-size: 0.9em;
	color:#FFFFFF;
	}
	
/* formulaires */
form {
background-color:#AEABD1;
padding:20px;
width:300px;
}
label {
font-family:"trebuchet ms",sans-serif;
font-weight:bold;
}
input {
border:1px solid black;
background-color:#638AFC;
font-family:"trebuchet ms",sans-serif;
color:white;
}

/* fin formulaire */


et la structure de ma page, à ça :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="../style1_log.css" type="text/css" />
<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" href="ie_log2.css" media="screen" />
<![endif]-->
<title>..:: StellNet' ::..</title>
</head>
<body>
		<div id="global">
			<div id="header">
				<h1>..:: Connexion ::..</h1>
			</div>
			<div id="center">
			  <div id="content" align="center">
				 <br /><br />
<h3>..:: CONNEXION ::..</h3>
		<?php
		if ($etat !== "connected")
			{
			?>	
          <form name="form1" method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
            <table width="350" border="0">
              <tr> 
                <td colspan="2">Saisissez vos param&egrave;tres de connexion :</td>
              </tr>
              <tr> 
               <td>votre login :</td>
               <td><input name="login" type="text" id="login"></td>
              </tr>
              <tr> 
                <td>votre mot de passe :</td>
                <td> 
                  <input type="password" name="pass">
				</td>
              </tr>
              <tr> 
                <td align="right"> 
                    <input name="valider" type="hidden" id="valider" value="ok">
				</td>
                <td><input type="submit" name="Submit" value="Valider" /></td>
              </tr>
              <tr bgcolor> 
                <td colspan="2"></td>
              </tr>
            </table>
          </form>
          <?php
		  if ($erreurlog==1)
		  {
		  ?>
          <br>
          Votre login ou votre mot de passe sont erron&eacute;s, si le probl&egrave;me persiste, veuillez contacter <a href="mailto:grp_informatique@ch-rueil.fr">l'administrateur du site.</a><br>
		  <?php
		  }
		 } // ferme le if connected
	 else
	 	{
		  ?>
		  	<br />
		  	Vous &ecirc;tes d&eacute;j&agrave; connect&eacute;(e), veuillez cliquer sur le bouton "Se délogger et retourner à l'accueil" dans le menu de droite...	<br />
		  	Si vous d&eacute;sirez reconsulter le livret th&eacute;rapeutique, <a href="../documentation/Livret_therap/Livret_Therapeutique_2007.pdf">cliquez ici</a>.<br />
			<?php
			}?>		  </div>
				<div id="sidebar">
					<h3>Menu</h3><br />
				  <ul id="menu">
				  		<?php
						if ($_SESSION['statut'] !== "ok")
							{
							?>	
						<li><a href="javascript:history.go(-1)">Retour &nbsp;<img src="../images/retour.gif" width="22" height="22" border="0" align="absmiddle" /></a></li>
						<?php
							}
						?>
						<li><a href="?lg=on">Se delogger &nbsp; et revenir a l'accueil<img src="../images/deconnect.gif" alt="Retour &agrave; l'intranet" width="22" height="22" border="0" align="absmiddle" /></a></li>
				  </ul>
				</div>
			
			</div>
			<div id="footer">
				<p>&copy; StellNet' 2007 </p>
			</div>		
			</div>
</body>
</html>

<body>
</body>
</html>


Lors de l'affichage du formulaire, impossible de cliquer dans les champs pour saisir du texte.

On dirait que l'image de "global" passe par dessus, en effet, quand je retire l'image de mon css, on peut cliquer dessus...

Une idée ? Moi, je suis perdu !

Merci d'avance !!
Salut,

dans la page du tuto concernant les corrections à apporter pour IE6, il me semble qu'il est clairement indiqué qu'il y a des problèmes avec les éléments interactifs (liens, champs de formulaire, ...) à cause du filtre AlphaImageLoader.

A relire attentivement Smiley cligne
Salut,

merci de ta réponse, je n'avais pas vraiment vu, mais du coup, y a-t-il un moyen de palier ce problème? c'est très ennuyeux. Je construis et monte un intranet, et donc le site aussi, et la majorité des utilisateurs, voire 95% est sous IE6.

Ou alors faut-il oublier ce filtre ?et laisser tomber le png transparent ?

Merci !
Modifié par zurg (01 Mar 2007 - 14:28)
Bonjour,

zurg a écrit :
y a-t-il un moyen de palier ce problème?


Tout dépend du code, du contenu et des images spécifiques de ta page. Mais pour cela, il faut une page test en ligne, le code ci-dessus n'étant pas d'une grande utilité.
Bonjour,

voilà pour la page de test en ligne ici

le problème ne survient qu'avec IE, la page que j'ai mise en ligne est un peu différente de la réalité (elle est normalement appelée par un include sur une page qui est liée à la même feuille de style.) Mais le problème est le même.

Merci de ton aide !!
@ +
Salut,

pour gérer le dégradé dans le fond, tu vas effectivement avoir besoin de la transparence de l'image de fond ...

La solution utilisée pour résoudre le problème avec les liens ne fonctionne pas pour les éléments de formulaire ? A savoir appliquer 
input, textarea, select, ... {
   position: relative;
}
?
Modifié par Thomas D. (01 Mar 2007 - 14:31)
Ben non, j'ai rajouté cette ligne à la fin de mon css (en enlevant les 3 ptis points et la virgule)

Pas de changement notoire !
Ce qui est marrant, c'est que via la touche tab, je peux accéder aux champs, les remplir et valider avec entrée, mais pas avec la souris.
CORRECTION :

ayé (comme on dit !), j'ai trouvé, je n'avais pas modifié la bonne feuille de style, la ligne que Thomas D m'a indiquée était donc la bonne...

Maintenant pour comprendre, comme cette ligne a-t-elle influcencé la mise en page ?

Merci beaucoup Smiley cligne
Sujet clos
Aller à