[résolu]Comportement d'un lien sous IE

Question

garden

25 Nov 2005 à 08:32

Bonjour,

Je viens de finir mon site, mais un bug demeure toujours, un comprtement sous IE
Dans tous les browsers mes liens sont soulignés, mais pas sous IE, et en essayant de changer des paramètres, je n'y arrive pas... Smiley decu

Je vous propose de regarder par vous même
www.vitamine-c.ch/alsa2/nos-oeuvres-de-communication.html

Merci d'avance de votre coup de pouce
Smiley cligne

Excellente journée
Garden
Modifié par garden (27 Nov 2005 - 16:10)

Felipe

Administrateur

25 Nov 2005 à 08:54

Bonjour,

l'attribut dotted ne fonctionne malheureusement pas avec IE ...

garden

25 Nov 2005 à 23:13

Bonsoir,

Une chose de curieuse quand même se produit. En effet sur la page index, les soulignements vont parfaitement avec dotted (sous IE mac et PC).
Alors pourquoi pas sur cette page?
Page index http://www.vitamine-c.ch/c/
Page qui ne va pas http://www.vitamine-c.ch/c/nos-oeuvres-de-communication.html

Merci de votre aide
garden
Smiley cligne

globy

25 Nov 2005 à 23:26

Sous IE je vois des petits points sous "Quelques photographies", mais c'est peut-être la fatigue Smiley ravi

Donc tu dois avoir deux classes de liens. J'ai pas cherché à analyser avec mes faibles connaissances css en voie d'épanouissement Smiley murf

gcyrillus

Modérateur

25 Nov 2005 à 23:44

bonjour,
essai d'appliquer un line-height a la balise <a> pour fixer la hauteur de tes liens dans IE.
Cela devrait permetre de laisser apparaitre la bordure basse de la balise.
Je ne sais pas comment est appelé ou consideré ce "bug" d'IE.
a plus

garden

26 Nov 2005 à 08:49

Bonjour,

en appliquant le line-height rien ne change dans le bon sens. Smiley smile

Il y a effectivement un bug, mais ou se cache-t-il?
Merci d'avance

garden

liens

Page index http://www.vitamine-c.ch/c/
Page qui ne va pas http://www.vitamine-c.ch/c/nos-oeuvres-de-communication.html

Merci de votre aide
garden
cligne

Smiley biggrin

globy

26 Nov 2005 à 09:35

A mon avis en collant un bout de code tu aiderais les gens à t'aider Smiley cligne

Et comme ça le "dépannage sur site" pourra servir à tous. Voire resservir à d'autres Smiley ravi

A tout de suite.
Modifié par globy (26 Nov 2005 - 09:37)

garden

26 Nov 2005 à 09:43

ok
Alors voici le code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><!-- InstanceBegin template="/Templates/index.dwt" codeOutsideHTMLIsLocked="false" -->
  <head>
