li:first-child:after

**mbistato** · 04-02-2014, 20:34

Salve a tutti,

sto lavorando sul breadcrumbs della mia home page ma ho un piccolo problema che da solo non riesco a risolvere.

Di seguito il mio codice html:

codice HTML:

<div id="breadcrumb">          <ul>              <li><strong>TU SEI QUI:</strong></li>              <li><a href="http//:www.techenna.com">Home</a></li>         </ul>        </div>

Mentre qui sotto il CSS:

codice:

#breadcrumb ul {
	padding: 0 0 0.2em 0;
	list-style: none;
	border-bottom: 1px solid #000;
}


#breadcrumb  li {
	padding: 0 0.5em 0 0;
	display: inline;
}


#breadcrumb  li:after {
	content: '\3E';
	margin-left: 0.3em;
}


#breadcrumb  li:first-child:after {
    content: " ";
}


#breadcrumb  li:last-child:after {
    content: " ";
}

Il problema è che anche dopo il first child del menu mi compare la freccia ">". Cosa c'è che non va nel mio CSS?

**Prill** · 04-02-2014, 21:17

col tuo codice vedo la > inserita correttamente, non appare dopo la prima voce (tu sei qui) ma appare sulle successive (se vado a inserirle) e non sull'ultima

**mbistato** · 05-02-2014, 12:14

Scusami ho dimenticato una parte nel codice CSS:

codice:

.breadcrumb-conteiner{
width: 960px; 
height: 30px;
background:#d2d2d2; 
z-index: 9999
}


#breadcrumb {
margin:6px 20px;
width: 920px;
}

e il codice HTML completo è il seguente:

codice HTML:

<div class="breadcrumb-conteiner">
        <div id="breadcrumb">
          <ul>
              <li><strong>TU SEI QUI:</strong></li>
              <li><a href="http//:www.techenna.com">Home</a></li>
         </ul>
        </div>
      </div>

**ac_socmel** · 05-02-2014, 12:21

sarebbe utile alla discussione sapere il/i browser con cui stai testando

**mbistato** · 05-02-2014, 12:44

Con chrome ma anche con ie 9 ho lo stesso problema

**Prill** · 05-02-2014, 15:18

visualizzo correttamente con firefox, chrome, safari e ie9 (le versioni inferiori di Explorer non supportano last-child), uso una pagina con doctype completo dichiarato

**mbistato** · 05-02-2014, 15:34

è strano... io uso questo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

**Prill** · 05-02-2014, 15:39

anch'io
list.PNG

**mbistato** · 05-02-2014, 16:16

Se provi ad andare qui pure?

**Prill** · 05-02-2014, 16:24

no, da te il css non è reso correttamente, problemi col doctype, correggi con

codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Discussione: li:first-child:after

Strumenti discussione

Ricerca discussione

Visualizza

li:first-child:after

Permessi di invio