Marge introduite par clear:both [résolu]

Bonjour,

j'essaie de faire une navigation par onglet. Le pb c'est qu'il y un espace qui apparait dans IE, entre la nav et le contenu de l'onglet.

FX

IE


Mon code :

<ul class="nav_onglets">	
			<li id="nav_onglets_act">
				<div>
					<img src="images/cornerHG_act.gif" alt="" class="onglet_coinG" />
					<img src="images/cornerHD_act.gif" alt="" class="onglet_coinD" />
				</div>
				<a href="#">Infos générales</a>
			</li>
			<li>
				<div>
					<img src="images/cornerHG.gif" alt="" class="onglet_coinG" />
					<img src="images/cornerHD.gif" alt="" class="onglet_coinD" />
				</div>
				<a href="#">Représentants</a>
			</li>
		</ul>
	
		<div class="onglet_content">
contenu contenu contenu contenu contenu contenu contenu contenu
</div>

.nav_onglets li{float:left; background:#B3AC9A;margin-right:6px; padding-bottom:8px;}
.nav_onglets li div{position:relative; padding-top:8px;}
.nav_onglets li a{color:#fff; font-family:Tahoma, Arial, sans-serif; font-weight:bold; padding:10px;}
.nav_onglets #nav_onglets_act{background:#F5F2EB;}
.nav_onglets li#nav_onglets_act a{color:#61410E;}
.onglet_coinG{position:absolute; left:0px; top:0;}
.onglet_coinD{position:absolute; right:0; top:0; /*_right:-1px;*/}
.onglet_content{background:#F5F2EB; clear:both;}

J'ai l'impression que c'est le clear:both qui introduit cette marge, quelqu'un aurait une idée là-dessus ?

Merci
Modifié par bill_baroud (26 Mar 2007 - 18:44)

Bonjour, ton problème est peut être du au layout avec IE.

Pour savoir si c'est cela , teste ton code a rajoutant une hauteur explicite au style de ta balise li, mais minime , genre 1px, ou 1 % )....

Salut Bill
Essaye peut-être .nav_onglets{height:1%}.
j'ai eu une fois ce probléme, je l'ai résolu mais je ne sais plus comment, il me semble comme ça...

Par contre la méthode pour tes onglets c'est pas super, tes coins arrondis étant de la présentation il faut les gérer par css:

<li id="nav_onglets_act">
<a href="#"><span>Infos générales</span></a>
</li>

.nav_onglets li a{background: #color url(coins_left} no-repeat top left;
.nav_onglets li a span{background: url(coins_right} no-repeat top right;

En plus comme ça tu peux même rendre l'onglet actif au hover

Salut Rose Grenouille, alors tu marques des point contre le hasslayout?
Modifié par matmat (26 Mar 2007 - 18:28)

Merci pour vos réponses,

en fait j'ai corrigé le pb en supprimant un margin-top: 10px que j'avais affecté au <ul>. Je ne comprends pas le pourquoi du comment, m'enfin ça marche....

Pas mal matmat ton système d'onglets, j'adopte

<incursion dans une discussion d'un tiers très bien identifié>

a écrit :
Salut Rose Grenouille, alors tu marques des point contre le hasslayout?

Hum si le layout était tétris , je serais a peu près au niveau 8 ( mais je sais pas combien ya de niveaux c'est ca le problème...)

RoseGrenouille s'écrit tout attaché , c'est un peu comme le "s" d'alsacréations , que veut tu on a tous nos déviations mentales .....

</incursion dans une discussion d'un tiers très bien identifié>
Modifié par RoseGrenouille (26 Mar 2007 - 21:43)