Encore un bug IE....

Bonjour à toutes et à tous,

Je suis en train, pour une bonne part grâce à Alsacréations, de créer un design pour un petit site en html et css que vous pouvez voir ici et dont vous trouverez le code css à la fin de ce post.
Je viens de rajouter un menu horizontal (en suivant le tuto "créer des menus simples en css") qui me plaît pas mal du tout si ce n'est deux petits détails :
1/ les petits pointillés qui subsistent lorsqu'on clique sur les rubriques
2/ un petit bug d'affichage sous IE 7 qui décale la barre de menu d'environ 40 pixels sur la droite, laissant du coup un espace noir à sa gauche. Je dis un petit bug d'IE car c'est plus sympa de leur rejeter la faute, mais c'est peut être un bug de moi

Merci pour votre aide précieuse
Olivier

P.S. je précise que c'est #navigation qui met en forme le menu avec <ul id="navigation"> dans le html

html, body
{
	height: 100%;
	margin: 0;
	background: #fff url(../images/fondcarboneblanc.gif) repeat;
	color: #ffffff;


}

#global
{
	min-height: 100%;
	width: 1000px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
	background: url(../images/global5.png) center repeat-y;

}

#header
{
	background: #7fcf2e url(../images/header5b.png) no-repeat;
	color: #fff;
	height: 129px;
}

#navigation
{
	background: #000000 url(../images/menu5b.png) no-repeat;
	color: #aaaaaa;
	height: 40px;
	padding-top: 12px;
	font-family: Verdana, "Times New Roman", Times, serif;
	font-size:11px;
	text-decoration: none;
	margin-bottom: 0px;
	margin-top: 0px;
	list-style: none;
	padding-left: 180px;
}

#navigation li
{
	float: left;
	list-style: none;
	width: 140px;
	border: 0px
	margin-right: 0px;
	color: #aaaaaa;
	text-decoration: none;
}	

#navigation li a {
	display: block ;
	background: none ;
	color: #666666 ;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 1em ;
	padding: 4px 0 ;
	text-align: left ;
	text-decoration: none;
	}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
	background: none;
	color: #FFFFFF ;
	text-decoration: none;
	}

#header h1
{
	margin: 0;
	text-indent: -50000px;
}

#main
{
	/* Pour éviter la superposition 
	du pied de page et du contenu : */
	padding-bottom: 50px; 
	overflow: auto;
	clear: left;
}


#col_left
{
	float: left;
	width: 390px;
	margin-left: 10px;
	background: #000000;
}

#col_center
{
	float: left;
	width: 380px;
	margin-top: 0px;
	margin-left: 10px;
	background: #000000;
}

#col_right
{
	float: right;
	width: 190px;
	margin-right: 10px;
	background: #000000;
}

.bloc_center
{
   background-color: #AAAAAA;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   margin-top: 0px;
   padding: 5px;
   border: 0px solid #dddddd;
   margin-bottom: 10px;
   
}

.bloc_left
{
   background-color: #555555;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   margin-top: 0px;
   padding: 0px;
   margin-left: 0px;
   border: 0px solid #dddddd;
   margin-bottom: 10px;
   
}

.bloc_right
{
   background-color: #555555;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
   margin-top: 0px;
   margin-right: 0px;
   padding: 0px;
   border: 0px solid #dddddd;
   margin-bottom: 10px;
   
}

#col_left p
 {
	margin-left: 5px;
	margin-right: 5px;
	padding-top: 0px;
	padding-bottom: 10px;
	text-align: justify;
	color: #AAAAAA;
	font-family: Verdana, Arial, "Arial Black", "Times New Roman", Times, serif;
	font-size:11px;
	}
	
#col_left p:hover
 {
	margin-left: 5px;
	margin-right: 5px;
	padding-top: 0px;
	padding-bottom: 10px;
	text-align: justify;
	color: #cccccc;
	font-family: Verdana, Arial, "Arial Black", "Times New Roman", Times, serif;
	font-size:11px;
	}	

#col_center p
 {
	font-family: Verdana, Arial, "Arial Black", "Times New Roman", Times, serif;
	font-size:11px;
	text-align: justify;
	color: #555555;
	}	


#col_left h3
 {  

   background: #ccc url(../images/fondh3b.png) no-repeat left top;
   height: 32px;
   line-height: 32px;
   margin-top: 0px;
   border: 0px solid white;
   color: #000000;
   font-family: Arial, "Times New Roman", Times, serif;
   font-weight: bold;
   padding-left: 50px;
   font-size: 18px;
}

#col_center h3
 {    
   color: #000000;
   font-family: Arial, "Times New Roman", Times, serif;
   font-weight: bold;
   text-align: left;
   font-size: 14px;
}
	


#col_right h3
 {  

   background: #ccc url(../images/fondh3b.png) no-repeat left top;
   height: 32px;
   line-height: 32px;
   margin-top: 0px;
   border: 0px solid white;
   color: #000000;
   font-family: Arial, "Times New Roman", Times, serif;
   font-weight: bold;
   padding-left: 50px;
   font-size: 18px;
}

#col_right p
 {
	margin-left: 5px;
	margin-right: 5px;
	padding-top: 0px;
	padding-bottom: 10px;
	text-align: justify;
	color: #AAAAAA;
	font-family: Verdana, Arial, "Arial Black", "Times New Roman", Times, serif;
	font-size:11px;
	}

#col_right p:hover
 {
	margin-left: 5px;
	margin-right: 5px;
	padding-top: 0px;
	padding-bottom: 10px;
	text-align: justify;
	color: #cccccc;
	font-family: Verdana, Arial, "Arial Black", "Times New Roman", Times, serif;
	font-size:11px;
	}		
	
#footer {
	position: absolute;
	width: 980px;
	height: 40px;
	bottom: 0;
	background: #222222 url(../images/imgfooter5b.png) no-repeat;
	color: #fff;
	border: 10px solid black;
	}
	
#footer p {
	margin: 2px 0;
	font-family: Verdana, "Times New Roman", Times, serif;
	font-size:10px;
	color: #aaaaaa;
	padding: 10px 10px;
	text-align: center;
	}

Modifié par diaboliv (14 May 2009 - 13:22)

Salut,

diaboliv a écrit :
1/ les petits pointillés qui subsistent lorsqu'on clique sur les rubriques
2/ un petit bug d'affichage sous IE 7 qui décalle la barre de menu d'environ 40 pixels sur la droite

1) Les pointillés en question sont très utiles quand on navigue au clavier (tabulations). Lire par exemple ce sujet.

2) il ne s'agit pas d'un bug mais d'une différence d'implémentation. Voir cette astuce et plus globalement cet article.


PS : il est inutile de donner son code quand on met un lien vers la page en ligne.
Modifié par Heyoan (14 May 2009 - 11:58)

Bonjour diaboliv,

1/ alsacreationS
2/Les petits pointillés qui subsistent lorsqu'on clique sur les rubriques...servent à visualiser l'endroit où l'on se trouve dans la page lorsque l'on navigue au clavier...les retirer va à l'encontre de certains principes que nous aimons défendre par ici...(accessibilité, ergonomie,...) j'aurai même tendance à penser (et écrire soyons fou) que l'on peut/doit renforcer cette visualisation via la pseudo-classe :focus
Cependant, pour répondre concrêtement à ta question cela ce gère avec la propriété css "outline", que tu peux styliser à ta convenance, par exemple :

élément, classe, identifiant {
outline: 1px dotted #FFF;
}

ou supprimer :

élément, classe, identifiant {
outline:none;  [bawling] 
}

Tu trouveras de nombreuses et interessants discussions sur le sujet ici même (utiliser la fonction recherche) ou sur le web
3/Peut-être un souci de rendu par défaut ?

Cdt,
Sylvain

Edit: Je dois arrêter de boire du café, je dois arrêter de boire du café....
Modifié par 6l20 (14 May 2009 - 12:13)

Merci pour vos réponses rapides et enrichissantes...

1/ désolé, mille excuses et 30 coups de bâton pour Alsacréations, c'est rectifié

2/ je savais pas, ou du moins j'avais pas pensé aux utilisateurs clavier, j'y penserais dorénavant mais peut être est ce possible d'avoir les pointillés juste autour du texte et non sur la longueur de mon cadre, car du coup, ça déborde de mon background...

3/ Pas la peine de donner le code...même pour le css ??? parce que moi je peux bien afficher le code source d'une page html mais pas voir le code css...

4/ je vois que j'ai encore beaucoup à lire et à apprendre, mais c'est pas grave, j'aime ça

5/ encore merci de donner de votre temps et de partager votre savoir

@+
Olivier

diaboliv a écrit :
3/ Pas la peine de donner le code...même pour le css ??? parce que moi je peux bien afficher le code source d'une page html mais pas voir le code css...

Il existe plusieurs extensions pour faire cela :
* Firefox : Web Developer / Firebug
* Opera : Dragonfly
* IE : Internet Explorer Developer Toolbar