Button and Dropdownlists in ASP.NET/C# Page loses position in Firefox & Netscape

[jvaradarajan]

I've an ASP page which generates 4 kinds of reports based on a selection from a dropdownlist. There is a dropdownlist, datagrid and a generate report button in the page. The page works fine in IE. But in firefox, it loses formatting. After loading the page, everytime I choose an item from the dropdownlist, the dropdownlists moves to the right and everytime the button gets pushed down slowly. But the datagrid remains in the same place. Is there any reason for this?

[drhowarddrfine]

Can you show the generated html and css or provide a link?

[jvaradarajan]

Here is the HTML

<script language=javasc ript type=text/javascript>

function highlightRow(ob j, newColor)
{
obj.style.curso r = "hand";
// light-yellow, can be changed to whatever desired.
obj.style.backg roundColor = "#ffffcc";
}

function dehighlightRow( obj, originalColor)
{
obj.style.backg roundColor = originalColor;
}

function ShowHide(lever) // , target)
{
//obj=(document.a ll) ? document.all[target] : document.getEle mentById(target );
objInv=(documen t.all) ? document.all['InvoiceList'] : document.getEle mentById('Invoi ceList');
objLCSD=(docume nt.all) ? document.all['LetterCountSta rtDate'] : document.getEle mentById('Lette rCountStartDate ');
objLCED=(docume nt.all) ? document.all['LetterCountEnd Date'] : document.getEle mentById('Lette rCountEndDate') ;
objLCT=(documen t.all) ? document.all['LetterCountTie r'] : document.getEle mentById('Lette rCountTier');
objDupePIE=(doc ument.all) ? document.all['DupePIE'] : document.getEle mentById('DupeP IE');
objDupeMonth=(d ocument.all) ? document.all['SelectMonth'] : document.getEle mentById('Selec tMonth');
objDupeYear=(do cument.all) ? document.all['SelectYear'] : document.getEle mentById('Selec tYear');

var SelectedValue = lever.options[lever.selectedI ndex].value;

//alert(SelectedV alue);

if(SelectedValu e == 'Invoice')
{
objInv.style.di splay = 'inline';
objLCSD.style.d isplay = 'none';
objLCED.style.d isplay = 'none';
objLCT.style.di splay = 'none';
objDupePIE.styl e.display = 'none';
objDupeMonth.st yle.display = 'none';
objDupeYear.sty le.display = 'none';
}
else if(SelectedValu e == 'LetterCount')
{
objInv.style.di splay = 'none';
objLCSD.style.d isplay = 'inline';
objLCED.style.d isplay = 'inline';
objLCT.style.di splay = 'inline';
objDupePIE.styl e.display = 'none';
objDupeMonth.st yle.display = 'none';
objDupeYear.sty le.display = 'none';

//var outputType = document.getEle mentById('_ctl0 _ReportServices 1_lstExport');
//outputType.sele ctedIndex = 2;
ForceExcelOutpu t();
}
else if(SelectedValu e == 'SuspectedDupeL ist')
{
objInv.style.di splay = 'none';
objLCSD.style.d isplay = 'inline';
objLCED.style.d isplay = 'inline';
objLCT.style.di splay = 'none';
objDupePIE.styl e.display = 'inline';
objDupeMonth.st yle.display = 'none';
objDupeYear.sty le.display = 'none';
}
else if(SelectedValu e == 'DuplicateAccou nts')
{
objInv.style.di splay = 'none';
objLCSD.style.d isplay = 'none';
objLCED.style.d isplay = 'none';
objLCT.style.di splay = 'none';
objDupePIE.styl e.display = 'none';
objDupeMonth.st yle.display = 'inline';
objDupeYear.sty le.display = 'inline';
}
else if(SelectedValu e == 'DuplicateAccou ntsWithPayments ')
{
objInv.style.di splay = 'none';
objLCSD.style.d isplay = 'none';
objLCED.style.d isplay = 'none';
objLCT.style.di splay = 'none';
objDupePIE.styl e.display = 'none';
objDupeMonth.st yle.display = 'inline';
objDupeYear.sty le.display = 'inline';
}
else
{
objInv.style.di splay = 'none';
objLCSD.style.d isplay = 'none';
objLCED.style.d isplay = 'none';
objLCT.style.di splay = 'none';
objDupePIE.styl e.display = 'none';
objDupeMonth.st yle.display = 'none';
objDupeYear.sty le.display = 'none';
}
}
function PageLoad(target ) //lever , target)
{
objInv=(documen t.all) ? document.all['InvoiceList'] : document.getEle mentById('Invoi ceList');
objLCSD=(docume nt.all) ? document.all['LetterCountSta rtDate'] : document.getEle mentById('Lette rCountStartDate ');
objLCED=(docume nt.all) ? document.all['LetterCountEnd Date'] : document.getEle mentById('Lette rCountEndDate') ;
objLCT=(documen t.all) ? document.all['LetterCountTie r'] : document.getEle mentById('Lette rCountTier');
objDupePIE=(doc ument.all) ? document.all['DupePIE'] : document.getEle mentById('DupeP IE');
objDupeMonth=(d ocument.all) ? document.all['SelectMonth'] : document.getEle mentById('Selec tMonth');
objDupeYear=(do cument.all) ? document.all['SelectYear'] : document.getEle mentById('Selec tYear');

var SelectedValue = target;

//alert(SelectedV alue);

if(SelectedValu e == 'Invoice')
{
objInv.style.di splay = 'inline';
objLCSD.style.d isplay = 'none';
objLCED.style.d isplay = 'none';
objLCT.style.di splay = 'none';
objDupePIE.styl e.display = 'none';
objDupeMonth.st yle.display = 'none';
objDupeYear.sty le.display = 'none';
}
else if(SelectedValu e == 'LetterCount')
{
objInv.style.di splay = 'none';
objLCSD.style.d isplay = 'inline';
objLCED.style.d isplay = 'inline';
objLCT.style.di splay = 'inline';
objDupePIE.styl e.display = 'none';
objDupeMonth.st yle.display = 'none';
objDupeYear.sty le.display = 'none';
}
else if(SelectedValu e == 'SuspectedDupeL ist')
{
objInv.style.di splay = 'none';
objLCSD.style.d isplay = 'inline';
objLCED.style.d isplay = 'inline';
objLCT.style.di splay = 'none';
objDupePIE.styl e.display = 'inline';
objDupeMonth.st yle.display = 'none';
objDupeYear.sty le.display = 'none';
}
else if(SelectedValu e == 'DuplicateAccou nts')
{
objInv.style.di splay = 'none';
objLCSD.style.d isplay = 'none';
objLCED.style.d isplay = 'none';
objLCT.style.di splay = 'none';
objDupePIE.styl e.display = 'none';
objDupeMonth.st yle.display = 'inline';
objDupeYear.sty le.display = 'inline';
}
else if(SelectedValu e == 'DuplicateAccou ntsWithPayments ')
{
objInv.style.di splay = 'none';
objLCSD.style.d isplay = 'none';
objLCED.style.d isplay = 'none';
objLCT.style.di splay = 'none';
objDupePIE.styl e.display = 'none';
objDupeMonth.st yle.display = 'inline';
objDupeYear.sty le.display = 'inline';
}
else
{
objInv.style.di splay = 'none';
objLCSD.style.d isplay = 'none';
objLCED.style.d isplay = 'none';
objLCT.style.di splay = 'none';
objDupePIE.styl e.display = 'none';
objDupeMonth.st yle.display = 'none';
objDupeYear.sty le.display = 'none';
}
}

