Click here to Skip to main content
15,868,141 members
Home / Discussions / Web Development
   

Web Development

 
AnswerRe: Opening new window using clientscript.registerstartupscript() on clickin linkbutton Pin
omlac9-Feb-09 22:47
omlac9-Feb-09 22:47 
QuestionDatagrid Paging?? Pin
ketan bader3-Feb-09 2:48
ketan bader3-Feb-09 2:48 
AnswerRe: Datagrid Paging?? Pin
Jon Rista4-Feb-09 6:31
Jon Rista4-Feb-09 6:31 
QuestionEnter key press in Multiline textbox Pin
kc_krishnan3-Feb-09 1:59
kc_krishnan3-Feb-09 1:59 
AnswerRe: Enter key press in Multiline textbox Pin
SeMartens4-Feb-09 1:42
SeMartens4-Feb-09 1:42 
QuestionMultiLine Text Box focus Pin
kc_krishnan3-Feb-09 1:56
kc_krishnan3-Feb-09 1:56 
AnswerRe: MultiLine Text Box focus Pin
vaghelabhavesh3-Feb-09 12:09
vaghelabhavesh3-Feb-09 12:09 
Question[HTML IE6] Trouble column size with detailed table Pin
belfaigore2-Feb-09 22:38
belfaigore2-Feb-09 22:38 
Hi,

I'am french developper (so sorry for my english), and I don't find a solution for my trouble :
I have a table wich can show for each rows a detail row, placed under the main row. But when this detail row is show, the column size is changed, I don't know why.

Here is a code test wich show the trouble, two same table, and you can see under IE6 or IE7 that the two table doesn't have the same columns size, and when you click on the detail link, the columns size back to normal size.

<html>
<head>
    <title>Probleme de decalage des colonnes après affichage des détails</title>
    
    <style type="text/css">
    body
    {
	    font-size: 11px;
	    font-family: Arial, Helvetica, sans-serif;
	    color: Black;
	    background-color: White;
    }
    
    .titreSection
    {
	    font-weight: bold;
	    font-size: 12px;
	    font-family: Arial, Helvetica, sans-serif;
	    color: #1053bb;
	    margin-top: 20px;
	    margin-bottom: 5px;
    }
    
    .grid-sollicitation
    {
	    width:100%;
	    vertical-align:middle;
        border-color:#84AFDF;
        border-collapse:collapse;
    }

    .grid-sollicitation TR,
    .grid-sollicitation TD
    {
	    border-color:#84AFDF;
    }

    .grid-sollicitation-header
    {
	    background-color:#84AFDF;
	    font-size:11px;
	    font-weight:bold;
	    color:#000000;
	    height:30px;
    }

    .grid-sollicitation-row
    {
	    height:20px;
    }
    
    /* Colonne : Id */
    .grid-sollicitation .Id
    {
	    text-align:center;
	    width:30px;
    }
    .grid-sollicitation .IdHeader
    {
	    width:30px;
    }

    /* Colonne : Estampille */
    .grid-sollicitation .Estampille
    {
	    text-align:center;
	    width:50px;
    }
    .grid-sollicitation .EstampilleHeader
    {
	    width:50px;
    }

    /* Colonne : Date */
    .grid-sollicitation .Date
    {
	    text-align:center;
	    width:70px;
    }
    .grid-sollicitation .DateHeader
    {
	    width:70px;
    }

    /* Colonne : Libelle */
    .grid-sollicitation .Libelle
    {
	    padding-left: 10px;
	    width:385px;
	    font-weight:bold;
    }
    .grid-sollicitation .LibelleHeader
    {
	    width:385px;
    }

    /* Colonne : Details */
    .grid-sollicitation .Details
    {
	    text-align:center;
	    width:50px;
    }
    /* Colonne : Details */
    .grid-sollicitation .DetailsHeader
    {
	    width:50px;
    }

    /* Colonne : Voir Tarification */
    .grid-sollicitation .Tarification
    {
	    text-align:center;
	    width:100px;
    }
    .grid-sollicitation .TarificationHeader
    {
	    width:100px;
    }

    /* Colonne : Souscription */
    .grid-sollicitation .Souscription
    {
	    text-align:center;
	    width:80px;
    }
    .grid-sollicitation .Souscription
    {
	    width:80px;
    }

    /* Colonne : Statut */
    .grid-sollicitation .Statut
    {
	    text-align:center;
	    color:#1053BB;
	    font-weight:bold;
	    width:100px;
    }
    .grid-sollicitation .StatutHeader
    {
	    width:100px;
    }

    /* Colonne : Supprimer */
    .grid-sollicitation .Supprimer
    {
	    text-align:center;
	    width:30px;
    }
    .grid-sollicitation .SupprimerHeader
    {
	    width:30px;
    }
    
    /* Panel contenant les details */
    .panelDetails
    {
	    margin:10px;
    }
    </style>
    
	<script type="text/javascript" language="javascript">
	function displayElement(id)
    {
        elem = document.getElementById(id);
    
        if(elem.style.display == "")
            elem.style.display = "none";
        else
            elem.style.display = "";
    }

	</script>

