Modif (aléatoires) sur Galerie photo...

Bonjour,
ce post fait suite au précédent concernant la galerie photo corrigée par Hermann (encore marci pour ça ).
j'ai apporté qqs modifs, et notamment une div avec les mots "précédent et "suivant" (vérification faite dans FF et Safari) ça donne à peu près ce que je veux..
Néanmoins je souhaiterais que des pipes apparaissent de chaque côté des mots "précédent et "suivant" et à l'intérieur... mais n'y arrive pas...
ce que j'ai tenté...

#suivant {
	font-size: 11px;
	background-color: #FFFFFF;
	line-height: normal;
	background-position: left;
	width: 200px;
	float: left;
	border-right-color: #666666; /* j'ai effectivement une barre*/
	border-right-width: 1px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-right-style: solid;
	border-left-style: solid;
	border-left-color: #666666;
}

je me permets de mettre le tout...
si j'ai fait n'importe quoi, merci beaucoup de me corriger

/* correction d'Hermann*/

#container ul {

	float:left;

	width:280px; 

	height:386px; 

	padding:0;  

	margin:5px; 

	list-style:none; 

	}

#container li {float:left;}

/* Remove the images and text from sight */

#container a.gallery span {

	position:absolute; 

	overflow:hidden; 

	width:1px; 

	height:1px; 

	top:5px; 

	left:5px; 

	background:#fff;

	}

/* Adding the thumbnail images */

#container a.gallery, #container a.gallery:visited {

	display:block; 

	color:#666666; 

	text-decoration:none; 

	border:1px solid #000; 

	margin:1px 2px 1px 2px; 

	text-align:left; 

	cursor:default;

	}

#container a.slidea, #container a.slideb, #container a.slidec, #container a.slided, #container a.slidee,

#container a.slidef, #container a.slideg, #container a.slideh, #container a.slidei {

	background: url(p1.jpg); 

	height:80px; 

	width:80px;

	}

/* styling the hovers */

#container a.gallery:hover {border:1px solid #fff;}

#container a.gallery:hover span {

	position:absolute; 

	width:300px;  /*valeur modifiée >  trop étroit*/

	height:400px; 

	top:0px; 

	left:340px; /*valeur modifiée*/

	color:#666666; 

	background:#fff;

	border: 1px solid #00FF00

	}

/* j'ai ajouté ceci */

#container .barresuivantprecedent {
	float: left;
	height: 20px;
	width: 300px;
}

[b]/* j'ai ajouté ceci mon pb est là*/[/b]

 #suivant {
	font-size: 11px;
	background-color: #FFFFFF;
	line-height: normal;
	background-position: left;
	width: 200px;
	float: left;
	border-right-color: #666666;
	border-right-width: 1px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	border-right-style: solid;
	border-left-style: solid;
	border-left-color: #666666;
}

#container a.gallery:hover img {

	float:left; 

	margin-right:5px;

	border:1px solid #fff; 

	}

#container a.slideb:hover img, #container a.slidei:hover img {float:right;}


/* et ceci avec dyslexie*/
#conatinersuivpreced {
	position:absolute;
	left:12px;
	top:351px;
	width:159px;
	height:18px;
	z-index:2;
}

Désolée si c'est très brouillon, j'essaye de m'appliquer pour que ce soit compréhensible... mais ce n'est pas évident