function StartupHide()
{
objInv=(documen t.all) ? document.all['InvoiceList'] : document.getEle mentById('Invoi ceList');
objInv.style.di splay = 'none';

objLCSD=(docume nt.all) ? document.all['LetterCountSta rtDate'] : document.getEle mentById('Lette rCountStartDate ');
objLCSD.style.d isplay = 'none';

objLCED=(docume nt.all) ? document.all['LetterCountEnd Date'] : document.getEle mentById('Lette rCountEndDate') ;
objLCED.style.d isplay = 'none';

objLCT=(documen t.all) ? document.all['LetterCountTie r'] : document.getEle mentById('Lette rCountTier');
objLCT.style.di splay = 'none';

objDupePIE=(doc ument.all) ? document.all['DupePIE'] : document.getEle mentById('DupeP IE');
objDupePIE.styl e.display = 'none';

objDupeMonth=(d ocument.all) ? document.all['SelectMonth'] : document.getEle mentById('Selec tMonth');
objDupeMonth.st yle.display = 'none';

objDupeYear=(do cument.all) ? document.all['SelectYear'] : document.getEle mentById('Selec tYear');
objDupeYear.sty le.display = 'none';
}

function ForceExcelOutpu t()
{
var reportType = document.getEle mentById('_ctl0 _ReportServices 1_lstReport');

if (reportType.opt ions[reportType.sele ctedIndex].value == "LetterCoun t")
{
var outputType = document.getEle mentById('_ctl0 _ReportServices 1_lstExport');

for(var i=0; i<outputType.le ngth; i++)
{
if (outputType[i].value == "EXCEL")
{
outputType.sele ctedIndex = i;
break;
}
}
}
}
</script>