</head>
<body>
    <div>
        <p class="titreSection">Tableau 1</p>
        <div>
            <table class="grid-sollicitation" cellspacing="0" rules="all" border="1" style="border-collapse:collapse; width: 600px;">
                <tr class="grid-sollicitation-header">
					<th scope="col">Date</th>
					<th scope="col" abbr="Libelle">Thème</th>
					<th scope="col">Etat</th>
					<th scope="col">&nbsp;</th>
				</tr>
                <tr class="grid-sollicitation-row">
                    <td class="Date">info{1,1}</td>
                    <td class="Libelle"><a href="javascript:displayElement('trDetails_01');">info{1,2}</a></td>
                    <td class="Statut">info{1,3}</td>
                    <td class="Supprimer">X</td>
                </tr>
                <tr id="trDetails_01" class="grid-sollicitation-row" style="display:none;">
                    <td colspan="4">
                        <div class="panelDetails">
                            Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1
                        </div>
                    </td>
                </tr>
                
                <tr class="grid-sollicitation-row">
                    <td class="Date">info{2,1}</td>
                    <td class="Libelle"><a href="javascript:displayElement('trDetails_02');">info{2,2}</a></td>
                    <td class="Statut">info{2,3}</td>
                    <td class="Supprimer">X</td>
                </tr>
                <tr id="trDetails_02" class="grid-sollicitation-row" style="display:none" >
                    <td colspan="4">
                        <div class="panelDetails">
                            Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2
                        </div>
                    </td>
                </tr>
                
                <tr class="grid-sollicitation-row">
                    <td class="Date">info{3,1}</td>
                    <td class="Libelle"><a href="javascript:displayElement('trDetails_03');">info{3,2}</a></td>
                    <td class="Statut">info{3,3}</td>
                    <td class="Supprimer">X</td>
                </tr>
                <tr id="trDetails_03" class="grid-sollicitation-row" style="display:none">
                    <td colspan="4">
                        <div class="panelDetails">
                            Madame test prenom a effectué la demande d'information suivante :
                            <br /><br />
                            Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Deta
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    
    <div>
        <p class="titreSection">Tableau 2</p>
        <div>
            <table class="grid-sollicitation" cellspacing="0" rules="all" border="1" style="border-collapse:collapse; width: 600px;">
                <tr class="grid-sollicitation-header">
					<th scope="col">Date</th>
					<th scope="col" abbr="Libelle">Thème</th>
					<th scope="col">Etat</th>
					<th scope="col">&nbsp;</th>
				</tr>
                <tr class="grid-sollicitation-row">
                    <td class="Date">info{1,1}</td>
                    <td class="Libelle"><a href="javascript:displayElement('trDetails_11');">info{1,2}</a></td>
                    <td class="Statut">info{1,3}</td>
                    <td class="Supprimer">X</td>
                </tr>
                <tr id="tr1" class="grid-sollicitation-row">
                    <td colspan="4">
                        <div class="panelDetails">
                            Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1 Détails 1
                        </div>
                    </td>
                </tr>
                
                <tr class="grid-sollicitation-row">
                    <td class="Date">info{2,1}</td>
                    <td class="Libelle"><a href="javascript:displayElement('trDetails_12');">info{2,2}</a></td>
                    <td class="Statut">info{2,3}</td>
                    <td class="Supprimer">X</td>
                </tr>
                <tr id="tr2" class="grid-sollicitation-row" style="display:none" >
                    <td colspan="4">
                        <div class="panelDetails">
                            Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2 Détails 2
                        </div>
                    </td>
                </tr>
                
                <tr class="grid-sollicitation-row">
                    <td class="Date">info{3,1}</td>
                    <td class="Libelle"><a href="javascript:displayElement('trDetails_13');">info{3,2}</a></td>
                    <td class="Statut">info{3,3}</td>
                    <td class="Supprimer">X</td>
                </tr>
                <tr id="tr3" class="grid-sollicitation-row" style="display:none">
                    <td colspan="4">
                        <div class="panelDetails">
                            Madame test prenom a effectué la demande d'information suivante :
                            <br /><br />
                            Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Detail du message Deta
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

