First letter su menù

[Sonikag]

Ho questo menù:

  <div class="menuBar">HOMESERVIZI<a class="menuButton" href="" onclick="return buttonClick(event, 'viewMenu');" onmouseover="buttonMouseover(event, 'viewMenu');">LAVORA 
    CON NOI</a>CONTATTI</div>

Vorrei implementare un first-letter su ogni voce del menù con queste caratteristiche:

font-size: 1.2em;
font-weight: bold;

Il problema che se io associo quelle caratteristiche a menubar first-letter mi prende in considerazione solo la H di home giustamente, mentre se lo metto su menubutton non me lo prende.

[Mich_]

Immagino che avrai un CSS del tipo:

.menuButton {
...
...
}

devi aggiungere DOPO tale definizione:
.menuButton:first-letter {
font-size: 1.2em;
font-weight: bold;
}

[Sonikag]

Tnx! ho provato ma non cambia la formattazione di nessuna first letter. Ho pure provato con:

.menuButton a:first-letter { 
font-size: 1.2em; 
font-weight: bold; 
}

ma non visualizzo nulla di differente!
Il mio css:

div.menuBar
{
	height: 23px;
	position: absolute;
	top: 46px;
	left: 161px;
}
div.menuBar a.menuButton,
div.menu,
div.menu a.menuItem {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 2ems;
  font-style: normal;
  font-weight: normal;
  color: #000000;
}

.menuButton a:first-letter { 
font-size: 1.2em; 
font-weight: bold; 
}

div.menuBar {
/*  background-color: #d0d0d0;
  border: 2px solid;
  border-color: #f0f0f0 #909090 #909090 #f0f0f0;
  padding: 4px 2px 4px 2px;*/
  text-align: left;
/*  border-bottom:3px solid #ffffff;*/
}

div.menuBar a.menuButton {
  background-color: #ffffff;
/*  border-top: 9px solid #FEEFDC;
  border-bottom: 0px solid #ffffff;
  border-left: 0px solid #ffffff;
  border-right: 0px solid #ffffff;*/
  color: #000000;
  cursor: default;
  left: -6px;
  margin: 5px;
  padding: 2px 6px 2px 6px;
  position: relative;
  text-decoration: none;
  top: 0px;
  z-index: 100;
  line-height: 26px;
  background-color: #FEEFDC;
}

div.menuBar a.menuButton:hover {
  background-color: transparent;
  border-bottom: 3px solid #f4d022;
/*  border-top: none;
  border-left: 3px solid trasparent;
  border-right: 3px solid trasparent;*/
  color: #000000;
  line-height: 26px;
}

div.menuBar a.menuButtonActive,
div.menuBar a.menuButtonActive:hover {
  background-color: #F1C7A0;
/*  border-color: #909090 #f0f0f0 #f0f0f0 #909090;
  border-bottom: 3px solid #F1C7A0;
  color: #000000;
  left: 1px;
  top: 1px;*/

  border-bottom: 3px solid #F1C7A0;
  color: #000000;
  line-height: 26px;

}

div.menu {
  background-color: #feefdc;
  border: 0px solid;
  border-color: #F1CF18;
  left: 0px;
  padding: 0px 1px 1px 0px;
  position: absolute;
  top: 0px;
  visibility: hidden;
  z-index: 101;
}

div.menu a.menuItem {
  color: #000000;
  cursor: default;
  display: block;
  padding: 3px 1em;
  text-decoration: none;
  white-space: nowrap;
}

div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
  background-color: #F1C7A0;
  color: #000000;
}

div.menu a.menuItem span.menuItemText {}

div.menu a.menuItem span.menuItemArrow {
  margin-right: -.75em;
}

div.menu div.menuItemSep {
  border-top: 1px solid #909090;
  border-bottom: 1px solid #f0f0f0;
  margin: 4px 2px;
}

Sonia

[Mich_]

Anzitutto mi sono dimenticato di dire che gli pseudo-elementi (tipo :first-letter) non sono riconosciuti da tutti i browser: forse non funzionano in IE, mentre dovrebbero andare in Mozilla / Firefox.

Poi hai nell'ordine (per chiarezza copio solo gli elementi che interessano il menuButton):
(1) .menuBar
(2) .menuBar a.menuButton,
(3) .menuButton a:first-letter
(4) .menuBar
(5) .menuBar a.menuButton
(6) .menuBar a.menuButton:hover
(7) .menuBar a.menuButtonActive,
(8) .menuBar a.menuButtonActive:hover

Le specifiche (5) e (6) chiaramente sovrascrivono la (3).
La (3) va quindi spostata DOPO la (6)
Inoltre io scriverei:
.menuBar a.menuButton:first-letter

Non so come si comporta la pseudo-casse :hover in tal caso. Non ho trovato da nessuna parte come si relazionano pseudo-classi e pseudo-elementi.

[Sonikag]

Grazie come sempre Mitch_
Ho messo questa sequenza e continua a non vedere il first-letter

div.menuBar{...}
div.menuBar a.menuButton, div.menu, div.menu a.menuItem {...}
div.menuBar {...}
div.menuBar a.menuButton {...}
div.menuBar a.menuButton:hover {...}
.menuButton a:first-letter {...}
div.menuBar a.menuButtonActive, div.menuBar a.menuButtonActive:hover {...}

Se poi aggiungo dopo menuButton a:first-letter il codice sotto mi non mi vede l'hover.

.menuBar a.menuButton:first-letter{font-size: 1.2em; 
font-weight: bold; }

Sonia

[Mich_]

Infatti avevo dei dubbi.

Ma non hai detto in che browser stai testando.

Come altro tentativo puoi provare:
.menuBar .menuButton:first-letter{font-size: 1.2em;
font-weight: bold; }
da mettere prima di
.menuBar a.menuButton {...}

Oppure puoi forzare le prime lettere con uno <span> diverso (che dovrebbe funzionare senza limitazioni):
<div class="menuBar">
<div class="menuButton">
<span class="fl">N</span>el <span class="fl">M</span>ezzo <span class="fl">d</span>del <span class="fl">c</span>ammin ...

dove alla classe "fl" avrai dato le specifiche di formattazinoe che vuoi.

[Sonikag]

Sto testando con IE 6 su win xp sp1 e su firefox 0.8.
Purtroppo avevo già fatto il tentativo dello span ma poi mi dava un piccolo bug il javascript che utilizzo per il menù allora ho lasciato perdere.

cmq grazie

Sonia