<table class=FormBox cellSpacing=0 cellPadding=3 width="100%" border=0>
<tr>
<TD style="WIDTH: 135px" align=right><b
>Report:</b> </TD>

<td width="100%"><s elect name="_ctl0:Rep ortServices1:ls tReport" id="_ctl0_Repor tServices1_lstR eport" onChange="javas cript:ShowHide( this);">


</select>&nbsp;</td></tr>
<TR>
<TD style="WIDTH: 135px" noWrap align=right><b
>Export Format:</b> </TD>

<TD width="100%"><s elect name="_ctl0:Rep ortServices1:ls tExport" id="_ctl0_Repor tServices1_lstE xport">
</select></TD></TR>
<TR id=InvoiceList>
<TD style="WIDTH: 135px" vAlign=top noWrap align=right
><b>Available Invoices:</b> </TD>

<tr> </tr><tr align="Center" style="color:Bl ack;background-color:White;">
<td><input value="2" name="_ctl0:Rep ortServices1:dg Invoices:Column 0:RowSelectorCo lumnSelector" id="_ctl0_Repor tServices1_dgIn voices__ctl4_Ro wSelectorColumn Selector" type="radio" /></td><td align="Center"> 16558</td><td align="Center"> ..</td>
</tr><tr align="Center" style="color:Bl ack;background-color:Gainsboro ;">
<td><input value="3" name="_ctl0:Rep ortServices1:dg Invoices:Column 0:RowSelectorCo lumnSelector" id="_ctl0_Repor tServices1_dgIn voices__ctl5_Ro wSelectorColumn Selector" type="radio" /></td><td align="Center"> 16127</td><td align="Center"> ..</td>
</tr><tr align="Center" style="color:Bl ack;background-color:White;">
<td><input value="4" name="_ctl0:Rep ortServices1:dg Invoices:Column 0:RowSelectorCo lumnSelector" id="_ctl0_Repor tServices1_dgIn voices__ctl6_Ro wSelectorColumn Selector" type="radio" /></td><td align="Center"> 15711</td><td align="Center"> ..</td>

</tr><tr align="Center" style="color:Bl ack;background-color:Gainsboro ;">
<td><input value="5" name="_ctl0:Rep ortServices1:dg Invoices:Column 0:RowSelectorCo lumnSelector" id="_ctl0_Repor tServices1_dgIn voices__ctl7_Ro wSelectorColumn Selector" type="radio" /></td><td align="Center"> 15336</td><td align="Center"> ..</td>
</tr><tr align="Center" style="color:Bl ack;background-color:White;">
<td><input value="6" name="_ctl0:Rep ortServices1:dg Invoices:Column 0:RowSelectorCo lumnSelector" id="_ctl0_Repor tServices1_dgIn voices__ctl8_Ro wSelectorColumn Selector" type="radio" /></td><td align="Center"> 14998</td><td align="Center"> ..</td>
</tr><tr align="Center" style="color:Bl ack;background-color:Gainsboro ;">
<td><input value="7" name="_ctl0:Rep ortServices1:dg Invoices:Column 0:RowSelectorCo lumnSelector" id="_ctl0_Repor tServices1_dgIn voices__ctl9_Ro wSelectorColumn Selector" type="radio" /></td><td align="Center"> 14680</td><td align="Center"> ..</td>