<script type="text/javascript"  src="scripts/niceforms.js" ></script>
    <meta http-equiv="content-type" content="text/html;  charset=iso-8859-1" />
    <meta name="author" lang="fr-ch" content="David Duperrex" />
    <meta name="keywords" content=" David Duperrex, suisse, concepteur, communication, stratégie, conception, concept, concepts, multimedias, multimedia, multimédias, logo, logotype identité visuel, fidélisation, pme, formation, corporate, design, information, informations, événementiel, clarté, information, originalité, agence de communication, analyse,  réalisation, conception, innover, solution, solutions, problèmes, client, clients, référence, , cours, école, marketing, objectifs, méthodologie, proximité, TIC, sawi, médias, conseil, logotype, partenaire multimedia, photographie, animation, site internet, hébergement, réalisation, internet, design, CSS, W3C, concept, graphisme, création, W3C, standard, web, standards, astuces, stratégie internet, communication, plateforme interactive, design d'interaction, navigabilité , systeme d'information, usabilité, CMS, design, ergonomie " />
    <meta name="description" content="Spécialiste dans la conception de plateforme stratégique de communication, vitamine c à pour objectif de vous démarquer par l'originalité et la clarté de l'information en véhiculant un message clair adapté à vos besoins." />
    <meta name="robots" content="all" />
    <meta name="category" content="Internet" />

    <meta name="distribution" content="global" />
    <meta name="revisit-after" content="7 days" />
    <meta name="identifier-url" content="http://www.vitamine-c.ch" />
    <meta name="expires" content="never" />
    <meta name="Date-Creation-yyyymmdd" content="20050825" />
    <meta name="Date-Revision-yyyymmdd" content="20051119"/>
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- InstanceBeginEditable name="doctitle" -->

    <title>
      La Vitamine c communique vos idées - David Duperrex - concepteur en multimédia - nos oeuvres
    </title>
	<script type="text/javascript" src="scripts/popup.js"></script>
    <!-- InstanceEndEditable -->
    <link rel="stylesheet" media="screen" type="text/css" title="default" href="styles/default.css" />
    <link rel="stylesheet" type="text/css" media="print" href="styles/print.css" />
    <!-- InstanceBeginEditable name="head" -->    <!-- InstanceEndEditable -->

  </head>
  <body >
    <div id="global">
      <!-- global-->
      <div id="logo">
        <!-- logo-->
        <a href="http://www.vitamine-c.ch">
          <img alt="logo vitamine c" title ="vitamine c communique vos idées"  width="256" height="76"    src="images/logo.gif"/></a>
      </div>

      <!-- fin logo-->
      <div id="photographie">
        <!-- photographie-->
        <!-- InstanceBeginEditable name="photographie" -->
        <img alt="toucher la vitamine c" title ="les cinq sens de la vitamine c"  width="750" height="149"  src="images/tomate.jpg"/>
        <!-- InstanceEndEditable -->
      </div>
      <!--  fin photographie-->
      <!-- InstanceBeginEditable name="menu" -->

      <div id="navcontainer">
        <ul id="navlist">
          <li> <a title="Accesskey: g" accesskey="g" href="index.html" >Vitamine c</a></li>
          <li> <a href="nos-atouts-de-communication.html" title="Accesskey: a" accesskey="a" >Nos atouts </a></li>
          <li id="active"> <a id="current" href="nos-oeuvres-de-communication.html" title="Accesskey: o" accesskey="o" >Nos oeuvres </a></li>
          <li> <a href="vos-contacts-de-communication.php" title="Accesskey: l" accesskey="l" >Votre liaison</a></li>

          <li> <a href="votre-espace-de-communication.html" title="Accesskey: e" accesskey="e" >Votre espace </a></li>
        </ul>
      </div>
      <!-- InstanceEndEditable --><!-- InstanceBeginEditable name="sous-menu" -->
      <div id="sousmenu">
        <!-- sousmenu-->
           <div id="menu">
          <ul>

            <li>
            <img alt="logo vitamine c" title ="vitamine c communique vos idées"  width="37" height="31"    src="images/c.gif"/></li>
            <li>
            <a href="#ecouter" title="Accesskey: 1" accesskey="1" >Ecouter  </a></li>
            <li>
            <a href="#voir" title="Accesskey: 2" accesskey="2">Voir </a></li>
       
          </ul>
        </div>

      </div>
      <!-- InstanceEndEditable -->
      <!-- fin sousmenu-->
      <!-- InstanceBeginEditable name="contenu" -->
      <div class="content petit-contenu">
        <!-- contenu-->
         <h1 id="ecouter">
          <img alt="logo vitamine c" title ="vitamine c communique vos idées"  width="23" height="19"    src="images/petit_c.gif"/>
          <em>

            Ecouter
          </em></h1>
        <hr />
        <p>
          Vitamine c communique des réponses  claires, rapides et explicites. Notre objectif est de valoriser et d'apporter une valeur ajoutée à vos produits ou services dans une démarche de séduction, de fidélisation et de conquête. 
          <br />
          Vous trouverez ici bas quelques exemples. 
          <br />
        </p>
         <h1 id="voir">

          <img alt="logo vitamine c" title ="vitamine c communique vos idées"  width="23" height="19"    src="images/petit_c.gif"/>
          <em>
            Voir
          </em></h1>
        <hr />
        <div style="FLOAT: left; width: 220px; margin-right: 10px">
          <p>
          </p>
          <div class="creation">

         <img alt="logo oikos" title ="logo relooké"  width="200" height="100"  src="images/oikosg2.jpg"/>			 
          </div>
		  <div class="creation2">
            <a href="http://www.oikos-famille.com/fr/formations_plaquette.htm">             
			<img alt="plaquette oikos" title ="plaquette institutionnelle"  width="200" height="100"  src="images/oikosg.jpg"/></a>
          </div>
        </div>
        <div style="float: left; width: 220px">
          <h5>Oikos</h5>

          <p class="client" >
		 <em>Logotype</em><br />
 Création d'un logo pour une association de la famille. <br />

           
            
          </p>
        </div>
		<div style="float: left; width: 220px">
		
		<h5></h5>

          <p class="client2" >
		 <em>Plaquette de l'association</em><br /> 
		 Brochure explicative de l'association Oikos, comprenant ses objectifs et ses différents modules de formation.<br />
