Bordure transparente

[AllanTK]

Bonjour

Je suis en train de refaire le design de mon site en essayant au maximun que possible gérer le design par une feuille de style. J'ai déja réussi à positionné le logo et le menu. Malheureusement le menu n'est pas affiché correctement sous IE. Je n'arrive pas à trouver d'où vient le problème, si vous pouviez m'aider ?

Code HTML

<div class="logo">
	<h1><img src="images/img_01atk.jpg" width="100%" height="160" alt="DameCHAOS, Site sur les jeux Blizzard et les mods Half-Life"></h1>
</div>

<div class="menu">
	<ul>
  <li><a href="/">Accueil</a></li>
  <li><a href="/modules/newbb/">Forum</a></li>
  <li><a href="/modules/mydownloads/">Fichiers</a></li>
  <li><a href="/modules/mylinks/">Liens</a></li>
  <li><a href="/modules/wfsection/">Dossiers & Stratégies</a></li>
  <li><a href="/modules/contact/">Contacts</a></li>

  <li><a href="/team.php">La team</a></li>
  <li><a href="/modules/wfsection/article.php?articleid=18" class="important">Règles du site</a></li>
	</ul>
</div>

Code CSS --> http://www.damechaos.com/atk/testing/damecss.css

Il existe encore de vieux styles en majuscule au début de mon fichier mais je les convertirais plus tard.

Aperçu de ma page en ligne: http://www.damechaos.com/atk/testing/mapage.html

Norme utilisé: HTML 4 Transitional & CSS2

[Dan]

AllanTK, bonjour et bienvenue à bord du Hub !

Lorsque tu dis que sous IE il n'est pas affiché correctement, tu fais allusion à la bordure qui n'est pas transparente ? Parce que c'est la seule différence que je vois entre IE et Mozilla FireFox ... (avec le survol qui fait varier cette même bordure).

IE a effectivement du mal à gérer les transparences, cela se voit d'ailleurs avec les images au format png dont la transparence n'est pas rendue correctement.

Comme c'est un bug IE, je ne connais pas de méthode permettant d'obtenir un rendu correct, à part en utilisant un artifice CSS.

En effet, seul IE supporte les filtres sur les images, tu pourrais donc t'inspirer de ce qui se trouve à cette page: http://www.daltonlp.com/daltonlp.cgi?item_type=1&item_id=217

Cordialement,

Dan

[AllanTK]

Eh bien j'ai résolu le problème avec les bordures en mettant un style hidden à celle-ci. Mais sur un IE, un lien qui est comme les autres ne s'affichent pas correctement. Il s'agit du lien "La team", pourtant au niveau de la syntaxe, c'est exactement un lien comme un autre :'(...

Chez moi, il n'est pas mis en blanc et à la taille que j'ai configuré... Vous avez une idée ou c'est un bug de IE ?

[Dan]

Je n'arrive pas à voir de différence avec le lien "LA TEAM" qui s'affiche pareil à tous les autres, sauf le dernier qui a la classe "important".

Par contre, le fait de rendre la bordure "hidden" puis "visible" a un effet de bord: cela fait se déplacer tout de reste de l'épaisseur de la bordure quand elle est affichée.

Dan

[Guest exabs]

En 1400 pixels, les blocs s'affichent dans de mauvaises positions.

En chargeant la page, l'image (bandeau) occupe toute la page jusqu'à ce que je redimensionne ma fenêtre.

IE 6

[Monique]

Bonjour Allan,

Le problème de déplacement des éléments de ton menu au survol avec IE est probablement dû à sa mauvaise gestion des % pour les margin ou font-size (par exemple margin-right: 0.3%

Je suppose qui si tes blocs ont une bordure, c'est pour les visualiser. Je te conseille plutôt d'utiliser une couleur de fond. En effet, au lieu de considérer la bordure comme faisant partie du bloc, IE l'ajoute... ce qui fausse tes essais (un bloc d'une largeur de 50 px, avec une bordure de 1 px, devient un bloc d'une largeur de 52 px).