</tr><tr align="Center" style="color:Bl ack;background-color:White;">
<td><input value="8" name="_ctl0:Rep ortServices1:dg Invoices:Column 0:RowSelectorCo lumnSelector" id="_ctl0_Repor tServices1_dgIn voices__ctl10_R owSelectorColum nSelector" type="radio" /></td><td align="Center"> 14370</td><td align="Center"> ..</td>
</tr><tr align="Center" style="color:Bl ack;background-color:Gainsboro ;">
<td><input value="9" name="_ctl0:Rep ortServices1:dg Invoices:Column 0:RowSelectorCo lumnSelector" id="_ctl0_Repor tServices1_dgIn voices__ctl11_R owSelectorColum nSelector" type="radio" /></td><td align="Center"> 14097</td><td align="Center"> ..</td>
</tr><tr align="Center" style="color:Bl ack;background-color:White;">
<td><input value="10" name="_ctl0:Rep ortServices1:dg Invoices:Column 0:RowSelectorCo lumnSelector" id="_ctl0_Repor tServices1_dgIn voices__ctl12_R owSelectorColum nSelector" type="radio" /></td><td align="Center"> 13174</td><td align="Center"> ..</td>

</tr><tr align="Center" style="color:Bl ack;background-color:Gainsboro ;">
<td><input value="11" name="_ctl0:Rep ortServices1:dg Invoices:Column 0:RowSelectorCo lumnSelector" id="_ctl0_Repor tServices1_dgIn voices__ctl13_R owSelectorColum nSelector" type="radio" /></td><td align="Center"> 13161</td><td align="Center"> .</td>
</tr>
</table></TD></TR>
<TR id=DupePIE>
<TD style="WIDTH: 135px" vAlign=top noWrap align=right
><b>Include PIE:<BR
>(Placed-In-Error)</b> </TD>
<TD vAlign=middle>< input id="_ctl0_Repor tServices1_chkI ncludePIE" type="checkbox" name="_ctl0:Rep ortServices1:ch kIncludePIE" checked="checke d" /></TD></TR>

<TR id=LetterCountS tartDate>
<TD style="WIDTH: 135px" vAlign=top noWrap align=right
><b>Start Date:</b> </TD>

//--></script></span></TD></TR>
<TR id=LetterCountE ndDate>
<TD style="WIDTH: 135px" vAlign=top noWrap align=right
><b>End Date:</b> </TD>

<TD style="WIDTH: 135px" vAlign=top noWrap align=right
><b>Tier:</b> </TD>
<TD width="100%"><s elect name="_ctl0:Rep ortServices1:dr pLetterCountTie r" id="_ctl0_Repor tServices1_drpL etterCountTier" >


</select></TD></TR>
<TR id=SelectMonth>
<TD>
<P align=right><ST RONG
>Month:</STRONG></P></TD>
<TD><select name="_ctl0:Rep ortServices1:dr pMonth" id="_ctl0_Repor tServices1_drpM onth" style="width:12 8px;">

</select></TD></TR>

<TR id=SelectYear>
<TD>
<P align=right><ST RONG
>Year:</STRONG></P></TD>
<TD><select name="_ctl0:Rep ortServices1:dr pYear" id="_ctl0_Repor tServices1_drpY ear" style="width:12 8px;">

</select></TD></TR>
<TR>
<TD colSpan=2><inpu t type="image" name="_ctl0:Rep ortServices1:bt nExport" id="_ctl0_Repor tServices1_btnE xport" Text="Generate Report" src=".." alt="" border="0" /></TD></TR></table>

<!--TABLE id="Table1" width="100%">
<TR>
<TD>

<P>&nbsp;</P>
</TD>
</TR>
</TABLE-->


