padding non interprété sur IE & interprété sur Firefox

padding non interprété sur IE & interprété sur Firefox - HTML/CSS - Programmation

Marsh Posté le 16-08-2004 à 18:53:02    

salut à tous.
 
le css:

Citation :

div#principal {
     position: absolute;
     height: 100%;
     width: 800px;
     left: 50%;
     margin-left: -400px;
     border: 2px solid #6367F0;
     padding: 0
     }  
 
img#photo {
    display: block;
    padding: 2px;
    margin: 0px;
    border: 1px solid #6367F0
    }


 
le xhtml 1.1:
 

Citation :

<body style="margin: 0; padding-top: 1px; padding-bottom: 1px; border: 0">
<div id="principal">
<img id="photo" src="moi1.png" width="150" height="200" alt="Photo de moi" style="" />
</div>


 
sur IE, le padding en gras rouge n'est absolument pas interprété alors que sur Firefox tout est ok.
que faire pour avoir le même résultat?
 
je peux, si ça peut vous aider à comprendre, screenshoter le résultat IE puis le résultat Firefox


Message édité par thwz le 16-08-2004 à 19:03:08
Reply

Marsh Posté le 16-08-2004 à 18:53:02   

Reply

Marsh Posté le 16-08-2004 à 19:12:27    

Internet Explorer:
http://thwz.free.fr/IE.png
 
 
 
Firefox:
http://thwz.free.fr/firefox.png

Reply

Marsh Posté le 17-08-2004 à 09:51:44    

Salut  :hello:  
 
je débute en CSS mais pour les ID ce n'est pas plutôt :

Citation :

#principal {
    position: absolute;
    height: 100%;
    width: 800px;
    left: 50%;
    margin-left: -400px;
    border: 2px solid #6367F0;
    padding: 0
    }  
 
#photo {
   display: block;
   padding: 2px;
   margin: 0px;
   border: 1px solid #6367F0
   }


 
au lieu de :

Citation :

div#principal {
    position: absolute;
    height: 100%;
    width: 800px;
    left: 50%;
    margin-left: -400px;
    border: 2px solid #6367F0;
    padding: 0
    }  
 
img#photo {
   display: block;
   padding: 2px;
   margin: 0px;
   border: 1px solid #6367F0
   }


 
 [:fafane84]


Message édité par fafane84 le 17-08-2004 à 09:53:36

---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 17-08-2004 à 11:28:53    

sinon tu peux sans doute être sauvé pas hspace et vspace comme attributs de ton img mais je crois que c'est déprecié.
 
Maintenant je penses aussi que le code de ton css est un peu bizarre :/

Reply

Marsh Posté le 17-08-2004 à 11:37:38    

Evite le XHTML 1.1 pour faire du HTML
>>> http://www.w3.org/TR/xhtml-media-types/#summary
 
[edit]
Précision :
le XHTML 1.1 ne doit pas être utilisé avec le type de média text/html,
mais avec application/xhtml+xml (non supporté par certains navigateurs).
[/edit]


Message édité par pierre6020 le 17-08-2004 à 11:52:56
Reply

Marsh Posté le 17-08-2004 à 11:56:38    


 
Ah bon ???
 
Pour une page HTML que vaut-il mieux une validation HTML 4.01 Transitional ou une validation XHTML 1.0 Transitional ?
 
Peux-tu m'en dire plus sur ce sujet car je n'ai pas compris grand chose à tes liens je suis nul en anglais.
 
De plus à l'heure actuelle je crée un site qui est validé HTML 4.01 Transitional et je suis en train de la modifier pour le valider en XHTML 1.0 Transistional pensant que c'était mieux.
 
Mais d'après ton post tu me mets un gros doute.


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 17-08-2004 à 12:01:49    

http://www.blog-and-blues.org/webl [...] -pour-rien
 
1.0 c'est bon ;)


Message édité par pierre6020 le 17-08-2004 à 12:02:28
Reply

Marsh Posté le 17-08-2004 à 12:06:02    


 
C'est bon OK, mais est-ce que c'est mieux que le HTML 4.01 ?


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 17-08-2004 à 12:11:46    

