28172 sujets

CSS et mise en forme, CSS3

[résolu] Bug "overflow: visible" sous ie6

Bonjour,

Alors voila, j'ai vu que ie6 n'interprète pas le "overflow: visible".
Une solution consiste à utiliser "overflow: hidden" avec une "position: relative".
Mon problème est que je ne peux pas utiliser de "position: relative" car mon div est en "float: left".

Quelqu'un aurait il un hack ou une autre méthode pour que ie6 simule "overflow: visible" car je n'ai rien trouvé de pertinent ?

Dommage que IE6 ait encore autant de parts de marché. Smiley fache

A vot' bon coeur msieurs dames.
Modifié par lingus (16 Feb 2008 - 14:10)
Bonjour,

Dommage surtout que CSS soit si complexe, généralement mal apprise et mal utilisée.

Mettre une page en ligne illustrant le problème rencontré (qui n'a de toutes évidences aucun rapport avec le support de la valeur visible d'overflow, mais plutôt avec une mauvaise utilisation de CSS)
Bonjour Laurent Denis,
Merci de t'interresser à mon cas. Je ne peux pas mettre en ligne pour l'instant, donc j'ai fait au plus simple pour illustrer mon problème.
Tu a raison, c'est la première fois que j'utilise "overflow: visible", donc je dois mal l'utiliser.
Mon problème est que sous FF ca marche comme je pensais que ca marche, mais sous IE6, au lieu de passer au dessus du conteneur, le div agrandi le conteneur. Merci de m'expliquer mon erreur parce que la je seche Smiley confus

Fichier CSS :

#conteneur{
	background-color:#0099FF;
	height: 25px;
	overflow: visible;
}

.test{
	height: 30px;
	width: 100px;
	background-color:#445588;
}


Fichier HTML:


<!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 href="style.css" rel="stylesheet" type="text/css">
<title>TEST</title>
</head>
<body>
	<div id="conteneur">
		<div class="test">
		</div>
	</div>
</body>
</html>

Modifié par lingus (16 Feb 2008 - 11:55)
Pour mieux illustrer le problème: j'essaye de faire des onglets en CSS et sans image. Je dois mal m'y prendre mais j'étais content du résultat sous FF.

Fichier CSS :


#tabs{
	position: relative;
	overflow: visible;
	height: 28px;
	font-size: 90%;
	width: 95%;
	margin: 10px auto 0px auto;
	background-color: #fff;
	padding: 0px 23px 0px 0px;
	z-index: 2;
}

.tab{
	margin-right: 1px;
	float: left;
	border-left: solid #999 1px;
	border-top: solid #999 1px;
	border-right: solid #999 2px;
	background-color: #eee;
}

.tab_selected{
	margin-right: 1px;
	padding: 6px 5px 5px 5px;
	float: left;
	border-left: solid #999 1px;
	border-top: solid #999 1px;
	border-right: solid #999 2px;
	background-color: #fff;
	color: #444;
	z-index: 3;
}

.tab a {
	display: block;
	padding: 5px;
	background-color: #ddd;
	color: #888;
	text-decoration: none;
}

.tab a:hover {
	display: block;
	padding: 5px;
	background-color: #eee;
	color: #666; 
	text-decoration: none;
}

#content {
	width: 95%;
	padding: 10px;
  	margin: 0px auto 0px auto;
	border-bottom: 2px #999 solid;
	border-left: 1px #999 solid;
	border-right: 2px #999 solid;
	border-top: 1px #999 solid;
	background-color: #fff;
	z-index: 1;
}


Fichier HTML:


<!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 href="style.css" rel="stylesheet" type="text/css">
<title>TEST</title>
</head>
<body>
<div id="tabs">
	<div class="tab"><a href="#">Tab archiplop</a></div>
	<div class="tab_selected">Tab bullilblob</div>
	<div class="tab"><a href="#">Tab halloween</a></div>
	<div class="tab"><a href="#">Tab supertab</a></div>
	<div class="tab"><a href="#">Tab aloha</a></div>
	<div class="tab"><a href="#">Tab plop</a></div>
	</div>
	<div id="content">
		ceci est du contenu
	</div>
</body>
</html>

Modifié par lingus (16 Feb 2008 - 12:09)
Bonjour,

lingus a écrit :
Je dois mal m'y prendre

Oui. Figer la hauteur en pixels n'est pas un moyen fiable de faire déborder tes onglets sur le conteneur en dessous, même sans considérer le problème avec IE6 (qui tient à l'implémentation erronée de height par IE6, et pas à celle de overflow: visible, qui est d'ailleurs la valeur par défaut...).

Voici un exemple corrigé:
<!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" />
	<title>Test</title>
	<style type="text/css" media="screen">
	ul#tabs{
		position: relative;
		top: 1px;
		width: 95%;
		margin: 10px auto 0px auto;
		padding: 0;
		list-style: none;
		font-size: 90%;
	}
	ul#tabs li {
		float: left;
		margin: 0 1px 0 0;
		padding: 0;
	}
	ul#tabs li a {
		display: block;
		padding: 5px;
		border: solid #999;
		border-width: 1px 2px 0 1px;
		background: #ddd;
		text-decoration: none;
		color: #888;
	}
	ul#tabs li a:hover,
	ul#tabs li a:focus {
		background: #eee;
		color: #666;
	}
	ul#tabs li.selected a {
		padding: 5px 5px 6px 5px;
		background: white;
		color: #444;
	}
	#content {
		clear: left;
		width: 95%;
		padding: 10px;
		margin: 0px auto 0px auto;
		border: solid #999;
		border-width: 1px 2px 2px 1px;
		background: white;
	}
	</style>
</head>

<body>

<ul id="tabs">
	<li><a href="#">Tab archiplop</a></div>
	<li class="selected"><a href="#">Tab bullilblob</a></div>
	<li><a href="#">Tab halloween</a></div>
	<li><a href="#">Tab supertab</a></div>
	<li><a href="#">Tab aloha</a></div>
	<li><a href="#">Tab plop</a></div>
</ul>
<div id="content">
	ceci est du contenu
</div>

</body>
</html>

Testé sous Firefox 2 et 3, Internet Explorer 5.5, 6 et 7.
Un grand merci pour la correction et les éclaircissements Florent V.
Modifié par lingus (16 Feb 2008 - 14:10)
Sujet clos
Aller à