just copy/paste the code in a "test.html" file, and see the trouble.
AnswerRe: [HTML IE6] Trouble column size with detailed table Pin
Aman Bhullar2-Feb-09 23:15
Aman Bhullar2-Feb-09 23:15 
GeneralRe: [HTML IE6] Trouble column size with detailed table Pin
belfaigore2-Feb-09 23:55
belfaigore2-Feb-09 23:55 
GeneralRe: [HTML IE6] Trouble column size with detailed table Pin
Aman Bhullar3-Feb-09 0:10
Aman Bhullar3-Feb-09 0:10 
GeneralRe: [HTML IE6] Trouble column size with detailed table Pin
belfaigore3-Feb-09 2:24
belfaigore3-Feb-09 2:24 
QuestionCannot instantiate non-existent class: database in /includes/joomla.php Pin
Rasma Raj2-Feb-09 20:24
Rasma Raj2-Feb-09 20:24 
QuestionMysterious "File Not Found" Pin
Reelix2-Feb-09 0:55
Reelix2-Feb-09 0:55 
Questiononclick event not working in firefox but works in IE Pin
uglyeyes1-Feb-09 21:41
uglyeyes1-Feb-09 21:41 
AnswerRe: onclick event not working in firefox but works in IE Pin
SeMartens2-Feb-09 2:44
SeMartens2-Feb-09 2:44 
QuestionJAVASCRIPT selectNodes() returns 0 if XML contains '&' char Pin
Arindam Tewary1-Feb-09 21:26
professionalArindam Tewary1-Feb-09 21:26 
QuestionAJAX Pin
saurabh200671-Feb-09 17:48
saurabh200671-Feb-09 17:48 
AnswerRe: AJAX Pin
SeMartens2-Feb-09 2:50
SeMartens2-Feb-09 2:50 
GeneralRe: AJAX Pin
saurabh200672-Feb-09 6:36
saurabh200672-Feb-09 6:36 
QuestionJavaScript Error with IE Pin
r aa j1-Feb-09 17:37
r aa j1-Feb-09 17:37 
AnswerRe: JavaScript Error with IE Pin
saurabh200671-Feb-09 19:13
saurabh200671-Feb-09 19:13 
Questionautogenerate column Pin
Mhiny1-Feb-09 16:43
Mhiny1-Feb-09 16:43 
Questionapp.config vs app.xaml [modified] Pin
devvvy31-Jan-09 17:35
devvvy31-Jan-09 17:35 
AnswerRe: app.config vs app.xaml Pin
devvvy31-Jan-09 18:08
devvvy31-Jan-09 18:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.