C'est à toi de voir,
moi je dirais oui,
ca sépare strictement le contenu de la presentation,
c'est plus clair et plus strict,
 
Après regarde le site d'Eric Meyer :
http://validator.w3.org/check?verb [...] erweb.com/
 
Comme quoi CSS ne veut pas toujours dire XHTML :)

Reply

Marsh Posté le 17-08-2004 à 12:39:55    

en réponse à ze-angel: en quoi mon code css a l'air bizarre???
sinon merci de ta réponse je vais essayer ça tout de suite
 
en réponse à pierre6020:
je ne comprends pas. tu veux dire que, si je veux du XHTML 1.1 (j'ai regardé le tableau du w3c), je dois abandonner css & avoir recours à d'autres méthodes comme celle ci?
http://www.w3.org/1999/06/REC-xml-stylesheet-19990629/
 
Peux-tu m'indiquer les méthodes à suivre?
De plus, je ne tiens absolument pas à faire du HTML 4.01 Transitional, car je me fais un petit site perso pour m'exercer, et je préfère employer les dernières spéficications... mais apparemment je les utilise mal :D
 
je ne comprends pas, parce que le contenu est séparé de son style (css)... si tu fais allusion aux styles déclarés dans body, je comptais de toute façon les transférer dans la feuille de style après.
 
en réponse à fafane84:
il me semble que l'on peut utiliser élément#id , je ne sais pas si c'est valide mais en tout cas ça marche ;)

Reply

Marsh Posté le 17-08-2004 à 12:39:55   

Reply

Marsh Posté le 17-08-2004 à 13:06:53    

Je ne peux pas trop d'aider plus en XHTML 1.1,
je ne m'y suis pas trop interessé pour le moment,
mais de toute façon ce n'est pas supporté en tant que tel par IE par exemple.
C'est vu comme du HTML.
C'est pour ça que ça passe (pour le moment).
 
Fais du XHTML 1.0 strict, c'est très bien.
 
"parce que le contenu est séparé de son style (css)"
>>Ce que je veux dire, c'est que par exemple, la balise <font> est interdite,
ou encore la balise <b> ou <i> (ne pas confondre avec <bold> et <em> ).
Tout ce qui est de l'ordre de la présentation ne doit pas se trouver dans ta page.
Laisse ta css en entete si tu veux,
quoique ce principe soit en contradiction avec la définition du xHTML.

Reply

Marsh Posté le 17-08-2004 à 13:12:55    

ma feuille de style est externe :??: elle n'est pas dans le head. tandis qu'au style de body, je comptais comme je l'ai dit le transférer dans la feuille...
pour <font> et <b>, <div> & une classe .gras en CSS fera l'affaire...
je vois ce que tu veux dire, que sans la feuille de style, il ne reste plus que le contenu... mais j'avais compris dans ta réponse que l'utilisation de CSS combiné à XHTML 1.1 était déconseillée. Est-ce que c'était bien ce que tu voulais dire?

Reply

Marsh Posté le 17-08-2004 à 13:17:44    

pierre6020 a écrit :


(ne pas confondre avec <bold> et <em> ).


bas <bold>, ca n'existe pas en xhtml, <strong> (qui par défaut est effectivement en gras)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 17-08-2004 à 13:32:20    

Masklinn a écrit :

bas <bold>, ca n'existe pas en xhtml, <strong> (qui par défaut est effectivement en gras)


[:anathema] désolé...
Pas "bas", pas.(et toc ;) )
 
thwz>>oui c'est ça.

Reply

Marsh Posté le 17-08-2004 à 13:55:22    

après avoir lu ça
http://www.blog-and-blues.org/webl [...] -pour-rien
je crois que je vais finalement faire du xhtml 1.0.
 
pour ceux qui s'y connaissent: est-ce que cette fois le css est autorisé? merci de votre réponse
 
autre question: est-ce qu'on va devoir attendre 2006 pour que Longhorn et par conséquent IE7 sorte (il me semble) pour  pouvoir faire du XHTML 1.1?

