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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [CSS] Décalage et incoherence entre IE et Firefox sur <div > droite.

gob3d

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

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

<head>
<link href="abc.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="contener">
<b>#contener</b>
<div id="floatDroite">
Dr. 
</div>
<div id="contenu">
<b>#contenu</b> : Simple block
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 />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
partie avec du contenu occupant le reste de la largeur<br />
</div>
<div class='spacer'>
<b>.spacer</b> : un block "spacer" ...
</div>
</div>
</body>
</html>

Source CSS :

Code :

body {
margin: 10px 50px;
}
#contener {
position: relative;
border: 1px solid #000;
background-color: yellow;
background: #9999CC url("barreD.gif" ) top right repeat-y;
}
#floatDroite {
position: relative;
float: right;
border: 0px solid red;
padding: 0;
margin: 0;
color: red;
width: 42px;
height: 100px;
background-color: #df0451;
background: #df0451 url("droite.gif" ) top left no-repeat;
}
#contenu {
border: 1px solid blue;
color: blue;
}
.spacer {
clear: both;
border: 1px solid #FF00FF;
color: #FF00FF;
}

Apperçu avec IE :

Apperçu avec Firefox :

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

Merci d'avance.
A+
Gob

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

Publicité

gm_superstar

Appelez-moi Super

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

masklinn

í dag viðrar vel til loftárása

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

gm_superstar

Appelez-moi Super

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

FlorentG

Assure-toi que ton fichier commence par ça :

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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

gob3d

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 ?

FlorentG

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

gm_superstar

Appelez-moi Super

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

gob3d

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

plainsofpain

Pingouino's lover

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Espace à droite d'une balise <li> ou <ul>	Probleme avec Firefox
[CSS] padding : texte masqué ?	[CSS] corriger mon css
[CSS] textarea transparent sous mac	Javascript et css
Problème de tableau CSS	Doxygen & CSS
Feuille CSS a commenter	[js]afficher du texte dans la barre d'etat (compatible firefox 1.0)
Plus de sujets relatifs à : [CSS] Décalage et incoherence entre IE et Firefox sur <div > droite.

Page générée en 0.068 secondes