28173 sujets

CSS et mise en forme, CSS3

[résolu] N-ième bug d'affichage avec IE

Bonjour à toutes et à tous!

J'ai un soucis sur un menu horizontal fait avec des images survolées. IE me met une marge au dessus de chaque bouton par rapport au bouton précédent. (cf capture)

CODE HTML :

<ul id="menu">
			<li><a id="lien_accueil" href="./index.php">Accueil</a></li>
			<li><a id="lien_nature" href="./nature.php">Nature</a></li>
			<li><a id="lien_voyages" href="./voyages.php">Voyages</a></li>
			<li><a id="lien_bagage" href="./bagage.php">Le bagage</a></li>
			<li><a id="lien_livre" href="./livre.php">Livre d'or</a></li>
			<li><a id="lien_liens" href="./liens.php">Liens</a></li>
		</ul>


CODE CSS:

#menu {
	padding-top: 80px;
	padding-left: 75px;
}

#menu a {
	display: block;
	padding-top: 28px;
	height: 0px;
	overflow: hidden;
	float: left;
	margin-right: 10px;
}

#lien_accueil { width: 66px; background: url(../images/boutonAccueil.jpg) no-repeat 0 0;}
#lien_accueil:hover {background: url(../images/boutonAccueil.jpg) no-repeat 0 -29px;}


Merci d'avance de votre aide!

Olivier. upload/3925-capture.jpg
Modifié par mad_shreder (31 Mar 2006 - 12:24)
Yeaaaah! Tout bête et çà marche. Nickel.

Autre problème dont je connais l'origine (gestion des marges et du float par IE) mais je ne trouve pas de solutions alternative : il s'agit d'un bloc flottant à droite auquel je met une marge à droite pour coller à mon image de fond du body. IE me double cette marge...

Autre problème au même endroit: le coin en bas à gauche qui possède une marge en dessous que je ne comprends pas.

CODE HTML :

<div id="corps">
		<div id="menu_oiseaux">
			<p>ukyfghkh</p>
			<p>ukyfghkh</p>
			<p>ukyfghkh</p>
			<p>ukyfghkh</p>
			<img id="coinMenuOiseaux" src="./images/coinMenuOiseaux.jpg" alt="" />
		</div>
...


CODE CSS :

#menu_oiseaux {
	background-color: #A5BED1;
	width: 173px;
	float: right;
	margin-right: 11px;
}

#coinMenuOiseaux {
	float: left;
}

Modifié par mad_shreder (27 Mar 2006 - 18:25)
Pour la double marge, ajouter display:inline; :
#menu_oiseaux {
	display: inline;
	float: right;
	background-color: #A5BED1;
	width: 173px;	
	margin-right: 11px;
}
Pour en savoir plus, cf : http://www.positioniseverything.net/explorer/doubled-margin.html

Concernant l'image, je pense tu peux remplacer le float:left; par display:block; 
#coinMenuOiseaux {
	display: block;
}


Bonne soirée
Modifié par Alan (27 Mar 2006 - 17:50)
Alan, t'es un as !! Smiley biggrin

Ah!! Autre chose encore hé hé Smiley lol

Je veux placer un petit png tout en bas du body, fixé. Cà marche avec firefox ; IE me fait n'importe quoi (mériterait trois paires de claques celui-là).

CODE HTML:

<body>

<img id="oiseauBas" src="./images/oiseauBas.png" alt="" />

<div id="global">
...


CODE CSS:

#oiseauBas {
	position: fixed;
	bottom: 0;
	margin-left: 300px;
}


C'est la dernière promis ! Smiley cligne upload/3925-capture.jpg
Modifié par mad_shreder (27 Mar 2006 - 18:24)
IE 6 et inférieurs ne supportent pas la position fixe. Mais il y a une astuce qui consiste à passer par une div à 100% de hauteur en overflow:auto; et d'imiter le position fixe via le positionnement absolu
Etant donné que les autres navigateurs prennent en charge la position fixe, je te conseille de n'utiliser cette astuce qu'en commentaire conditionnel (qui permet d'adresser du code uniquement à IE). Et seulement pour IE<7 puisque IE 7 supportera cette position.
Tu laisseras donc dans la feuille de style normale la position:fixed; et le bottom:0 etc..

Il faudrait une feuille de style séparée qui serait appelée à l'intérieur de ce commentaire conditionnel placé après le lien vers la feuille de style normale :
<!--[if lte IE 6]>
	<link href="IElte6.css" rel="stylesheet" type="text/css" />
<![endif ]-->
et dans cette feuille de style le code suivant :
html, body {	
	height: 100%;
	overflow: hidden;
	margin: 0;
}
#global {
	height: 100%;
	position: relative;
	overflow: auto;
} 
#oiseauBas {
	position: absolute;
}

Dans le <body> il faudra ajouter cette div#global (ou d'un autre nom puisque je vois que tu en as déjà une de ce nom )qui englobera tout sauf l'élément que tu veux "fixer" (à mettre avant ou après). 
<body>
<div id="global">
</div>
<div id="oiseauBas"><img  src="./images/oiseauBas.png" alt="" /></div>
</body>
Et voilà, c'est tout.
Modifié par Alan (27 Mar 2006 - 20:30)
Incroyable, çà marche!!! Bon mon png n'est pas transparent et l'apparition d'une barre de défilement me décalle mon menu mais c'est une autre histoire!! Smiley murf

Encore merci! Smiley biggrin
Sujet clos
Aller à