Reply

Marsh Posté le 17-08-2004 à 13:59:55    

Citation :

est-ce que cette fois le css est autorisé?


Oui.

Citation :

est-ce qu'on va devoir attendre 2006 pour que Longhorn et par conséquent IE7 sorte (il me semble) pour  pouvoir faire du XHTML 1.1?


Je ne peux pas te répondre, je ne connais pas assez XHTML1.1 pour ça,
je ne connais pas non plus les spécifications d'IE7.

Reply

Marsh Posté le 17-08-2004 à 14:09:17    

dernière question sur XHTML1.0:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
est-ce que "en" désigne la langue du document?
si oui, puis-je donc le remplacer par
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

Reply

Marsh Posté le 17-08-2004 à 14:12:56    

ze-angel a écrit :

sinon tu peux sans doute être sauvé pas hspace et vspace comme attributs de ton img mais je crois que c'est déprecié.


 
L O L je viens de tester ta solution, et je me rends compte que vspace et hspace correspondent plutôt à margin, or ce n'est pas ce que je veux, c'est le padding qui m'intéresse :s
donc si vous avez la solution n'hésitez pas à poster


Message édité par thwz le 17-08-2004 à 14:13:53
Reply

Marsh Posté le 17-08-2004 à 14:13:44    

pierre6020 a écrit :

[:anathema] désolé...
Pas "bas", pas.(et toc ;) )


 [:totoz]  
me suis fait ouner :cry:  
 
xhtml 1.0 marche très bien avec les CSS (1 ou 2)
 

thwz a écrit :

dernière question sur XHTML1.0:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
est-ce que "en" désigne la langue du document?
si oui, puis-je donc le remplacer par
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">


si je me plante pas, oui, faudrait vérifier les specs juste au cas ou


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 17-08-2004 à 14:15:58    


 
http://www.w3.org/TR/xhtml1/

Citation :

C.7. The lang and xml:lang Attributes
 
Use both the lang and xml:lang attributes when specifying the language of an element. The value of the xml:lang attribute takes precedence.


 
donc oui?

Reply

Marsh Posté le 17-08-2004 à 14:18:40    

mmm... allez, oui!

Reply

Marsh Posté le 17-08-2004 à 14:20:22    

Reply

Marsh Posté le 17-08-2004 à 14:29:14    

toujours pas de réponse à mon problème? :( (celui de tout en haut j'ai largement dévié de la vraie question durant le topic mais maintenant c'est celle ci qui me retracasse)
 
le padding de 2px qui ne s'affiche pas sur IE... comment faire??!?

Reply

Marsh Posté le 17-08-2004 à 14:52:35    

Pourquoi tu ne joues pas sur la marge plutôt que sur la padding (ce qui paraîtrait d'ailleurs plus logique soit dit en passant) ?

Reply

Marsh Posté le 17-08-2004 à 15:03:02    

j'ai enfin trouvé la solution! je me demande d'ailleurs pourquoi je n'y ai pas pensé tout de suite  :pt1cable:  
voilà: ça consiste à entouré l'image d'un div de même taille, et de placer la bordure sur ce div, puis de jouer avec le padding de ce div, qui ne pose pas de problème à IE. le code donne donc:
 
XHTML 1.0:

Code :
  1. <body>
  2. <div id="principal">
  3. <div class="photo">
  4. <img class="photo" src="moi1.png" alt="Photo de moi" />
  5. </div>
  6. </div>
  7. </body>


 
CSS:

Code :
  1. img.photo {
  2.    padding: 0px;
  3.    margin: 0px;
  4.    display: block;
  5.    width: 150px;
  6.    height:200px }
  7. div.photo {
  8.    padding: 2px;
  9.    margin:0px;
  10.    border: 1px solid #6367F0;
  11.    width: 150px;
  12.    height:200px }


le div#principal n'a pas changé.
 
grace à ce code celà donne le résultat affiché par Firefox plus haut, mais également sur IE.
 
merci à vous pour toutes vos réponses!  :hello:

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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