28220 sujets

CSS et mise en forme, CSS3

[Résolu] Un float à gauche qui décalle partiellement le texte à droite

Bonjour à tous !

J'expose ici un petit problème sans gravité, mais particulièrement agaçant.

Pour commencer, une exemple de page qui pose problème :
http://www.formations-spatiales.fr/fr/formations/themes/liste.htm

Pour résumer. Sous Firefox, impeccable.
Sous IE, le texte de la partie principale de contenu se décalle légèrement à droite le long du menu de gauche.

Ce dernier est un div défini en float left.
J'ai bien essayé, réessayé, vérifié... Les marges sont bonnes, les espaces sont ok. J'ai bien tenté de mettre une bordure sous IE pour voir les différents blocks (pas de Web developper sous IE...)... Et les deux parties ne se gènent pas du tout.

Et pourtant toujours ce décallage.

Voila la feuille de style : http://www.formations-spatiales.fr/include/screen.css

Le code principal de cette partie :

<body>
<div id="conteneur">	
  	
 <h1 id="header">...</h1>

 <ul id="menu">
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
 </ul>

 <div id="gauche">
  <h2>Titre sous menu</h2>
   <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
   </ul>
 </div>
  
 <div id="contenu">
  <h2>Titre page</h2>
  <p>Blablabla</p>
 </div>

 <p id="footer">Blablabla</p>		
</div>
</body>


Si quelqu'un connait une astuce, je desespère là Smiley smile
Merci d'avance !
Modifié par Daweb (10 Jun 2005 - 14:20)
Bonjour Daweb et bienvenue à toi sur le forum Alsacréations Smiley lol

J'ai le regret de t'annoncer que tu es victime du « IE Three Pixel Text-Jog » Smiley rolleyes

Le 3px bug se termine à la base du float, donc si tu étires ce float en hauteur, le bug passera inaperçu.
Mais pour cela, tu dois connaître la hauteur du contenu adjacent.

upload/196-jog.gif

Voici une de mes pages qui présente ce bug. Smiley smile
http://www2.csduroy.qc.ca/mdc/discography.html

En éditant les sources, tu verras que j'ai ajouté (à titre d'exemple) une hauteur de 26em à mon float (première liste seulement). Ce 26em est trouvé par essais-erreurs. Il fonctionne à différentes tailles de texte.

J'espère que cette solution te convient Smiley murf
Merci beaucoup !
Comme quoi je n'étais pas complètement dingue.
Je me suis basé sur leur technique en bas de la page, et après quelques réglages, cela fonctionne Smiley smile

J'avais bien pensé comme toi à tatonner pour bien allonger eu hauteur le float, mais dans mon cas, c'est impossible, c'est trop variable.

Encore merci !
Bravo ! Il y a tout dans ce sujet ! Smiley youpi

Le « bonjour », le « merci », le code bien balisé et pour finir, le tag [Résolu] dans le titre.
Sans oublier la qualité du français Smiley smile

Un membre exemplaire ! Smiley cligne

Reviens souvent ! Smiley lol Smiley lol Smiley lol

--
Stephan
Sujet clos
Aller à