Format 150 mm / 150mm.
		 <br />
		  <a href="http://www.oikos-famille.com/fr/formations_plaquette.htm">consultation ici</a><br />
          </p>
</div>
           
            
        
        <p class="clr"> </p>

        
        <hr />
		
		
		
		<div style="FLOAT: left; width: 220px; margin-right: 10px">
          <p>
          </p>
          <div class="creation">
            <a href="http://www.qrvevey.ch">
              <img alt="site internet qrvevey.ch" title ="www.qrvevey.ch"  width="200" height="100"  src="images/qrg.jpg"/></a>
          </div>
		  
        </div>

        <div style="float: left; width: 220px">
          <h5>Quincaillerie qrvevey SA </h5>
          <p class="client" >
             <em>Site de la quincaillerie de Vevey</em><br />
Site internet géré par le client (cms) /// promotions et mises à jour.<br />
            <a href="http://www.qrvevey.ch">www.qrvevey.ch</a>
          </p>

        </div>
		
		   <p class="clr"> </p>
        
        <hr />
		
		
		
			<div style="FLOAT: left; width: 220px; margin-right: 10px">
          <p>
          </p>
          <div class="creation">
          
              <img alt="décoration opti lausanne" title ="décoration opti Lausanne"  width="200" height="100"  src="images/optig.jpg"/>

          </div>
		  
		  
		  
		  
		  <div id="pop1">

<div class="fermer">

 <img alt="décoration opti lausanne" title ="décoration opti Lausanne"  width="200" height="100"  src="images/optig1.jpg"/>
<p class="clr"> </p>

 <img alt="décoration opti lausanne" title ="décoration opti Lausanne"  width="200" height="100"  src="images/optig2.jpg"/><p class="clr"> </p>
  <img alt="décoration opti lausanne" title ="décoration opti Lausanne"  width="200" height="100"  src="images/optig3.jpg"/>

</div>
</div> 
		  
		  
		  
		  
		  
		  
		  
		  
		  
        </div>
		

        <div style="float: left; width: 220px">
          <h5>Opti Lausanne</h5>
          <p class="client" >
             <em>Décoration av. de provence 12</em><br />
Création &amp; conception d'une décoration pour un collège de Lausanne .<br />

 <a href="#pop1" class="pop">Quelques photographies</a><br />
            <a href="http://www.opti.edu-vd.ch/modules/icontent/index.php?page=23">Référence ici</a>
          </p>
        </div>
		
		   <p class="clr"> </p>
        
        <hr />
		
		
		
		
		
			<div style="FLOAT: left; width: 220px; margin-right: 10px">

          <p>
          </p>
          <div class="creation">
           
              <img alt="animation vitamine-c" title ="introduction vitamine c"  width="200" height="100"  src="images/animation.jpg"/>
          </div>
		  
        </div>
        <div style="float: left; width: 220px">
          <h5>Vitamine c</h5>

          <p class="client" >
             <em>Animation publicitaire</em><br />
