tabella non va bene con IE

[queengab]

Ciao a tutti,

ho un piccolo problema. Sto lavarando con un controllo asp.net... il controllo fuzniona bene sul mio sito ma la tabella che genera se vista con ie non ha problemi se vista con ff invece va sopra ai vari menu che ho destra... come fare?

Gab


/* GENERAL STYLES */
td
{
border: none;
min-width: 120px;
}

tr
{
border: none;
}

th
{
border: none;
min-width: 120px;
}

dl
{
border: 3px solid #ccc;
padding: 0.5em;
width: 90%;
}

dt
{
float: left;
clear: left;
width: 120px;
text-align: right;
font-weight: bold;
}

dt:after
{
content: ":";
}

dd
{
margin: 0 0 0 130px;
padding: 0 0 0.5em 0;
}


.UCGV_Table
{
width: 100%;
}


.UCGV_Header
{
background-color: #ddd;
}

.UCGV_ColumnHidden
{
width: 1px;
max-width: 1px;
visibility: hidden;
}

.UCGV_HeaderHidden
{
width: 0px;
max-width: 0px;
visibility: hidden;
}



/* EDITOR PROPERTIES */

[Mauro Accornero]

Mi è poco chiaro visto così ma credo che la problematica sia che uno dei due elementi tra tabella e menu escano dal flusso, questo può essere causato da un float o da un position:absolute per cui si sovreppongono. Ho notato che che hai dato un float e un clear al dt, di norma queste proprietà si impostano su elementi differenti per gestire il float e poi ripristinare il flusso nella pagina, impostare sia float che clear sullo stesso elemento non credo aiuti. Vedo che hai usato anche la pseudo classe :after, sappi che non non è supportata da tutti i browser, visto che usi asp non dovresti aver problemi ad aggiungere ":" dopo il testo. Se riesci a postare l'html forse posso darti qualche dritta in più...

[fcaldera]

devi postare un link da vedere, è necessario vedere il codice html che usi per farsi un'idea del problema

[queengab]

eeehhhhhhhh!!!!!!

sto lavorando in locale. Non posso postare il codice perchè il sito che stiamo mettendo su è ancora in fase di sviluppo e quelli dell'azienda mi ucciderebbero...

Però vi ringrazio per i vostri consigli oggi provo a fare un po' di prove e vi faccio sapere



Gabriele

[queengab]

aggiungendo un border. collapse;

alla tabella sembra che vada bene nel senso che si stringe e si apre....

Adesso però ho semplici problmi di sitle nel senso che mentre su internet explorer 6-7 si vede come si dovrebbe cioè con la tabella bordata rossa e tutte le linee td e tr bianche e il table header anch'esso bordato rosso...

Su internet explorer 8 e su firefox invece si vedono tutte le benedette righe delle tabella anche se ho messo border: none; perchè???? Sto impazzendo! Senza cntare che ancora non ho visto su opera chrome e safari..

Help please?

[Mauro Accornero]

Prova a settare:

border-collapse:collapse;
border:1px solid #000000;

così dovresti vedere il bordo di 1 pixel nero sulla tabella, se invece vuoi far sparire il bordo usa:

border:none;

se il problema persiste usa:

border:none !important;

se si risolve vuol dire che c'è una regola superiore che impone il bordo alle tabelle e con !important la sovrascrivi, se non si risolve neanche così controlla di non aver lasciato altre regole css interne alla pagina o in linea nei tag. Verifica anche il doctype che sia corretto.

[queengab]

ho aggiunto l'important

adesso è perfetto per ie!!! ma firefox ancora mi visualizza la tabella con tutti i bordi rossi anche quelli delel singole celle! Penso che mi uccidrò! E' da stamattina che ci combatto

Cmq grazie tantissimo per il tuo aiuto

[Mauro Accornero]

Figurati, l'important definisce una regola come prioritaria rispetto alle altre, il motivo per cui firefox ti da ancora i bordi può essere dovuto all'utilizzo di un altro important sui bordi delle tabelle o qualche regola inlinea, fai una ricerca di "table" e "border" nella pagina html e nel css probabilmente c'è qualche regola che definisce i bordi rossi. quando la trovi definisci una classe per quella regola e usala per gli elementi che ti servono così non usi l'important che funziona ma è sempre meglio tenerla come risorsa finale.

[queengab]

Ho trovato un escamotage per postarvi il codice html generato dal controllo ascx e dal css...
ho sempre il problema della diversa visualizzione tra ie e FF e tutti gli altri browser... inoltre mi sono accorto che sullascx alcune regole css sono già operative direttamente dal controllo...anche se il fatto che il td e il tr non prendano il border:none; su FF mi rimane davvero oscuro... Ho provato a vedere quello che mi dicevi ma non ho trovato altri riferimenti a tabel o al border di altre table che potrebbero infastidire... La cosa bella è che se tolgo il border alal classe table invece di non vedersi nulla...si vede la tabella contrornata nera!! Mah Grazie di tutto ciao

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>





<script src="/usercontrols/GridControls/Scripts/CollapsableGridViewJScript.js" type="text/javascript"></script>
<link href="/css/BP.Umb.UserControls.css" rel="stylesheet" type="text/css" />




<div>
<table class="UCGV_Table" cellspacing="0" rules="all" border="1" id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_Ma sterTemplateContentPlaceHolder_UmbracoCollapsableG ridView_17_GridViewUCGV" style="border-collapse:collapse;">
<tr class="UCGV_Header">
<th class="UCGV_HeaderHidden" scope="col"></th><th class="UCGV_HeaderExpand" scope="col"></th><th scope="col">data</th><th scope="col">tipo</th><th scope="col">oggetto</th><th scope="col">num</th><th scope="col">descr</th><th scope="col">allegato</th>
</tr><tr class="UCGV_Row">
<td class="UCGV_ColumnHidden">

</td>
<td colspan="100%">
<div id="div1" class="UCGV_Detail" style="display: none; position: relative;">
<a href="javascript:switchViews('div1', 'one');">
[img]/usercontrols/GridControls/Images/expand_button_white.jpg[/img]
</a>
<div style="position: relative; left: 25px;">
<span id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_Ma sterTemplateContentPlaceHolder_UmbracoCollapsableG ridView_17_GridViewUCGV_ctl02_DetailsLabel" style="display:inline-block;width:100%;"><dl><dt>data</dt><dd>12/12/2012 0.00.00</dd><dt>tipo</dt><dd>prova</dd><dt>oggetto</dt><dd>prova</dd><dt>num</dt><dd>1 </dd><dt>descr</dt><dd>provaprovaprova</dd><dt>allegato</dt><dd>prova.pdf</dd></dl></span>

</div>
</div>
</td>
</tr>
<tr >
<td class="UCGV_ColumnHidden" >
</td><td>
<a href="javascript:switchViews('div1', 'one');">
[img]/usercontrols/GridControls/Images/expand_button_white.jpg[/img]

</a>
</td><td>12/12/2012 0.00.00</td><td>prova</td><td>prova</td><td>1 </td><td>provaprovaprova</td><td>prova.pdf</td>
</tr><tr class="UCGV_RowAlt">
<td class="UCGV_ColumnHidden">
</td>
<td colspan="100%">

<div id="div2" class="UCGV_Detail" style="display: none; position: relative;">
<a href="javascript:switchViews('div2', 'one');">
[img]/usercontrols/GridControls/Images/expand_button_white.jpg[/img]
</a>
<div style="position: relative; left: 25px;">
<span id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_Ma sterTemplateContentPlaceHolder_UmbracoCollapsableG ridView_17_GridViewUCGV_ctl03_DetailsLabel" style="display:inline-block;width:100%;"><dl><dt>data</dt><dd>13/12/2013 0.00.00</dd><dt>tipo</dt><dd>prova</dd><dt>oggetto</dt><dd>prova</dd><dt>num</dt><dd>prova </dd><dt>descr</dt><dd>prova</dd><dt>allegato</dt><dd>prova</dd></dl></span>

</div>
</div>
</td>
</tr>
<tr >
<td class="UCGV_ColumnHidden" >
</td><td>
<a href="javascript:switchViews('div2', 'alt');">
[img]/usercontrols/GridControls/Images/expand_button_white_alt.jpg[/img]

</a>
</td><td>13/12/2013 0.00.00</td><td>prova</td><td>prova</td><td>prova </td><td>prova</td><td>prova</td>
</tr>
</table>
</div>

</form>


</div></div>

[Mauro Accornero]

Vedo che hai del codice javascript, giusto per curiosità prova a guardare la pagina nel browser con il codice javascript disattivato e vedere che succede al bordo.

Se hai già tentato con border:none !important; e non si risolve non saprei che altro suggerirti, forse uno degli script .js che hai nella pagina cambiano qualche regola del css al volo se è così disattivando i javascript non si dovrebbero più vedere i bordi, se è così bisognerebbe metter mano allo script per modificarlo in maniera che non cambi la regola per la tabella.