28172 sujets

CSS et mise en forme, CSS3

Bonjour

J'en appel aux grands sages d'alsacréations car là je sèche :
J'ai créé un div qui apparait au rollover d'une image via Jquery
bon pas de probleme sous les navigateurs récents, par contre coté IE7 le comportement merdoit
la page d'exemple : http://www.rom1.fr/PXL
aller sur les images ENERGIE et GRAND ROULEMENT

le probleme : le rollover devrait tenir sur toute la surface des infos car je dois rajouter un "en savoir plus" à la fin. Mais lorsque le curseur passe au dessus des titres H1 et H2 du contenu le rollover devient "rollout"
PS : je rappel que tout fonctionne sous IE8 et FF c'est juste sous IE7 que ca BUG (et pour le coup mon client est sous ie7 biensur !!! teuhhh

le CSS :
#entrer{
	margin:159px 0 0 243px;
	float:left;
	position: absolute;
}
.energie{position:absolute;float:left;}
.grandroulement{position:absolute;float:left; margin-left:130px; }
#box_blue{ 	color:#000; font-size:10px; position:relative; float:left; width:329px; margin:-3px 0 0 0px;}
#box_blue_centre{
	background-image:url(img/box_blue_centre.gif);
	background-repeat:repeat-y;
		margin-top:-2px;
	padding:0 10px 0 10px;}
#box_blue_centre p{ margin:0px 0 6px 0;}
#box_blue_footer { background-image:url(img/box_blue_bottom.gif); height:35px; margin-top:-12px;}

#box_fushia{
	color:#000; font-size:10px;	position:relative; float:left;width:329px; margin:-3px 0 0 0px;	}
#box_fushia_centre{
	background-image:url(img/box_fushia_centre.gif);
	background-repeat:repeat-y;
	margin-top:-2px;
	padding:0 10px 0 10px;}
#box_fushia_centre p{ margin:0px 0 6px 0;}
#box_fushia_footer { background-image:url(img/box_fushia_bottom.gif); height:35px; margin-top:-12px;}


le HTML
<div id="entrer">
 <div class="energie">
 <a href="#"><img src="img/energie.gif" width="116" height="25" style="margin-right:15px;" border="0"/></a>
 <div id="box_blue"><strong><img src="img/box_blue_top.gif" width="329" height="30" /></strong>
  <div id="box_blue_centre" class="toggler"><p><strong>Notre exigence et notre implication dans toutes les étapes du processus d’étanchéité nous a permis de devenir le partenaire privilégié des plus importants constructeurs d’Europe</strong></p>
   <p> <span style="color:#FFF">+</span> De l’expertise à la conception<br />
    <span style="color:#FFF">+</span> Expertise et installation sur site<br />
    <span style="color:#FFF">+</span> <strong>La méthode MD WAY™ :</strong><br />
&nbsp;&nbsp;&nbsp;Jonction par vulcanisation sur site</p>
   <div style="background: url(img/box_blue_bar.gif); background-repeat:no-repeat; height:2px;margin:2px 0 6px 0;"></div><strong>Nos clients : </strong>ADAMS AG • ALSTOM - Power Hydro • ANDRITZ - Hydro • CNR - Compagnie National du Rhône • EDF- Electricité de France - Hydro Power • FTC - Flow Control Technologies, TYCO Group • HYDRO EXPLOITATION SA • LITOSTOJ POWER, CIMOS Group • SBM OFFSHORE GROUP </div>
  <div id="box_blue_footer"></div></div></div>

<div class="grandroulement">
 <a href="#" ><img src="img/grandroulement.gif" width="198" height="25" border="0"/></a>
 <div id="box_fushia"><strong><img src="img/box_fushia_top.gif" width="329" height="30" /></strong>
  <div id="box_fushia_centre" class="toggler">
    <p><strong>Plus les  contraintes sont lourdes et plus les réponses en termes d’étanchéité  sont spécifiques.</strong></p>
<p> <span style="color:#FFF">+</span> De l’expertise à la conception<br />
  <span style="color:#FFF">+</span> Expertise et installation sur site<br />
  <span style="color:#FFF">+</span> La jonction par vulcanisation</p>
  <img src="img/box_fushia_bar.gif" width="302" height="2" style="margin:2px 0 6px 0;"/>
   <strong>Nos clients : </strong>DEFONTAINE GROUP – Rings • NFM TECHNOLOGIES • ROTHE ERDE GMBH • SKF - Bearings • THALES  </div>
  <div id="box_fushia_footer"></div></div></div></div>
</div>


...

<div id="content"><h1>PXL SEALS</h1>
<h2>Expertise, Etude, Conception, Fabrication, 
Distribution et Montage des systèmes d'étanchéité pour :</h2>


Merci d'avance pour aide
Modifié par rom1_ComUnik (10 Aug 2010 - 11:25)