Promotion du site vitamine-c par une animation démontrant les cinq sens. <br />
            
            
			
	
<a href="images/citron.jpg" onclick="window.open(this.href, 'index.html', 'height=200, width=400, top=100, left=100, toolbar=no, menubar=yes, location=no, resizable=yes, scrollbars=no, status=no'); return false;"></a>
			
			

			
   <br />
      </p>
        </div>
		
		   <p class="clr"> </p>

        
        <hr />
		
		
		
		
		
		   <div style="FLOAT: left; width: 220px; margin-right: 10px">
          <p>
          </p>
          <div class="creation">
         <a href="http://www.alliage.ch"><img alt="site internet alliage.ch" title ="www.alliage.ch"  width="200" height="100"  src="images/alliagesg.jpg"/></a>			 
          </div>
		  <div class="creation2">
                        
			<img alt="plaquette, carte de visite" title ="www.alliage.ch"  width="200" height="100"  src="images/alliagecg.jpg"/>

          </div>
        </div>
        <div style="float: left; width: 220px">
          <h5>Alliage</h5>
          <p class="client" >
		 <em>Site internet des quincailleries.</em><br />
 Quatre quincailleries régionales au service des autres.<br />

           
            <a href="http://www.alliage.ch">www.alliage.ch</a><br />
          </p>
        </div>
		<div style="float: left; width: 220px">
		
		<h5></h5>
          <p class="client2" >
		 <em>Plaquette, carte de viste et power point.</em><br />

Conception &amp; réalisation des plaquettes institutionnelles, carte de viste et support de présentation.<br /></p>
</div>
      <p class="clr"> </p>
        
        <hr />   
		
        <div style="FLOAT: left; width: 220px; margin-right: 10px">
          <p>
          </p>
          <div class="creation">

            <a href="http://www.quipa.ch">
              <img alt="site internet quipa.ch" title ="www.quipa.ch"  width="200" height="100"  src="images/quipag.jpg"/></a>
          </div>
		  
        </div>
        <div style="float: left; width: 220px">
          <h5>Quincaillerie Quipa Lausanne</h5>
          <p class="client" >
             <em>Site de la quincaillerie lausannoise Quipa SA.</em><br />

Site internet géré par le client (cms) /// promotions et mises à jour.<br />
            <a href="http://www.quipa.ch">www.quipa.ch</a>
          </p>
        </div>
        <p class="clr">
        </p>
        <hr />
        <p class="ancre">

          <a href="#">
            <img class="image" onmouseover="this.src='images/direction_rol.gif'" title="haut de la page" onmouseout="this.src='images/direction.gif'" alt="retour menu" src="images/direction.gif" /></a>
        </p>
        <p class="clr">
        </p>
      </div>
      <!-- InstanceEndEditable -->
      <p class="clr">
      </p>

      <!-- fin contenu-->
      <div id="footer">
        <hr />
        <p class="copyright">
          Copyright &copy; 2005 David Duperrex I Tous droits réservés I <a href="http://www.mysql.com/" title="Base de données mysql">MYSQL</a> I <a href="http://www.php.net/" title="Technologie php">PHP</a> I  <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.vitamine-c.ch/vitamine" title="Valide xhtml srtict">XHTML</a>

		I <a href="  http://jigsaw.w3.org/css-validator/validator?uri=http://www.vitamine-c.ch/vitamine"  title="Valide css2">CSS</a>
          <span class="adresse">
            <br />
            :: rue de Vaugueny 4, 1066 Epalinges, Suisse- Tél + 41 (0) 21 653 5323 :: 
          </span>
        </p>
        <hr />
      </div>

    </div>
    <!-- fin global-->
  </body>
<!-- InstanceEnd --></html>

et css