CSS
body {
background-color: #728AB1;
margin-left: 8px;
margin-right: 8px;
margin-top: 8px;
margin-bottom: 8px;
scrollbar-base-color:#728AB1
}
a {
color: #3366CC;
outline: none;
}
a:hover {
color: #000088;
}
a:active {
color: #880000;
}

.MainTable {
width: 100%;
border: 1px solid #B30123;
background-color: #CBCEE7;
}
.ContentTable {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
width: 100%;
}
.ContentCell {
padding: 10px;
}
.ContentTableTo p {
background-image: url(../images/bg_top.jpg);
background-repeat: no-repeat;
height: 77px;
width: 100%;
}
.ContentTableTo pLogo {
padding-right: 10px;
}
.PlaceHolderTab le {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
border: 1px solid #3366CC;
background-color: #FFFFFF;
color: #000000;
width: 100%;
padding: 10px;
}
.FormBox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: #C2C6E2;
border: 1px solid #3366CC;

/*font-weight: bold;*/
}
.FormBoxNested {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.UserStatusBloc k {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
padding-left: 134px;
padding-bottom: 9px;
}
.cmbTextArea {
background-image: url(../images/bg_cmb.gif);
background-repeat: repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:bold;
color: #000000;
}
.cmTextArea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:bold;
color: #000000;
}
.cmTextAreaClie nt {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:bold;
color: #990000;
}
.cmTextAreaHigh light {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight:bold;
color: #990000;
}
.accountNameHig hlight {
color: #990000;
}
.dataGridFont {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
.tableHeader {
font-size: 12px;
font-weight: bold;
color: #000066;
}
.accountHeader {
font-size: 12px;
font-weight: bold;
color: White;
background-color: #000066;
}
.realGreenAccou ntHeader {
font-size: 12px;
font-weight: bold;
color: White;
background-color: #009A67;
}
.accountInfo {
font-size: 12px;
font-weight: bold;
}
hr {
height: 1px;
color: #3366CC;
}
.label {
font-weight: bold;
}

/*.button {
background: #B22222;
color: White;
font: bold;
border: 3px solid Navy 1;
padding: 6 6 6 6;
border-color: Navy Navy Navy Navy;
border-left-width: 2;
border-right-width: 2;
border-top-width: 2;
border-bottom-width: 2;
}*/
/*Tab Styles */
.TabInactive {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
background: #B4BAB9;
font-size: 12;
text-decoration: none;
font-weight: bold;
font-style: italic;
border: 1 solid #3366CC;
}
.tabInactive a:link {
color: #000066;
text-decoration: none;
}
.tabInactive a:visited {
color: #000066;
text-decoration: none;
}
.tabInactive a:active {
color: #B22222;
}
.tabInactive a:hover {
color: #FFFFFF;
}
.TabActive{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-style: italic;
text-decoration: none;
background: White;
font-size: 12;
border: 1 solid #3366CC;
border-bottom-width: 0;
}
.tabActive a:link {
color: #B22202;
text-decoration: none;
}
.tabActive a:visited {
color: #B22202;
text-decoration: none;
}

[drhowarddrfine]

I don't see the problem but:
You have 56 html errors and five CSS errors. Many are related to your id names which are invalid. Names with leading underscores are not valid for ids. Does asp.net put those in?

[jvaradarajan]

I guess. Could you send the link for validating html and css? Thanks for your help!

[drhowarddrfine]

Go to the top of this page under Articles->Helpful Links.
You might want to read the Article there "Validate early and often".

[jvaradarajan]

Go to the top of this page under Articles->Helpful Links.
You might want to read the Article there "Validate early and often".

I guess I've figured out the problem. It's due to the javascript function which displays and not displays. The page loses control while drawing the table. As a solution, I've separated each set into divs and it works now.

Thanks for your time & effort!

[Plater]

For sanity's sake, I would recomend turning this:

(document.all) ? document.all[<id>] : document.getElementById(<id>);

into a function call, maybe something like this:

function returnObjById( id ) 
{ 
    if (document.getElementById) 
        var returnVar = document.getElementById(id); 
    else if (document.all) 
        var returnVar = document.all[id]; 
    else if (document.layers) 
        var returnVar = document.layers[id]; 
    return returnVar; 
}

(add try/catch blocks if you want)