28173 sujets

CSS et mise en forme, CSS3

Transparance .png

Bonjour,

J'ai repris les css du tutorial : Design XHTML/CSS complet avec 2 colonnes de même hauteur et j'y est rajouté un formulaire dans la classe du div content .

Sur Firefox, il n'y aucun problème, cependant sur IE (versions 6), je ne peux accéder au champs du formulaire.

Le problème vient effectivement du fichier ie.css avec la ligne:
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="css/img/global.png", sizingMethod="scale");


J'ai lu diverse solutions mais qui me semble trop complexe...
Smiley decu

Merci!
Modifié par yaw (18 Apr 2007 - 22:20)
Salut,

Pour constater un peu plus précisément ton problème et être en mesure de t'aider, il serait bien que tu nous fournisses dans l'idéal une page en ligne, ou au moins l'intégralité de ton code, et/ou des images explicatives si nécessaire, comme le recommande la règle 13 du forum. Smiley cligne
En l'état, j'ai peur qu'il soit difficile de t'apporter une solution.
la page ou se trouve le formulaire:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
		<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="css/positionnement.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="css/images.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="css/menu.css" media="screen" />
		<link rel="stylesheet" type="text/css" href="css/deco.css" media="screen" />
		<!--[if lte IE 6]>
			<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
		<![endif]-->

</head>
<body>
<div id="global">
	<div id="header">
		<? include('pages/header.php'); ?>
	</div>
	<div id="center">
		<div id="content">

		<!-- PLACE D'UN FORMULAIRE -->
		

		</div>		
		<div id="sidebar"><? include('pages/menu.php'); ?></div>
	</div>
	<div id="footer"><? include('pages/footer.php'); ?></div>
</div>
</body>
</html>


Le fichier ie.css

#global {
	height: 100%;
	position: static;
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="css/img/global.png", sizingMethod="scale");
	}
#content {
	display: inline;
	}
#center {
	overflow: visible;
	height: 1%;
	}
a, pre {
	position: relative;
	}
body {
	position: relative;
	}
#content, #sidebar {
	margin-top: 15px;
	}


Les autres css sont accesibles sur:http://css.alsacreations.com/xmedia/exemples/design_css2/css/

Voila!! Smiley biggrin
Modifié par yaw (19 Apr 2007 - 00:41)
ça marche tjrs pas avec ça, j ai opté pour le .gif mais c dommage car j ai plus la transparence sur les cotés... Smiley decu
yaw a écrit :
ça marche tjrs pas avec ça, j ai opté pour le .gif mais c dommage car j ai plus la transparence sur les cotés... Smiley decu


le gif gère la transparence, et tout les navigateurs le prennent en compte...
Pour corriger le probleme des éléments non clicable à cause du filter, en général j'englobe ces éléments autour d'un div en position:relative. Ca suffit à corriger le problème dans la majorité des cas.
Cela dis, c'est à peu près une des solutions proposées dans le topic en lien donc j'apporte pas grand chose de nouveau :}

Dans ton cas ca donnerai :


<div id="global">
     <div class="fix">
		<div id="header"><? include('pages/header.php'); ?></div>
		<div id="center">
			<div id="content">
				<!-- PLACE D'UN FORMULAIRE -->
			</div>		
			<div id="sidebar"><? include('pages/menu.php'); ?></div>
		</div>
		<div id="footer"><? include('pages/footer.php'); ?></div>
	</div>
</div>


Avec

.fix {
position:relative;
}


ca a marché dans la majorité des cas pour moi, après faut parfois jouer encore un peu avec le z-index ou le hasLayout Smiley smile
Sujet clos
Aller à