body {
	margin: 0;
	padding: 0;
	height: auto;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	background-image:      url("../images/bordure_b.gif");
	background-repeat: repeat-y;
	color: #666666;
}
h1 {
	font-size: 1.2em;
	margin: 0 0 0 0px;
	color: #E94F1A;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0.3pt;
}
h2 {
	font-size: 1.1em;
	margin: 0px 0 0 0;
	color: #E94F1A;
	letter-spacing: 0.3pt;
	font-family: Arial, Helvetica, sans-serif;
}
h3 {
	font-size: 1.2em;
	letter-spacing: 0.7pt;
	padding: 10px 0 0 0;
	margin: 0 0 10px 55px;
	color: #636360;
	font-family: Arial, Helvetica, sans-serif;
}
h5 {
	color: #B51CE9;
	letter-spacing: 0.5pt;
	font-size: 1.3em;
	margin: 0;
	font-weight: bold;
	margin: 10px 0 0 0;
}
h6 {
	color: #E63324;
	letter-spacing: 0.5pt;
	font-size: 1.2em;
	margin: 0;
	font-weight: bold;
	margin: 10px 0 0 0;
}
p {
	font-size: 1.1em;
	padding: 5px 0 5px 0;
	margin: 0 0 0 20px;
	text-align: justify;
	letter-spacing: 0.25pt;
}
b {
	color:  #9523E7;
	letter-spacing: 0.5pt;
}
strong {
	color: #B51CE9;
	letter-spacing: 0.3pt;
}
em {
	color: #E91CB5;
	font-weight: bold;
}
img {
	border: none;
}
a:link, a:visited {
	color: #E91CB5;
	border-bottom: 1px dotted #E91CB5;
	text-decoration: none;
}
a:hover {
	color: #E91CB5;
	border: none;
}
a:active {
	border-bottom: 1px dotted #E91CB5;
	text-decoration: none;
}
hr {
	height: 1px;
	margin: 5px 0 0 0;
	padding: 0;
	color: #ddd;
	background-color: #ddd;
	border: 0;
}
.clr {
	clear: both;
	height: 0;
}
.retrait {
	margin-left: 0;
}
/*----------------------------------------------+ + Styles pour global         + +----------------------------------------------*/
#global {
	height: auto;
	background-color: #fff;
	background-image:      url("../images/bordure.gif");
	background-repeat: repeat-y;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	left: 50%;
	width: 780px;
	margin-left: -390px;
