[HTML-CSS] Problème de DOCTYPE

Problème de DOCTYPE [HTML-CSS] - HTML/CSS - Programmation

Marsh Posté le 09-08-2006 à 22:55:14    

hello  :hello:  
 
je suis confronté à un problème de Doctype. J'ai choisi d'utiliser XHTML strict 1.1. Et je tiens à etre valide dans ce sens. (et je précise aussi que je veux me passer de js pour l'instant)
 
j'ai un script css (inspiré de cssplay.co.uk) qui fait une sorte de "zoom" sur une image.
 
le problème est le suivant :  
sous IE, ca marche comme je veux. c'est à dire que le zoom est centré sur l'image.
sous firefox :
-> si le doctype est déclaré, l'image se décale vers le haut, je ne comprends pas pourquoi.
-> si le doctype n'est pas déclaré, ca passe
 
sous opéra, dans tous les cas, ca merde.
 
le html :  

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6. <title>Index page de test</title>
  8. <link href="css/style3.css" rel="stylesheet" type="text/css" />
  10. </head>
  11. <body>
  12. <div class="raised">
  13.  <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
  14.  <div class="boxcontent">
  15.   <a href="#"><img alt="img" src="./images/petitlion.jpg" /></a>
  16.   <h4><span class="titre">toto</span></h4>
  17.   <p class="desc_courte">
  18.    avec doctype<br />
  19.    bla<br />
  20.    bla<br />
  21.   </p>
  22.  </div>
  23.  <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
  24. </div>
  25. </body>
  26. </html>


 
le css :

Code :
  1. .raised {background: transparent; width:487px;  margin:10px 30px 10px 0px; float:right;display:inline;}
  2. .raised .boxcontent {
  3. display:block;
  4. background:#FBFBE5;
  5. border-left:1px solid #fff;
  6. border-right:1px solid #999;
  7. padding:5px 10px;
  8. height: 90px;
  9. text-align: left;
  10. }
  11. .raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
  12. .raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
  13. .raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
  14. .raised .b2 {background:#FBFBE5; border-left:1px solid #fff; border-right:1px solid #eee;}
  15. .raised .b3 {background:#FBFBE5; border-left:1px solid #fff; border-right:1px solid #ddd;}
  16. .raised .b4 {background:#FBFBE5; border-left:1px solid #fff; border-right:1px solid #aaa;}
  17. .raised .b4b {background:#FBFBE5; border-left:1px solid #eee; border-right:1px solid #999;}
  18. .raised .b3b {background:#FBFBE5; border-left:1px solid #ddd; border-right:1px solid #999;}
  19. .raised .b2b {background:#FBFBE5; border-left:1px solid #aaa; border-right:1px solid #999;}
  22. .raised .b1 {margin:0 5px; background:#fff;}
  23. .raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
  24. .raised .b3, .raised .b3b {margin:0 2px;}
  25. .raised .b4, .raised .b4b {height:2px; margin:0 1px;}
  26. .raised .b1b {margin:0 5px; background:#999;}
  28. .boxcontent a img {
  29. width:120px; height:90px;
  30. border:0;
  31. position: absolute;
  32. z-index: 50;
  33. }
  34. .boxcontent a:hover {
  35. position:relative;
  36. }
  38. .boxcontent a:hover img {
  39. width:130px; height:100px;
  40. position:absolute;
  41. left:-5px; top:-5px;
  42. border:0;
  43. z-index: 100;
  44. margin:0px;
  45. padding:0px;
  47. }
  48. .boxcontent h4{
  49. margin: 0px 0px 5px 130px;
  50. border-bottom: 1px solid #6878C6;
  51. font-weight: bolder;
  52. color: #6878C6;
  53. }
  54. .boxcontent .desc_courte{
  55. margin: 0px 0px 0px 130px;
  56. }


 
un exemple est visible ici :
http://nabbo.free.fr/avec.html -> avec doctype
http://nabbo.free.fr/sans.html -> sans doctype
 
voilà, je demande des avis éclairés, parce que là je ne suis plus...
:jap:

Reply

Marsh Posté le 09-08-2006 à 22:55:14   

Reply

Marsh Posté le 10-08-2006 à 00:02:52    

Hello,
 
Je te décris ci-dessous ce qui m'a amené à une solution correcte sur IE FF et opéra, mais je n'ai pas vraiment d'explication fondée à te fournir:
 
D'abord, j'ai décidé de donner le top:0 et left: 0 à .boxcontent a img pour voir si cela changeait quelque chose vu le problème de positionnement:

.boxcontent a img {
width:120px; height:90px;
border:0;  
top:0;
left:0;
position: absolute;
z-index: 50;
}


On retrouve ton image tout en haut gauche du navigateur...
 
Donc je cherche le référent pour se positionnement absolu et là, je vois que c'est le a:hover. Je décide de l'attribuer, plus logiquement à a tout seul, soit:

.boxcontent a {
position:relative;
}


à la place de a:hover
 
Ceci remet l'image à une place plus logique, néanmoins différente de celle de IE, mais vraisemblablement la même que sur Opéra. Soupçonnant un problème de line-height ou du genre, je décide de passer le a en display:block:

.boxcontent a {
position:relative;
display:block;
}


 
Bingo, ça marche sur FF et Opéra. Reste à règler le pb du hover qui ne marche plus sur IE. ça c'est un bug que je connais; il suffit de rajouter une propriété bidon à a:hover du genre:

.boxcontent a:hover {
border-width:0;
}


 
Bref, pas d'explication logique à ton pb de doctype, mais une solution qui devrait fonctionner :)


Message édité par Pitsy le 10-08-2006 à 00:03:53
Reply

Marsh Posté le 10-08-2006 à 00:14:11    

:love:  
et en plus ca marche !!!
 
 :love:  
et même sous opéra...
 
et ca a l'air valide css (j'ai pas testé, je verrai ça demain)
 
merci beaucoup, Pitsy
 
:jap:
 
edit : et pour le Doctype... ça m'empêchera pas de dormir...  ;)


Message édité par nabbo le 10-08-2006 à 00:15:03
Reply

Sujets relatifs:

Leave a Replay

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