[CSS] Décalage et incoherence entre IE et Firefox sur <div > droite.

Décalage et incoherence entre IE et Firefox sur <div > droite. [CSS] - HTML/CSS - Programmation

Marsh Posté le 16-12-2004 à 20:00:07    

Bonjour a tous.
Je vien de m'inscrire sur le forum donc je fais un petit coucou a tout le monde.
 
Je suis developpeur PHP mais depuis 5 jous j'aprends le CSS. ( Eh oui nouvelles normes s'imposent.. :D )
 
J'ai parcouru le forum en lisant une a une un bon nombre de topics de la partie HTML / CSS..(pour eviter de poser une question innutile.  :D )
Si le message et la solution existent deja.. je m'en excuse :heink:  
 
J'ai encore du mal avec certains points du CSS surtout quand cette m.... de de truc qu'on ose appeler "navigateur web" .. (je parle biensur de IE) commence a faire des siennes.. Enfin bon..le but de ma question n'est pas un debat Firefox Vs. IE (de tt façon on connait le denoument.. lol )
 
Pour l'instant je cherche  faire du positionnement simple avec des <div> et float (gauche ou droite) enfin, c'est surtout pour la droite que ça couille.
 
VOICI MON PROBLEME
+-------------------------+
 
J'ai un simpel conteneur d'une certaine taille avec une image en background..et avec 2 autre <div> dedans.. un contenu et une partie droite flotante qui contient en background un bout de ma charte graphique...
 
J'ai un rendu bizare ... le <div> de droite (en float) est decalé d'1 pixel sous IE et le code marche tres bien avec Firefox.
 
JEjoint ici les 2 screenshots et aussi les sources du css et du html ainsi qu'un lien vers la page.. pour que vous pouvez tester.
 
Source HTML :  
 

Code :
  1. <head>
  2. <link href="abc.css" rel="stylesheet" type="text/css">
  3. </head>
  4. <body>
  6. <div id="contener">
  7.   <b>#contener</b>
  8.   <div id="floatDroite">
  9.     Dr.&nbsp;
  10.   </div>
  11.   <div id="contenu">
  12.     <b>#contenu</b> : Simple block
  13.        partie avec du contenu occupant le reste de la largeur Et je rajoute 1 2 3 4 5 6 encore quelques mots pour tester la retour a la ligne.<br />
  14.      partie avec du contenu occupant le reste de la largeur<br />
  15.      partie avec du contenu occupant le reste de la largeur<br />
  16.      partie avec du contenu occupant le reste de la largeur<br />
  17.      partie avec du contenu occupant le reste de la largeur<br />
  18.      partie avec du contenu occupant le reste de la largeur<br />
  20.      partie avec du contenu occupant le reste de la largeur<br />
  21.      partie avec du contenu occupant le reste de la largeur<br />
  22.          partie avec du contenu occupant le reste de la largeur<br />
  23.   </div>
  24.   <div class='spacer'>
  25.     <b>.spacer</b> : un block "spacer" ...
  26.   </div>
  27. </div>
  29. </body>
  30. </html>


 

Source CSS :
 

Code :
  1. body {
  2.   margin: 10px 50px;
  3. }
  4. #contener {
  5.   position: relative;
  6.   border: 1px solid #000;
  7.   background-color: yellow;
  8.   background: #9999CC url("barreD.gif" ) top right repeat-y;
  9. }
  10. #floatDroite {
  11.   position: relative;
  12.   float: right;
  13.   border: 0px solid red;
  14.   padding: 0;
  15.   margin: 0;
  16.   color: red;
  17.   width: 42px;
  18.   height: 100px;
  19.   background-color: #df0451;
  20.   background: #df0451 url("droite.gif" ) top left no-repeat;
  21. }
  22. #contenu {
  23.   border: 1px solid blue;
  24.   color: blue;
  25. }
  26. .spacer {
  27.   clear: both;
  28.   border: 1px solid #FF00FF;
  29.   color: #FF00FF;
  30. }


 
 
Apperçu avec IE :
 
http://membres.lycos.fr/goldeneyerv/aide_forum/ie.jpg
 