/* moitié de la largeur */
}
.content {
	width: 710px;
	margin-top: 0;
	float: left;
	padding: 115px 20px 0 50px;
}
.petit-contenu {
	width: 470px;
}
/*----------------------------------------------+ + Styles pour en-tête         + +----------------------------------------------*/
#logo {
	width: 700px;
	height: 67px;
	padding: 0 0 33px 0;
	margin: 30px 0 20px 40px;
	border: none;
}
#logo a:link, #logo a:visited {
	border: none;
	text-decoration: none;
}
/*----------------------------------------------+ + Styles pour menu Principal        + +----------------------------------------------*/
#navcontainer {
	font-family: Arial, Sans-Serif;
	font-weight: bold;
	margin: 16px 0 0 16px;
	padding: 0;
	width: 550px;
	border-bottom: 1px solid #ddd;
}
#navlist {
	letter-spacing: 0.11em;
	width: 100%;
	text-align: left;
	margin: 0;
	padding: 0;
	text-indent: 0;
	list-style-type: none;
}
#navlist li {
	padding: 0 0 0 15px;
	margin: 0;
	text-indent: 0;
	display: inline;
	text-decoration: none;
}
#navlist li a {
	letter-spacing: -1px;
	text-decoration: none;
	color: #ccc;
	font-size: 1em;
	padding: 0 2px;
	text-decoration: none;
	border: none;
}
#navlist li a:hover, #navlist a#current {
	color: #E91CB5;
	border: none;
	font-size: 1.5em;
	text-decoration: none;
	letter-spacing:0.00001em;
}
#navlist a#current {
	color: #E91CB5;
	text-decoration: none;
	border: none;
}
/*----------------------------------------------+ + Styles pour la photographie               + +----------------------------------------------*/
#photographie {
	width: 750px;
	height: 149px;
	background-repeat: no-repeat;
	padding:  0;
	margin: 0 0 0 16px;
	display: block
}
/*----------------------------------------------+ + Styles pour Sous-menu       + +----------------------------------------------*/
#sousmenu {
	width: 194px;
	height: auto;
	float: right;
	margin: 25px 0px 0 0;
	padding: 0 16px 0 0;
	text-decoration: none;
	border: none;
}
#menu {
	color: #ffffff;
	letter-spacing: 0.2em;
	position: relative;
	float: left;
	list-style: none;
	padding: 0 0 0 2px;
	margin: 0 0 5px 2px;
	text-decoration: none;
	letter-spacing: 0.6pt;
}
#menu ul {
/* Toutes les listes  ? puces se trouvant dans un menu */
	list-style: none;
	padding: 0 0 0 2px;
	margin: 0 0 5px 2px;
	text-decoration: none;
	letter-spacing: 0.6pt;
}
#menu li {
}
#menu li a {
	display: block;
	padding: 3px 0px 3px 0px;
	width: 192px;
	border-bottom: 1px solid #ddd;
	color: #cccccc;
	font-weight: bold;
	text-align: left;
	text-decoration: none;
	letter-spacing: -1px;
}
#menu li a:hover, #menu
/* Quand on pointe sur un lien du menu */
 {
	font-size: 1.1em;
	color: #E91CB5;
	text-decoration: none;
	border-bottom-width: 0px;
	letter-spacing:0.00001em;
}
/*----------------------------------------------+ + Styles pour formualaire      + +----------------------------------------------*/
form {
	margin-top: 0;
}
.formulaire {
	font-size: 1.1em;
	padding:  0;
	margin: 0 0 0 20px;
	text-align: justify;
	letter-spacing: 0.25pt;
}
#container {
	padding: 0;
	margin: 0;
}
/*Forms defaults*/
input, textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #404040;
	font-weight: bold;
	padding: 0;
	margin: 0;
}
label {
	color: #999;
	cursor: pointer;
	padding-left: 2px;
	line-height: 15px;
	vertical-align: top;
}
label.chosen {
	color: #333;
}
/*Transparent items*/
.transparent {
	border: 0px solid #FFF;
	background: #FFF;
	z-index: 10;
	cursor: pointer;
}
.transparentFake {
	background: none;
	border: none;
}
.transparent2 {
	z-index: 10;
}
/*Text inputs*/
.textinput, .textinputHovered {
	width: 220px;
	height: 15px;
	background:      url("../images/input.gif") no-repeat left top;
	border: none;
	padding: 4px 8px;
}
.textinputHovered {
	background-position: left bottom;
}
/*Text areas*/
.textarea, .textareaHovered {
	width: 220px;
	height: 125px;
	background:      url("../images/textarea.gif") no-repeat left top;
	border: none;
	padding: 4px 8px;
}
.textareaHovered {
	background-position: left bottom;
}
/*Button*/
.buttonSubmit, .buttonSubmitHovered {
	width: 69px;
	height: 26px;
	color: #FFF;
	font-weight: bold;
	padding: 2px 5px;
	background:      url("../images/button.gif") no-repeat left top;
	cursor: pointer;
	border: none;
}
.buttonSubmitHovered {
	background-position: left bottom;
}
/*Test div - testing if stylesheets are enabled*/
#stylesheetTest {
	position: absolute;
	left: -999px;
	width: 10px;
	height: 10px;
}
/*----------------------------------------------+ + Styles pour footer       + +----------------------------------------------*/
#footer {
	height: 70px;
	width: 750px;
	text-align: center;
	color: #5A5A5A;
	font-weight: bold;
	font-size: 1.2em;
	background-color: #fff;
	margin: 0 0 0 16px;
}
/*----------------------------------------------+ + Styles pour copyright      + +----------------------------------------------*/
.copyright {
	letter-spacing: 0.7pt;
	display: block;
	font-size: 0.8em;
	padding: 5px 0 10px 0;
	margin: 0px;
	width: 100%;
	height: auto;
	color: #5A5A5A;
	text-align: center;
	font-weight: bold;
}
.copyright A:link {
	color: #E91CB5;
	text-decoration: none;
	border-bottom: 1px dotted #E91CB5;
}
.copyright A:visited {
	color: #E91CB5;
	text-decoration: none;
	border-bottom: 1px dotted #E91CB5;
}
.copyright A:hover {
	color: #E91CB5;
	text-decoration: none;
	border: none;
}
.copyright A:active {
	color: #E91CB5;
	text-decoration: none;
	border-bottom: 1px dotted #E91CB5;
}
.adresse {
	letter-spacing: 0.5pt;
	font-size: 0.9em;
	padding: 10px 0 0 0;
	margin: 15px 0 0 0;
	width: 100%;
	color: #5A5A5A;
	text-align: center;
}
/*----------------------------------------------+ + Styles pour ancre        + +----------------------------------------------*/
.ancre {
	width: 25px;
	height: 20px;
	padding: 0;
	float: right;
	margin: 0 10px 0px 0px;
}
.ancre a:link, .ancre a:visited {
	text-decoration: none;
	border: none;
}
.ancre a:hover, .ancre a:active {
	border: none;
	text-decoration: none;
}
/*----------------------------------------------+ + Styles pour vignette      + +----------------------------------------------*/
#vig1 {
	height: 50px;
	width: 50px;
	margin:   0 0 10px 0;
	padding-left: 120px;
}
a.vig1 {
	display: block;
	height: 52px;
	width: 52px;
	border: none;
	background-image: url(../images/oikosp.jpg);
	background-repeat: no-repeat;
}
a.vig1:hover {
	background-image: url(../images/oikosp2.jpg);
}
a.vig1:active, a.vig1:visited {
	border: none;
	text-decoration: none;
}
#vig2 {
	height: 52px;
	width: 52px;
	margin:   0 0 10px 0;
	padding-left: 120px;
}
a.vig2 {
	display: block;
	height: 52px;
	width: 52px;
	border: none;
	background-image: url(../images/qrp.jpg);
	background-repeat: no-repeat;
}
a.vig2:hover {
	background-image: url(../images/qrp2.jpg);
}
a.vig2:active, a.vig2:visited {
	border: none;
	text-decoration: none;
}
#vig3 {
	height: 52px;
	width: 52px;
	margin:   0 0 10px 0;
	padding-left: 120px;
}
a.vig3 {
	display: block;
	height: 52px;
	width: 52px;
	border: none;
	background-image: url(../images/opti.jpg);
/* source de l'image de départ */
	background-repeat: no-repeat;
}
a.vig3:hover {
	background-image: url(../images/opti2.jpg);
}
a.vig3:active, a.vig3:visited {
	border: none;
	text-decoration: none;
}
/*----------------------------------------------+ + Styles travaux        + +----------------------------------------------*/
.creation {
	height: 100px;
	width: 200px;
	padding: 0 0 10px 0;
}
.creation a:link, .creation a:visited {
	text-decoration: none;
	border: none;
}
.creation a:hover, .creation a:active {
	border: none;
	text-decoration: none;
}
.creation2 {
	height: 100px;
	width: 200px;
	padding: 0px;
}
.creation2 a:link, .creation2 a:visited {
	text-decoration: none;
	border: none;
}
.creation2 a:hover, .creation2 a:active {
	border: none;
	text-decoration: none;
}
.client {
	font-size: 1.1em;
	padding:  0;
	margin: 5px 0 0 0;
	text-align: justify;
	letter-spacing: 0.3pt;
}

