sh4dox

Bonjour à tous chez ami collègue !

J'ai essayé cette petite technique qui sur le coup m'a parru tres ingénieuse ! malheureusement apres réflexion, j'ai observé une incompatibilité avec notre cher IE...

Vous allez me dire : "normal est toujours là pour nous faire chier !"

Que ferait on sans IE !

Enfin bref :

Mon CSS :

h1
{   
margin: 4px 0 0 10px; 
color: #7d7d7d;	
font-size: 0.9em;
}
a  img
{
border: none;
}
img.center
{
display: block;
margin-left: auto;
margin-right: auto 
}
#gauche
{
float: left;
width: 197px;
}
.g_titre
{
position: absolute;
float: left;
width: 197px;
height: 22px;
background-image: url("images/g_titre.png");
background-repeat: no-repeat;
}
#g_menu {
list-style-image: url("images/fleche.gif");
margin: 0;
padding: 0;
}
#g_menu ul {
margin-top: 5px;
}
#g_menu li {
margin-bottom: 10px;
margin-left: 28px;
line-height: 5px;
}
#g_menu a {
margin: 0 2px;
color: #282828;
font-size: 0.8em;
text-decoration: none;
}
#g_menu a:hover {
text-decoration: none;
color: #4472b2;
font-size: 0.9em;
}

Mon HTML :

<ul id='g_menu'>
<div class="g_titre">
<h1>Informations diverses</h1>
</div><br /><br />
<li><a href='#'>lien 1</a></li>
<li><a href='#'>lien 1</a></li>
</ul>
<div>
<a href="#">
<img class="center" src="images/ban.png" alt='image' title='image' /></a>
<br />
</div>

Ce code marche à la perfection sous FIREFOX et le cauchemard commence sous ie !

La solution temporaire que j'ai utilisé c'est de placer manuellement les images avec une margin-left: 5px; mais sa m'amuse de me compliquer la vie

Merci de vos illuminations...