Apperçu avec Firefox :
 
http://membres.lycos.fr/goldeneyerv/aide_forum/firefox.jpg
 
 
Lien de la page : http://membres.lycos.fr/goldeneyer [...] m/abc.html
 
 
Voilà !
Si quelqun pourrait me donner une piste.. ça serait vraiment sympa...et si j'arrive a resoudre ça.. j'en ai plain d'autres questions pour vous...  :D  :D  :D  
 
Merci d'avance.
A+
Gob


Message édité par gob3d le 16-12-2004 à 20:09:50
Reply

Marsh Posté le 16-12-2004 à 20:00:07   

Reply

Marsh Posté le 16-12-2004 à 20:26:33    

Déjà commencer par faire une page valide...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 16-12-2004 à 20:29:22    

gm_superstar a écrit :

Déjà commencer par faire une page valide...


je pense que la page serait valide (ou presque) si il ne la foutait pas chez Lycos [:ddr555]
 
presque, parce qu'il y a du <b>, et pas de doctype


Message édité par masklinn le 16-12-2004 à 20:30:39

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

Marsh Posté le 16-12-2004 à 20:32:38    

Masklinn a écrit :

je pense que la page serait valide (ou presque) si il ne la foutait pas chez Lycos [:ddr555]


Oui, mais valide en faisant abstraction des cochonneries ajoutées par Lycos. En testant en local.

Masklinn a écrit :

presque, parce qu'il y a du <b>, et pas de doctype


Tout dépend du DOCTYPE choisi...


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 16-12-2004 à 20:36:12    

Assure-toi que ton fichier commence par ça :
 

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" lang="fr">


 
Par contre si t'es chez Lycos, c'est pas la peine, avec leur script à la con, tu peux pas faire basculer explorer en mode standard :(

Reply

Marsh Posté le 16-12-2004 à 21:29:04    

Rien avoir avec Lycos... c'etait juste pour heberger la page pour vous la montrer. Comme t'a pu voir j'ai mis le code en clair dans mon post... lol
 
Changer le Doctype ne donne absolument rien !
Il n'y a vraiment pas de sollution pour ce bug a la con ?

Reply

Marsh Posté le 16-12-2004 à 21:43:31    

Peut-être le bug du float d'IE. Dans certains cas, IE rajoute une petite marge quand t'utilises des floats, mais il a tendance à rajouter 3 pixels, et non un seul...

Reply

Marsh Posté le 16-12-2004 à 21:47:03    

Ouaip c'est un bug.
 
Donc une manière de le contourner est d'utiliser le positionnement absolu.
 
1. Positionner #contener avec "position: relative;" (c'est fait)
2. Placer #floatDroite à droite avec "position: absolute;" et "right: 0;" (et virer float: right;)
 
Mais ça, ça ne marchera que si on déclare un DOCTYPE HTML (ou XHTML) Strict. En transitional ou sans DOCTYPE, IE placera #floatDroite à droite de l'écran et pas à droite de #contener


Message édité par gm_superstar le 16-12-2004 à 21:47:16

---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 17-12-2004 à 00:20:29    

malheureusement j'ai toujours le même resultat avec IE.
Decalage de 1pixel que ça soit avec ou sans image de fond.
 
a suivre svp...

Reply

Marsh Posté le 20-12-2004 à 12:39:22    

#tonbloc
{
 
// propriétés communes a IE et firefox
 
}
 
html> body #tonblocpourlesnaviagteursquiprennentleCSS2
{
 
//propriétés que seuls les navigateurs compatibles CSS2 //(comme firefox et pas IE) pourront lire
}
 
Le second bloc ci dessus ne sera compris que par les navigateurs compatibles CSS2, donc IE ne le verra pas.  
 
Tu mets le positionnement qui va bien pour IE dans #tonbloc {}, et pour firefox tu préciseras dans html>body #tonbloc{} de nouvelles valeurs, qui écraseront les précédentes, mais pour firefox seulement, puisque IE n'ira pas dans ce bloc ...
 
 
 
J'espère que je me fais comprendre...

Reply

Sujets relatifs:

Leave a Replay

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