.client2 {
	font-size: 1.1em;
	padding:  0;
	margin: 35px 0 0 0;
	text-align: justify;
	letter-spacing: 0.3pt;
}

/*----------------------------------------------+ + popup       + +----------------------------------------------*/


#pop {
display: none;
position: absolute;
bottom: 5em;
right: 10em; 
width: 20em;
border: 3px double black;
background: #f5f5dc;
z-index: 500;
cursor: pointer;
font-size: 80%;
}
#pop p {
margin: 0 0.3em;
}
#pop h1 {
font-size: 110%;
margin: 0 0 0.5em 0;
border-bottom: 1px solid black;
background: white url(top.gif) left top repeat-x;
color: black;
text-align: center;
}
.fermer {

width:200px;

padding: 0 0 10px 0;



}

merci de votre aide garden

Laurent Denis

26 Nov 2005 à 09:53

Bonjour,

Globy : lorsqu'une page ou un site problématique est en ligne, son code source est aisément accessible via les navigateurs. Il est inutile de demander un copié-collé qui surcharge le forum.

Garden : ayant rapidement testé en local ce matin avant de m'apercevoir que gcyrillus avait déjà répondu, je peux confirmer sa solution. Varie la valeur du line-height en em aux alentours de 1.5 - 1.8, ce qui devrait correspondre à la plupart des tailles de caractères par défaut dans les configurations IE.

Tiens, en fait, l'actuelle version de Blog & Blues souffre exactement du même problème, quoiqu'en moi visible et sur les navigateurs modernes au lieu d'IE, si ma mémoire est bonne Smiley lol

Modifié par Laurent Denis (26 Nov 2005 - 10:08)

globy

26 Nov 2005 à 10:11

Désolé Laurent. Je pensais que par "un bout de code" Garden allait comprendre l'idée de tri sélectif Smiley eek

Corinne S.

26 Nov 2005 à 10:17

Salut Garden, Smiley smile

sais-tu que les liens vers les validateurs XHTML et CSS enovient tous deux vers une page d'erreur ? Smiley rolleyes

Laurent Denis

26 Nov 2005 à 11:06

<parenthèse>

globy a écrit :
Désolé Laurent. Je pensais que par "un bout de code" Garden allait comprendre l'idée de tri sélectif

Disons que quand on en est au stade du tri sélectif dans le code face à un bug de rendu, c'est qu'on est du coup, le plus souvent, à même de résoudre seul le problème. L'avoir isolé suffit en effet à suggérer des possibilités de corrections par tâtonnement, si on ne repère pas immédiatement un bug connu. Autrement dit, savoir isoler le code fautif suffit très souvent à donner la clé, sans avoir à poser la question dans un forum Smiley cligne

C'est intéressant, parce que c'est un problème de plus en plus apparent dans ce forum : des problèmes récurrents, ou plus rares mais sans grande complexité, que les personnes concernées pourraient débusquer et résoudre par eux-mêmes s'ils avaient le recul nécessaire permettant de l'isoler. C'est à dire si ce sujet était expliqué dans un tutoriel.

Le terrain le plus fréquent étant IE Windows et le haslayout, plus quelques cas classiques avec FireFox ou Opera liés au positionnement fixe simulé ou aux empilements, il y a des stratégies de résolution de bug à connaître, du type :
- procéder de manière bourrin mais efficace par élimination progressive du code en prenant les blocs initiaux CSS les uns après les autres (ou alors à l'instinct face à la CSS, pour les habitués)
- détecter les grands classiques d'IE hors layout repérables à quelques combinaisons de base de propriétés CSS : double marge des flottants en cas de float+marge du même côté, etc.
- anticiper un cas de haslayout en effectuant un test avec zoom:1 dans IE6.0 en présence de flottants (3px jog, clear inopérant...), de reflow (bug associé à une position relative ou un hover, bug disparaissant quand la page perd/gagne le focus), de conteneur initial de bloc positionné, de bug de liste (background, espaces verticaux de menus excédentaires, puces ou numérorations aberrantes...), ou de zone réactive de lien, etc.
- vérifier un bug de gel d'IE en cas de calcul de largeur en boucle quand il tente de calculer la largeur d'un enfant en fonction de la largeur d'un parent elle-même déterminée par la largeur de l'enfant (cf un nowrap sur les espaces ce matin dans un autre sujet)
- vérifier dans et hors IE un cas d'empilement sur les éléments type iframe, liste déroulante, etc. quand un positionnement absolu rencontre un objet particulier du type formulaire, object ou form

C'est surtout histoire de formaliser et de donner les clés nécessaires. Ce qui n'est pas si facile que cela, mais tout de même tout à fait possible. La prochaine étape d'Alsa, peut-être : la gestion rationnalisée et industralisable des bugs d'implémentation Smiley cligne

</>
Modifié par Laurent Denis (26 Nov 2005 - 11:12)

garden

27 Nov 2005 à 16:10

Bonjour à vous tous,
Je vous remercie de votre aide et désolé globy pour le bout de code, ainsi que pour la solution lineheight qui était correcte ( essayé, mais IE ne répondait pas correctement)

Merci à tous et bonne soirée
Garden Smiley cligne

Sujet clos