span

[sfear7]

ciao a tutti,

sto usando asp 2.0 per un sviluppare un sito web.

cercando di essere conforme alle regole uso span e div per impaginare.

il problema è sugli span che uso per allineare due detailsview uno a fianco dell'altro.

Firefox si sbaglia completamente e mette i due span uno sopra all'altro.

secondo me perchè non riconosce la proprietà width dello stile inline, e quindi pensa che siano lunghi il 100% della pagina e quindi non riesce ad affiancarli.


qualcuno mi sa dare una qualche indicazione????

grazie
Fabrizio

[Sgro]

O più semplicemente firefox interpreta correttamente le proprietà, in quanto agli elementi inline non è possibile specificare le dimensioni.

I due "detailsview" in che tag html vengono trasformati? Se vengono resi con degli elementi block level, è normale che stiano uno sotto l'altro. Tutti gli elementi block-level hanno un linebreak prima e dopo, automaticamente, a meno che non specifichi la proprietà float.

Posta il codice di output della tua pagina altrimenti è impossibile aiutarti.

[sfear7]

ciao,
intanto grazie.

qui è come viene in explorer. I due span sono DVPos e DVMola:

<div id="container" style="width: 100%">
<div id="nucleo" style="left: 12%; width: 76%; position: relative;">
<div id="core" style="position: relative; top: 25px; width: 100%;">

<div id="ctl00_ContentBody_core2" style="height: 776px">
<input type="hidden" name="ctl00$ContentBody$hidIDMola" id="ctl00_ContentBody_hidIDMola" value="3" />

<h1><span id="ctl00_ContentBody_lblTitolo1">Cambio Mola</span></h1>

<span id="DVPos" style="left: 0px; width: 40%; position: relative; top: 0px">
<div>
<table cellspacing="0" cellpadding="4" align="Center" border="0" id="ctl00_ContentBody_DVPosizione" style="font-family:Arial Narrow;height:100px;width:100%;border-collapse:collapse;">
<tr class="Header">
<td colspan="2">Dettaglio Posizione</td>
</tr><tr class="Row">
<td class="FieldHeader">Linea</td><td>TRT01</td>
</tr><tr class="AlternateRow">
<td class="FieldHeader">Macchina</td><td>1</td>
</tr><tr class="Row">
<td class="FieldHeader">Posizione</td><td>2</td>
</tr>
</table>
</div>
</span>

<span id="DVMola" style="width: 40%; position: relative" >
<div>
<table cellspacing="0" cellpadding="4" align="Center" border="0" id="ctl00_ContentBody_DVMolaCorrente" style="font-family:Arial Narrow;height:100px;width:100%;border-collapse:collapse;">
<tr class="Header">
<td colspan="2">Dettaglio Mola Installata</td>
</tr><tr class="Row">
<td class="FieldHeader">Descrizione</td><td>ADI S5</td>
</tr><tr class="AlternateRow">
<td class="FieldHeader">Data Montaggio</td><td>23/11/2007 11.59.39</td>
</tr><tr class="Row">
<td class="FieldHeader">M3 Abrasi</td><td>- - -</td>
</tr><tr class="AlternateRow">
<td class="FieldHeader">Val. Nominale</td><td>800</td>
</tr>
</table>
</div>
</span>



<div id="divGrid" style="left: 0px; width: 100%; position: relative; top: 15px; height: 345px; text-align: right;">

<h2>
<span id="ctl00_ContentBody_lblNuovaMola">Selezionare Nuova Mola:</span>
</h2>
<style type="text/css">
.ctl00_ContentBody_gridOneC0I{}.ctl00_ContentBody_ gridOneC0AI{}.ctl00_ContentBody_gridOneC0GIV{overf low-x:hidden;width:198px;text-overflow:ellipsis;white-space:nowrap;padding-left:4;padding-right:4;}.ctl00_ContentBody_gridOneC1I{}.ctl00_Con tentBody_gridOneC1AI{}.ctl00_ContentBody_gridOneC1 GIV{overflow-x:hidden;width:198px;text-overflow:ellipsis;white-space:nowrap;padding-left:4;padding-right:4;}.ctl00_ContentBody_gridOneC2I{}.ctl00_Con tentBody_gridOneC2AI{}.ctl00_ContentBody_gridOneC2 GIV{overflow-x:hidden;width:198px;text-overflow:ellipsis;white-space:nowrap;padding-left:4;padding-right:4;}.ctl00_ContentBody_gridOneCIIC{width:15px ;height:20px;}.ctl00_ContentBody_gridOneI{color:Bl ack;background-color:#FBFEF0;font-family:Verdana;font-size:7.5pt;vertical-align:Middle;white-space:nowrap;height:20px;}.ctl00_ContentBody_gridO neAI{color:Black;background-color:Beige;font-family:Verdana;font-size:7.5pt;vertical-align:Middle;white-space:nowrap;height:20px;}.ctl00_ContentBody_gridO neFC{border-style:none;padding-left:1;}.ctl00_ContentBody_gridOneSI{border-left-style:none;border-right-style:none;padding-left:1;padding-top:1;padding-bottom:1;}
</style>
<div id="ctl00$ContentBody$gridOneColumn0EditorViewerPa ttern" style="position:absolute;visibility:hidden;">
<div onmouseover="OnEMouseOver(&quot;ctl00$ContentBody$ gridOneColumn0Editor&quot;, this)" style="cursor:default;vertical-align:Middle;white-space:nowrap;width:120px;padding-left:4;padding-right:4;overflow-x:hidden;text-overflow:ellipsis;">

[sfear7]

qui ti allego come viene in firefox, cioè uguale:

<div id="container" style="width: 100%">
<div id="nucleo" style="left: 12%; width: 76%; position: relative;">
<div id="core" style="position: relative; top: 25px; width: 100%;">

<div id="ctl00_ContentBody_core2" style="height: 776px">
<input type="hidden" name="ctl00$ContentBody$hidIDMola" id="ctl00_ContentBody_hidIDMola" value="3" />

<h1><span id="ctl00_ContentBody_lblTitolo1">Cambio Mola</span></h1>

<span id="DVPos" style="left: 0px; width: 40%; position: relative; top: 0px">
<div>
<table cellspacing="0" cellpadding="4" align="Center" border="0" id="ctl00_ContentBody_DVPosizione" style="font-family:Arial Narrow;height:100px;width:100%;border-collapse:collapse;">
<tr class="Header">
<td colspan="2">Dettaglio Posizione</td>
</tr><tr class="Row">
<td class="FieldHeader">Linea</td><td>TRT01</td>
</tr><tr class="AlternateRow">
<td class="FieldHeader">Macchina</td><td>1</td>
</tr><tr class="Row">
<td class="FieldHeader">Posizione</td><td>2</td>
</tr>
</table>
</div>
</span>

<span id="DVMola" style="width: 40%; position: relative" >
<div>
<table cellspacing="0" cellpadding="4" align="Center" border="0" id="ctl00_ContentBody_DVMolaCorrente" style="font-family:Arial Narrow;height:100px;width:100%;border-collapse:collapse;">
<tr class="Header">
<td colspan="2">Dettaglio Mola Installata</td>
</tr><tr class="Row">
<td class="FieldHeader">Descrizione</td><td>ADI S5</td>
</tr><tr class="AlternateRow">
<td class="FieldHeader">Data Montaggio</td><td>23/11/2007 11.59.39</td>
</tr><tr class="Row">
<td class="FieldHeader">M3 Abrasi</td><td>- - -</td>
</tr><tr class="AlternateRow">
<td class="FieldHeader">Val. Nominale</td><td>800</td>
</tr>
</table>
</div>
</span>



<div id="divGrid" style="left: 0px; width: 100%; position: relative; top: 15px; height: 345px; text-align: right;">

<h2>
<span id="ctl00_ContentBody_lblNuovaMola">Selezionare Nuova Mola:</span>
</h2>
<style type="text/css">
.ctl00_ContentBody_gri

[Sgro]

Beh l'output html dipende dal server non certo dal browser, quindi non capisco perchè me l'hai postato 2 volte. Il fatto poi che i vari browser abbiano delle differenze nell'interpretazione dei tag e degli stili è un altro paio di maniche.

Comunque fai un uso totalmente insensato degli span. Per la precisione, non ha alcun senso mettere degli elementi block (tipo div, headings, paragrafi, ecc.) all'interno di elementi inline (come span, label, strong, em, ecc.)

Se vuoi che le due tabelle stiano una a fianco dell'altra, devi settare le opportune proprietà css, senza racchiuderle in elementi html inutili e ridondanti.

Anche quello span all'interno di h1, benchè strutturalmente corretto, non ha molto senso. Se devi scrivere all'interno dell'h1 del testo proveniente dal codice lato server, usa un asp:literal invece della asp:label

Ciao.

[sfear7]

ti garantisco che i due output sono diversi... però effettivamente non nel pezzo che ti ho mandato.

i div all'interno dei due span me li ha messi asp quando ha tradotto il detailview.

Ma quindi quali sarebbero le proprietà css che devo impostare?

da quello che ho capito è la dimensione il problema. se la imposto da un css esterno dovrebbe funzionare?

ciao
grazie
F

[Sgro]

CSS interno o esterno non c'entra. Mi sembra di essere stato abbastanza chiaro:

agli elementi inline non è possibile specificare le dimensioni

Se non sai cosa sono elementi inline e elementi block ti conviene cominciare a studiare dalle basi dei fogli di stile. E dai una passata alla tua pagina nel validator del w3 (http://validator.w3.org) e correggi tutti gli errori che ti evidenzia. Partire da un markup pulito e ordinato è la base per una corretta impaginazione tramite CSS.

Ciao