blocs CSS flottant, compatibilité IE

blocs CSS flottant, compatibilité IE - HTML/CSS - Programmation

Marsh Posté le 03-02-2006 à 17:25:47    

Chalut.
Je fais des tests de feuille de style:
http://ouafouaf9.free.fr/_WAFBLOG/ [...] ayout.html
 
La page apparait comme je le souhaite dans firefox, mais sous IE ca fait des trucs bizarres...
 
deux choses en fait:  
- pour de cas de l'article avec image flottante a droite, la bordure gauche dudit article est décallée...  
- pour les autres articles, la meme bordure de gauche déconne (s'affiche mal, avec des trous...)
 
enfin voila je sais pas du tout quoi faire!
 
les balises des articles sont:
 

Code :
  1. <div class="article">
  2.   <h1 class="article_date">3 février</h1>
  3.   <h1 class="article_title">Titre</h1>
  5.   <div class="tablenews">
  6.    <div class="floatleft"><img src="http://ouafouaf9.free.fr/dotclear/images/zik/f80256rrz9b%5B1%5D.jpg" /></div>
  7.    <div>bla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla blabla bla bla bla bla bla bla bla bla</div>
  8.    <div class="clearleft"></div>
  9.    <p class="comments">[ <a href="#">0 Commentaires</a> / <a href="#">Ajouter un commentaire</a> ]</p>
  10.   </div>
  13. </div> <!-- fin div "article" -->


 
Le CSS:  
 

Code :
  1. .article {
  2. margin: 0;
  3. margin-bottom: 30px;
  4. margin-left: 15px;
  5. padding: 0;
  6. padding-right: 260px;   /* pour compenser le menu flottant */
  7. border: 0;
  8. }
  10. h1.article_title {
  11. color: #596F80;
  12. font: 14pt/20pt Verdana, sans-serif;
  13. margin: 0;
  14. margin-bottom: 10px;
  15. }
  17. h1.article_date {
  18. color: #007D48;
  19. font: 8pt/12pt Verdana, sans-serif;
  20. margin: 0;
  21. }
  23. p.comments {
  24. font: 8pt/12pt Verdana, sans-serif;
  25. margin: 0;
  26. padding-top: 20px;
  27. padding-bottom: 5px;
  28. }
  30. div.tablenews {
  31. padding: 0;
  32. padding-left: 5px;
  33. border-left: 1px solid #596F80;
  34. border-bottom: 1px solid #596F80;
  35. }
  38. /* floatleft pour images a gauches (ajouter div class="clearleft" ) */
  40. div.floatleft {
  41. float: left;
  42. }
  44. div.clearleft {
  45. clear: left;
  46. }
  48. /* floatleft pour images a gauches (ajouter div class="clearleft" ) */
  50. div.floatright {
  51. float: right;
  52. }
  54. div.clearright {
  55. clear: right;
  56. }


 
hésitez pas à poser des questions si qquechose n'est pas clair  
 
merci  :hello:

Reply

Marsh Posté le 03-02-2006 à 17:25:47   

Reply

Marsh Posté le 03-02-2006 à 17:44:59    

Ouais pour tes trous je sais pas ...Moi aussi sur mon site, avec IE,et sur certain pc, du texte disparait/réaparait en fonction quon scroll la page...
 
Bon aprés conseil..quand on fait un site pur css, et qu'on veux pas avoir de probléme avec IE, régle one:
 
toujours mettre ça au début de son css:
* {
margin:0;
padding:0;
}
je sais pas si ça va régler le probléme, mais au moins ça va t'en éviter par la suite...

Reply

Marsh Posté le 03-02-2006 à 17:55:45    

moui, m'enfin j'ai pas besoin de ca.  
j'évite d'utiliser des trucs dont je ne suis pas sur de l'utiliter.
en loccurance avec un doctype xhtml strict et mon css, j'ai aucune marge génante. Si l'on vient me dire qu'avec tel navigateur ou telle version d'IE y a un pb de marges, alors je rajouterai ca :)
 
Sinon tu dis que tu as des bugs de disparition aussi?
dans quel contexte? parceque je comprend pas d'ou ca vient sur ma maquette.

Reply

Marsh Posté le 03-02-2006 à 18:05:33    

Ce truc n'est pas un truc...c'est pour dire à tes éléments de ne pas prendre la marge par défaut...
 
Eh oui, car aucun navigateur n'a les même CSS par défaut..Donc met le ;)
 
Après, pour les disparition, je sais pas, ça le fais sur mon pc, et pas sur celui de mes potes...(et uniquement sous IE)
 
Et là pour ta bordure...je comprenais pas ton probléme, car je voyais nickel...puis en scrollant, op disparu, donc je peux penser que l'on a le même bug...
 
Moi j'ai abandonné à chercher la cause, mais si quelqu'un sait...
Bon je pense aussi que ça viens d'une merde de mon css..Mais where...??

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed