Topic: visualizzazione tabella in FF

[gabriele]

Ciao a tutti,

ho riscontrato un problema con firefox (tutte le versioni) e mi chiedevo se fosse un bug o semplciemente un mio errore. Vi speigo: sto sviluppando un sito con umbraco (un cms open source in asp.net... lo so non ci posso fare niente sono aoblbigato per contratto!). Ora ho creato un controllo che mi estrae dei dati da un db e li porta direttamente su una pagina web con una tabella. Ho modificato e rimodifcato il css ma mentre su ie, chrome, safari, opera, Konqueror, la tabella si vede con i bordi rossi solo ai lati (come io volgio) su FF la tabella si vede divisa per righe e colonne con tutte le celle bordate di rosso!

Ho impostato sul css border:none important! ho provato altre cose ma nulla!

Secondo voi cosa può essere? L'ho segnalato perchè magari potrà succedere anche a qualcun altro. Io uso prevalentamente firefox quindi mi interessa molto il perchè

Gabriele


Edit by klades --> corretto il titolo per pignoleria

[flod]

Puoi mettere online una pagina di prova (basta la pagina con il risultato)?

[gabriele]

Eh non posso perchè in fase di sviluppo e l'azienda mi apre il cosidetto... Lo so che se non vedete nulla è difficile da valutare. Magari quando vado on line vi posto la pagina. Comuqneu ho provato a nche a visualizzarlo in safe mode ma si vede sempre così...

Al limite ti posso postare il css

[flod]

Non riesci a fare una pagina con una tabella minima e il css? Mica mi servono i dati dell'azienda né le pagine dinamiche

[gabriele]

Ti posto html e css anche se inrealtà dovresti il controllo ascx che viene richiamto perchè li lui richiama le varie classi sulla tabella.... comuqnue se già così riesci a capire qualcosa...

Grazie

Codice: [Seleziona]

<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_MasterTemplateContentPlaceHolder_UmbracoCollapsableGridView_17_GridViewUCGV" style="border-collapse:collapse;">
<tr class="UCGV_Header">
<th class="UCGV_HeaderHidden" scope="col">&nbsp;</th><th class="UCGV_HeaderExpand" scope="col">&nbsp;</th><th scope="col"><a href="javascript:__doPostBack('ctl00$','Sort$data')">data</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$','Sort$tipo')">tipo</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$','Sort$oggetto')">oggetto</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$','Sort$num')">num</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$','Sort$descr')">descr</a></th><th scope="col"><a href="javascript:__doPostBack('ctl00$','Sort$allegato')">allegato</a></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 id="img2div1" alt="Click to show/hide details" border="0"
                                src="/usercontrols/GridControls/Images/expand_button_white.jpg" />
                        </a>
                        <div style="position: relative; left: 25px;">
                            <span id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_MasterTemplateContentPlaceHolder_UmbracoCollapsableGridView_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 id="imgdiv1" alt="Clica per aprire/nascondere dettagli" border="0"
                        src="/usercontrols/GridControls/Images/expand_button_white.jpg" />

                </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 id="img2div2" alt="Click to show/hide details" border="0"
                                src="/usercontrols/GridControls/Images/expand_button_white.jpg" />
                        </a>
                        <div style="position: relative; left: 25px;">
                            <span id="ctl00_ctl00_ctl00_ContentPlaceHolderDefault_MasterTemplateContentPlaceHolder_UmbracoCollapsableGridView_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>1         </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 id="imgdiv2" alt="Clica per aprire/nascondere dettagli" border="0"
                        src="/usercontrols/GridControls/Images/expand_button_white_alt.jpg" />

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

</form>

------------------------------------------------------------
Css

td {

    /*min-width: 80px;*/

padding: 5px 10px;
border: none !important;
padding: 3px;
border-bottom: 1px solid #f0f0f0;
list-style: none;
background-color: #fff;
}

tr {
padding: 5px 10px;
border: none !important;
border-color: #FFF;
}

th {
font: bold 1.1em/120% Verdana, Arial, Helvetica, sans-serif;

    /* min-width: 120px; */

padding: 5px 10px;
font-variant: small-caps;
background-color: #F6DDDF;
padding: 3px;
border: none !important;
}

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 1em 0;
}

.UCGV_Table {
width: 100%;
border: #A50519 1px solid;
border-collapse: collapse;
color: # ;
background-color: #fff;
}

.UCGV_Header {
background-color: #F6DDDF;
color: #822433;
border: none;
font-weight: bold;
text-transform: capitalize;
}

.UCGV_ColumnHidden {
background-color: #F6DDDF;
width: 1px;
max-width: 1px;
visibility: hidden;
border: #FFF;
}

.UCGV_HeaderHidden {
background-color: #F6DDDF;
width: 0px;
max-width: 0px;
visibility: hidden;
border: #FFF;
}


[flod]

Ho tolto un po' di codice perché la pagina era diventata illeggibile.

Come ti ho detto, dovresti cercare di replicare il problema con un esempio minimo (tabella, un paio di righe e css), altrimenti è impossibile darti una mano.

[gabriele]

EDIT: vai qui e scaricati l'html e il css

http://www.megaupload.com/?d=6B4QYW49

Spero possa esserti utile... La tabella dovrebbe essere vbordata di rosso.. ma vabbè è un dettaglio... guarda invece il comportamento sui diversi borwser e su FF

Ciao

mmmh non so come fare... per il momento non posso uscire fuori col mio pc...
da iappena trovo na soluzione posto qui...

Grazie per il tuo aiuto...

Risolveremo l'arcano

[flod]

Io ho provato con Opera, Safari e Firefox e vedo la stessa cosa (nessun bordo rosso). Che cosa dovrei vedere di preciso?

[gabriele]

a me su firefox, a differenza degli altri, si vede la tabella con tutte le singole celle... mentre su opera safari ed ie si vedono solo i bordi alti e bassi della tabella senza celle...

il bordo rosso non te lo fa vedere perchè non ho messo bene il css ma non è importante il rosso, l'importante è capire perchè la tabella su firefox..si veda nella sua struttura intera... poi non so...

Tu cosa pensi?

[flod]

Se metti rules="all" ha ragione Firefox...
http://www.htmlcodetutorial.com/tables/_TABLE_RULES_ALL.html

Prova a togliere quell'attributo dal tag TABLE

[klades]

Inoltre devi togliere l'attributo "border" dal tag TABLE e settare il bordo della tabella via css

[gabriele]

Alleluja!!!! Vittoria!!!! Grande!!!

Ho tolto rules all e border 1 dall'html

ho aggiunto una paio di cose sul css e va!

l'ultimissima cosa è che la column hidden firefox non la vede e quindi la scia uno psazio molto grosso che invece su ie non c'è!

Però chi se ne frega! Intanto ottimo abbiamo risolto!
Lh' scirov sull'intestazione del post!

Grazie davvero per la collaborazione
davvero non sapevo che pesci prendere

Gabriele

[klades]

Prego
Per la cronaca comunque il comportamento di Firefox è corretto perché mettere un valore a "border" comporta automaticamente "rules=all", salvo specifica contraria.

[lucasali]

se non ricordo male devi usare "visibility: collapse"
...