firefox e i width dei span

**lozmatic** · 03-11-2005, 16:56

Voglio creare 3 tabs larghi 255px ciascuno.

In IE basta che aggiungo width: 255px; allo stile del per il link. In FireFox, pero', questo valore non e' preso in considerazione e i tre tabs hanno lunghezza diverse (determinate dalla lunghezza del testo per i link).

Ho provato anche a definire degli span con width: 255px ma lo stess non funziona in FireFox.

Help!

Grazie.

Loz

**thomas_anderson** · 03-11-2005, 17:15

Usa i div.

**Savioz** · 03-11-2005, 17:19

Originariamente inviato da thomas_anderson
Usa i div.

mi associo e ti posto www.constile.org per studiare il box model sia su ff che ie

**thomas_anderson** · 03-11-2005, 17:24

codice:

#tabs {
  width: 100%;
  height: 2em;
  margin: 0;
  padding: 0;
}
.atab {
  width: 255px;
  float: left;
  margin: 0;
  padding: 1em 0.5em;
  background: #f8f8ee;
  border: 1px solid;
  border-color: #ccc #aaa #aaa #ccc;
}

**lozmatic** · 03-11-2005, 18:50

Non ho ben capito come implementare il codice, thomas_anderson.

ovvero, dove metto class="tabs" e class="atab"?

grazie!!!

**webus** · 03-11-2005, 23:17

Originariamente inviato da lozmatic
Voglio creare 3 tabs larghi 255px ciascuno.

In IE basta che aggiungo width: 255px; allo stile del per il link. In FireFox, pero', questo valore non e' preso in considerazione e i tre tabs hanno lunghezza diverse (determinate dalla lunghezza del testo per i link).

Il comportamento di Firefox è quello corretto, stando alle specifiche del CSS2.1.

L'attribtuto width, infatti, si applica a tutti gli elementi, salvo gli inline non sostituiti*, dove si intende un contenuto che non ha una sua dimensione intrinseca, come nel caso di immagini o filmati.

Nel tuo caso quindi la larghezza è data prorpio dalla larghezza del testo contenuto.

L'alternativa?
Trasformare l'elemento contenitore in una "box**", come ti è già stato suggerito.

* è una traduzione brutta-letterale di non-replaced elements. Se qualcuno ne ha una migliore, ben venga.

** questa traduzione te la risparmio

**lozmatic** · 04-11-2005, 12:25

ok, ho capito tutto.

Ma in FF non tornano i conti. Ovvero, ho definito un div a 765px con 3 tab/link 255px ciascuno, ma non si alinea il tutto perfettamente come in IE. L'ultimo tab appare nella riga sottostante:

codice:

<html>
<head>

<style>
div.header {
	border-left: 1px solid #006699;
	border-right: 1px solid #006699;
	border-top: 1px solid #006699;
	border-bottom: 0px;
	width: 765px;
	height: 60px;
}

a.tab
  {
	color: #4682B4;
	background-color: #ffffff;
	border: 1px solid #006699;
	width: 255px;
	float: left;
}

div.tabs {
   width: 765px;
}
</style>

</head>
<body>

<div class="header">Header</div> 

<div class="tabs">
Tab 1
Tab 2
Tab 3
</div>

</body>
</html>

Qualcuno mi sa spiegare perche?

**Mich_** · 04-11-2005, 13:22

Molto semplice:
(255+1+1) * 3 = 771 che e` maggiore di 765

Nel box model dei browser conformi al W3C padding, margin e border si sommano alla larghezza per avere la larghezza totale.
Questo non e` vero nel box model di IE.

Vedi qualsiasi manuale sul box model per referenza.

Discussione: firefox e i width dei span

Strumenti discussione

Ricerca discussione

Visualizza

firefox e i width dei span

Re: firefox e i width dei span

Permessi di invio