Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1707 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  blocs CSS flottant, compatibilité IE

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

blocs CSS flottant, compatibilité IE

n°1298719
gnarky
Sac à puces
Posté le 03-02-2006 à 17:25:47  profilanswer
 

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>
  4.   <div class="tablenews">
  5.    <div class="floatleft"><img src="http://ouafouaf9.free.fr/dotclear/images/zik/f80256rrz9b%5B1%5D.jpg" /></div>
  6.    <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>
  7.    <div class="clearleft"></div>
  8.    <p class="comments">[ <a href="#">0 Commentaires</a> / <a href="#">Ajouter un commentaire</a> ]</p>
  9.   </div>
  10. </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. }
  9. h1.article_title {
  10. color: #596F80;
  11. font: 14pt/20pt Verdana, sans-serif;
  12. margin: 0;
  13. margin-bottom: 10px;
  14. }
  15. h1.article_date {
  16. color: #007D48;
  17. font: 8pt/12pt Verdana, sans-serif;
  18. margin: 0;
  19. }
  20. p.comments {
  21. font: 8pt/12pt Verdana, sans-serif;
  22. margin: 0;
  23. padding-top: 20px;
  24. padding-bottom: 5px;
  25. }
  26. div.tablenews {
  27. padding: 0;
  28. padding-left: 5px;
  29. border-left: 1px solid #596F80;
  30. border-bottom: 1px solid #596F80;
  31. }
  32. /* floatleft pour images a gauches (ajouter div class="clearleft" ) */
  33. div.floatleft {
  34. float: left;
  35. }
  36. div.clearleft {
  37. clear: left;
  38. }
  39. /* floatleft pour images a gauches (ajouter div class="clearleft" ) */
  40. div.floatright {
  41. float: right;
  42. }
  43. div.clearright {
  44. clear: right;
  45. }


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

mood
Publicité
Posté le 03-02-2006 à 17:25:47  profilanswer
 

n°1298736
xtof_83
Freeride Spirit
Posté le 03-02-2006 à 17:44:59  profilanswer
 

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...

n°1298742
gnarky
Sac à puces
Posté le 03-02-2006 à 17:55:45  profilanswer
 

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.

n°1298749
xtof_83
Freeride Spirit
Posté le 03-02-2006 à 18:05:33  profilanswer
 

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...??


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  blocs CSS flottant, compatibilité IE

 

Sujets relatifs
utilisation CSS[CSS] padding & background de TD
Mauvais affichage d'une CSS sous Firefox mais ok sur I.ExpIE vs firefox, BUG de CSS!! help ???
Comment récupérer la résolution d'une page en CSS/PHP ?[CSS] Masquer le <hr /> ?
compatibilité mozilla et IE avec 2CSSDécalage CSS sous I.E. [exemple inside]
Document pour aide CSSDeux erreurs de placement CSS !!
Plus de sujets relatifs à : blocs CSS flottant, compatibilité IE


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR