CSS les bordures

Bordures décalage et différences d'affichage

Firefox et Internet Explorer

Il y a d'une part les autres navigateurs, et d'autre part Internet Explorer.
IE est situé volontairement en deuxième position dans ma phrase puisque pour le coup, IE est - à proprement parler - une classe à part... si toutefois classe il y a... mais bon... Avançons un peu, allons allons...

Internet Explorer interpretera par exemple, une "boîte" large de 200 px (zone de contenu), avec des marges intérieures de 20px (padding) et une bordure (border) de 5px vous obtenez une boîte d'une largeur totale de 200px. C'est un modèle de boîte ancien et spécifique à Microsoft.

Pour les autres navigateurs la largeur totale est de 250px (200+20+20+5+5). Les paddings et les borders, s'ajoutent normalement à la zone de contenu de 200px.

Créer une bordure entre les éléments d'une liste

Challenge : ne pas mettre de bordure ni pour le premier ni pour le dernier élément.
Nous aurions tout à fait pu attribuer une classe spécifique au premier / dernier élément en jouant sur border-top ou sur border-bottom. De cette façon, les bordures aux extrémités auraient également été masquées. Voir ci-contre.

Masquer une bordure

Mais comme on s'ennuie quand tout va bien, on complique les données en attribuant la même class à tous les <li> et on utilise la pseudo classe first-child.
Donc, il faudra simplement imposer une marge négative à la class de <li> et indiquer une bordure à zero pour l'élément first-child.Quelle famille j'vous jure...

HTML :

   <div class="test">

    <ul class="borderul">

     <li class="borderli"><a href="link" title="">description1</a></li>

     <li class="borderli"><a href="link" title="">description2</a></li>

     <li class="borderli"><a href="link" title="">description3</a></li>

     <li class="borderli"><a href="link" title="">description4</a></li>

    </ul>

   </div>

CSS :

   .test{

	width: 15%;

	height: auto;

	}


	
	.borderul{

	list-style-type: none;

	}



	.borderli{

	border-top: 1px solid #FF0000;

	margin: -1px 0 0 0;

	text-align: center;

	line-height: 25px;

	font-size: 80%;

	}


	/*correspond au premier élément*/

	.borderli:first-child{

	border: 0;

}

Ainsi, la marge supérieure des éléments de liste étant à -1px, ça tombe bien puisque c'est justement la taille
   de notre bordure haute. La marge suffira donc à masquer la bordure au  lieu de la supprimer. Eh toc !

NDR : ils ne jettent rien...

Warning: include(/footer.php): failed to open stream: No such file or directory in /sda/2/2/latarteauchips/css/bordure.php on line 101

Warning: include(): Failed opening '/footer.php' for inclusion (include_path='/var/www/sda/2/2/latarteauchips/include:.:/usr/php5.6.34/lib/php') in /sda/2/2/latarteauchips/css/bordure.php on line 101