[HTML/CSS]Problème de positionment avec IE, trou de 1px

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML/CSS]Problème de positionment avec IE, trou de 1px

Yoyo@

Salut,
J'ai maintes fois rencontré des problèmes par le passé, et j'avais posté sur ce forum, mais personne n'avait pu m'aider.
J'ia finalement réussi à isoler mon problème de manière extrêmement claire.

En fait, il se trouve qu'IE a du mal à positioner de manière précise et absolue un élément par rapport à un autre élément, lorsque la taille de l'élément parent est impaire. Bref, peu importe les détails, regardez cet exemple pour vous en convaincre:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test!</title>
</head>
<body>
<div style="position: relative; background-color: #ff0; width: 50%; font-size: 1%; height: 30px; border: 2px solid #00f;">
<div style="position: absolute; height: 100%; font-size: 1%; width: 2px;; top: 0; right: 0; background-color: #f00;"></div>
</div>
</body>
</html>

Essayez sous IE, en redimensionnant votre fenêtre et vous verrez qu'il y aura par moment un trou de 1px entre l'élément postionné en absolu en rouge sur la droite du conteneur jaune et la bordure noire de ce même élement jaune.

Bref, je suis assez content d'avoir pu isoler ce problème, et je comprends mieux pourquoi j'avais tant de mal avec certains de mes éléments.

Auriez vous une idée pour savoir comment je pourrais éviter ce problème, c'est à dire pouvoir caler de manière précise mon élément rouge par rapport à la droite de mon élément jaune. (le but étant de faire une bordure arrondie, mais peu importe)

Merci.

Message édité par Yoyo@ le 14-02-2006 à 15:34:26

Publicité

nlc

Le mieux est l'ennemi du bien

comme ca ca marche !!

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test!</title>
</head>
<body>
<div style="position: relative; background-color: #ff0; width: 50%; font-size: 1%; height: 30px; border: 2px solid #00f;">
<div style="position: absolute; height: 100%; font-size: 1%; width: 2px;; top: 0px; right: -1px; background-color: #f00;"></div>
</div>
</body>
</html>

Va falloir faire comme j'ai fait pour mon pb d'image, detecter le navigateur et et changer le parametre right en javascrit :fou:

Message édité par nlc le 14-02-2006 à 16:16:49

Yoyo@

Strictement impossible, car la largeur n'est pas fixe... Donc, si la largeur du div parent est paire, alors IE semble ne pas créer de décalage, alors que si elle est impaire, le décalage est créé... Mais je ne connais pas cette largeur...

nlc

Le mieux est l'ennemi du bien

On doit pouvoir la recuperer en javascript en donnant un nom au div et en recuperant le parametre adequat de l'objet.
En gros faut recuperer l'evenement du redimensionnement de la fenetre, recuperer la largeur du div (si on peut) et regler le right a 0 ou -1.

C'est ce que je disais dans mon autre post : on passe notre temps a essayer de resoudre un probleme qui n'existerait pas si IE respectait un peu les standards. C'est lassant.

gatsu35

Blablaté par Harko

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test!</title>
<style type="text/css">
/*<![CDATA[*/
#boite1{
position: relative;
background-color: #ff0;
width: 455px;
font-size: 1px;
height: 61px;
border: 2px solid #00f;
}
#boite2{
position: absolute;
height: 30px;
font-size: 1px;
width: 30px;
bottom: 0;
right: 0;
background-color: #f00;
}
/*]]>*/
</style>
</head>
<body>
<div id="boite1"><div id="boite2"></div></div>
</body>
</html>

même pour le vertical ca passe pas non plus
j'ai déjà eu ce problème en voulant mettre des corners

omega2

Vivement le css3 qui permettra de mettre des corners proprement sans rajouter pleins de div partout du moins dans les navigateurs qui le géreront comme il faut.

FORUM HardWare.fr

Programmation

HTML/CSS

[HTML/CSS]Problème de positionment avec IE, trou de 1px

Sujets relatifs
[Struts + MySql] probleme pour acceder à la base de données	probleme ajoute d'un SHOUTBOX (chat)
probleme lors d'un erase() sur une liste	HTML - agrandir animation wmv dans une popup
[CSS] Problème de compatibilité, IE again	Probleme d'activation de private sub
[css html] Selection texte et roulette > problèmes sous IE	[RESOLU]probleme curseur main
Problème de connexion.
Plus de sujets relatifs à : [HTML/CSS]Problème de positionment avec IE, trou de 1px

Page générée en 0.038 secondes