S
sjickells
Hi
I am having a problem using asp:TextBox's in a transparent table.
I have a background image on the page and a table in the middle of the
page. I have set the background colour of the table to white the used
CSS to set the opacity to 90 so that you can see the background image
through the table.
The problem I am having is with the textboxes in the transparent
table. The textbox has a max length of 100 chars but will only display
30. If i fill the textbox with the 100 chars then try to scroll left
to the beginning of the field using the cursors the content of the box
does not change. i.e if i enter
"1234567890qwertyuiopasdfghjklzxcvbnm" and only "zxcvbnm" can be seen
in the text box and i press home or scroll left to the beginning of
the text box it will still only show "zxcvbnm". For some reason this
field does not seem to be refreshing. All the content is still in the
textbox as I can see it all after I submit it and view it in a read
only page!
It works fine in firefox but I am using IE6.
Any ideas? I have included a cut down version of the code below:
It is the seethrough class that is causing the problem. When you
remove the filter it works fine.
ASPX Page:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="css/BT.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<table summary=""
class="tinytableopacity"
style="background:url(../images/phoneBG.jpg) no-
repeat;"
border="0"
cellpadding="0"
cellspacing="0"
width="1280"
height="1024">
<tbody>
<tr>
<td align="center" valign="top" style="height:
1199px">
<table width="995">
<tr>
<td height="125" colspan="2"
align="right" valign="bottom"><img src="../images/Logo.jpg" alt="test
plc"/></td>
</tr>
</table>
<table width="995" border="0"
class="seethrough">
<tr>
<td height="50" colspan="2"
valign="middle" align="left" class="branchTelephony"> Branch
Telephony - Branch Update</td>
</tr>
<tr>
<td height="25" colspan="2"> </
td>
</tr>
<tr>
<td width="310" valign="top"
class="header" align="right">Branch Code:</td>
<td width="685"
align="left"> <asp:Label ID="lblBranchCode" CssClass="header"
runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td width="310" valign="top"
class="header" align="right"></td>
<td width="685"
align="left"> <asp:TextBox ID="txtBranchID" runat="server"
CssClass="btUpdateTextBox" Enabled="false" Visible="false"></
asp:TextBox></td>
</tr>
<tr>
<td colspan="2">
<table width="990">
<tr>
<td width="330"
align="right" class="bold">Branch Name: </td>
<td width="330"
align="left"><asp:Label ID="lblBranchName" runat="server" Text=""></
asp:Label></td>
<td width="330"></td>
</tr>
<tr>
<td align="right"
class="bold">Opening Hours (Mon - Fri): </td>
<td
align="left"><asp:TextBox ID="txtOpeningHoursMondayToFriday"
runat="server" CssClass="btUpdateTextBox" MaxLength="100"></
asp:TextBox></td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
ControlToValidate="txtOpeningHoursMondayToFriday"
ErrorMessage="Mandatory Field"
Display="Dynamic"
SetFocusOnError="true"
CssClass="error"
runat="server"
/>
</td>
</tr>
<tr>
<td align="right"
class="bold">Opening Hours (Sat): </td>
<td
align="left"><asp:TextBox ID="txtOpeningHoursSaturday" runat="server"
CssClass="btUpdateTextBox" MaxLength="100"></asp:TextBox></td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2"
ControlToValidate="txtOpeningHoursSaturday"
ErrorMessage="Mandatory Field"
Display="Dynamic"
SetFocusOnError="true"
CssClass="error"
runat="server"
/>
</td>
</tr>
<tr>
<td align="right"
class="bold">Opening Hours (Additional): </td>
<td
align="left"><asp:TextBox ID="txtOpeningHoursAdditional"
runat="server" CssClass="btUpdateTextBox" MaxLength="100"></
asp:TextBox></td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3"
ControlToValidate="txtOpeningHoursAdditional"
ErrorMessage="Mandatory Field"
Display="Dynamic"
SetFocusOnError="true"
CssClass="error"
runat="server"
/ </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50" colspan="2"> </
td>
</tr>
<tr>
<td valign="top" align="right"
class="header"></td>
<td align="left"></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div><br />
</form>
</body>
</html>
CSS:
body
{
font-family:verdana, Tahoma, arial;
margin-left:0px;
margin-bottom:0px;
margin-right:0px;
margin-top:0px;
background-color:#87C2FC;
}
..alternatingRowStyle
{
background-color:#E0E0E0;
}
..alternateColourAbold
{
background-color:#E0E0E0;
font-weight:bold;
}
..alternateColourA
{
background-color:#E0E0E0;
}
..alternateColourBbold
{
/*background-color:#87C2FC;*/
font-weight:bold;
}
..alternateColourB
{
/*background-color:#87C2FC; */
}
..bold
{
font-family:verdana, Tahoma, arial;
font-size:12px;
color:#000000;
font-weight:bold;
}
..branchTelephony
{
color:#141B39;
font-family:verdana, Tahoma, arial;
font-size:30px;
font-weight:bold;
font-style:italic;
border-bottom:solid 1px #003366;
}
..btBtn
{
font-family:verdana, Tahoma, arial;
font-size:12px;
color:#000000;
}
..btTextBox
{
font-family:verdana, Tahoma, arial;
font-size:12px;
color:#000000;
width:280px;
background-color:#ffffff;
}
..btUpdateTextBox
{
font-family:verdana, Tahoma, arial;
font-size:12px;
color:#000000;
width:280px;
background-color:#ffffff;
}
..error
{
font-family:verdana, Tahoma, arial;
font-size:12px;
font-weight:normal;
color:#FF0000;
}
..favouriteTableHeader
{
font-family:verdana, Tahoma, arial;
font-size:12px;
color:#ffffff;
font-weight:bold;
background-image: url('../images/slice.gif');
background-repeat: repeat-x;
text-align:center;
}
..favouriteTableFooter
{
background-image: url('../images/slice.gif');
background-repeat: repeat-x;
}
..favouriteTableContent
{
background-color:#ffffff;
text-align:center;
}
..favouriteTable
{
background-color:#ffffff;
border-bottom:solid 1px #cccccc;
border-top:solid 1px #cccccc;
border-left:solid 1px #cccccc;
border-right:solid 1px #cccccc;
}
..gridViewEditRowStyle
{
font-family:verdana, Tahoma, arial;
font-size:12px;
color:#000000;
width:120px;
background-color:#ffffff;
}
..gridViewRowStyle
{
font-family:verdana, Tahoma, arial;
font-size:12px;
color:#000000;
}
..header
{
color:#141B39;
font-family:verdana, Tahoma, arial;
font-size:24px;
font-weight:bold;
font-style:normal;
}
..leftRight
{
border-left:solid 1px #cccccc;
border-right:solid 1px #cccccc;
}
..map
{
border-left:solid 1px #003366;
border-right:solid 1px #003366;
border-top:solid 1px #003366;
border-bottom:solid 1px #003366;
}
..tinytableopacity {
FONT-SIZE: 12px;
FONT-FAMILY:verdana, Tahoma, arial;
background: transparent;
}
..validationError
{
font-family:verdana, Tahoma, arial;
font-size:12px;
font-weight:bold;
color:#cc3333;
}
..viewLink
{
text-align:center;
}
..whiteFooter
{
font-family:verdana, Tahoma, arial;
font-size:10px;
color:#ffffff;
}
..seethrough
{
background-color:#ffffff;
border:1px solid black;
/*FONT-SIZE: xx-small;*/
FONT-SIZE: 12px;
FONT-FAMILY: verdana, Tahoma, arial;
filter:alpha(opacity='90');
-moz-opacity:.90;
opacity:.90;
}
I am having a problem using asp:TextBox's in a transparent table.
I have a background image on the page and a table in the middle of the
page. I have set the background colour of the table to white the used
CSS to set the opacity to 90 so that you can see the background image
through the table.
The problem I am having is with the textboxes in the transparent
table. The textbox has a max length of 100 chars but will only display
30. If i fill the textbox with the 100 chars then try to scroll left
to the beginning of the field using the cursors the content of the box
does not change. i.e if i enter
"1234567890qwertyuiopasdfghjklzxcvbnm" and only "zxcvbnm" can be seen
in the text box and i press home or scroll left to the beginning of
the text box it will still only show "zxcvbnm". For some reason this
field does not seem to be refreshing. All the content is still in the
textbox as I can see it all after I submit it and view it in a read
only page!
It works fine in firefox but I am using IE6.
Any ideas? I have included a cut down version of the code below:
It is the seethrough class that is causing the problem. When you
remove the filter it works fine.
ASPX Page:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link rel="stylesheet" type="text/css" href="css/BT.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<table summary=""
class="tinytableopacity"
style="background:url(../images/phoneBG.jpg) no-
repeat;"
border="0"
cellpadding="0"
cellspacing="0"
width="1280"
height="1024">
<tbody>
<tr>
<td align="center" valign="top" style="height:
1199px">
<table width="995">
<tr>
<td height="125" colspan="2"
align="right" valign="bottom"><img src="../images/Logo.jpg" alt="test
plc"/></td>
</tr>
</table>
<table width="995" border="0"
class="seethrough">
<tr>
<td height="50" colspan="2"
valign="middle" align="left" class="branchTelephony"> Branch
Telephony - Branch Update</td>
</tr>
<tr>
<td height="25" colspan="2"> </
td>
</tr>
<tr>
<td width="310" valign="top"
class="header" align="right">Branch Code:</td>
<td width="685"
align="left"> <asp:Label ID="lblBranchCode" CssClass="header"
runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td width="310" valign="top"
class="header" align="right"></td>
<td width="685"
align="left"> <asp:TextBox ID="txtBranchID" runat="server"
CssClass="btUpdateTextBox" Enabled="false" Visible="false"></
asp:TextBox></td>
</tr>
<tr>
<td colspan="2">
<table width="990">
<tr>
<td width="330"
align="right" class="bold">Branch Name: </td>
<td width="330"
align="left"><asp:Label ID="lblBranchName" runat="server" Text=""></
asp:Label></td>
<td width="330"></td>
</tr>
<tr>
<td align="right"
class="bold">Opening Hours (Mon - Fri): </td>
<td
align="left"><asp:TextBox ID="txtOpeningHoursMondayToFriday"
runat="server" CssClass="btUpdateTextBox" MaxLength="100"></
asp:TextBox></td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
ControlToValidate="txtOpeningHoursMondayToFriday"
ErrorMessage="Mandatory Field"
Display="Dynamic"
SetFocusOnError="true"
CssClass="error"
runat="server"
/>
</td>
</tr>
<tr>
<td align="right"
class="bold">Opening Hours (Sat): </td>
<td
align="left"><asp:TextBox ID="txtOpeningHoursSaturday" runat="server"
CssClass="btUpdateTextBox" MaxLength="100"></asp:TextBox></td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2"
ControlToValidate="txtOpeningHoursSaturday"
ErrorMessage="Mandatory Field"
Display="Dynamic"
SetFocusOnError="true"
CssClass="error"
runat="server"
/>
</td>
</tr>
<tr>
<td align="right"
class="bold">Opening Hours (Additional): </td>
<td
align="left"><asp:TextBox ID="txtOpeningHoursAdditional"
runat="server" CssClass="btUpdateTextBox" MaxLength="100"></
asp:TextBox></td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3"
ControlToValidate="txtOpeningHoursAdditional"
ErrorMessage="Mandatory Field"
Display="Dynamic"
SetFocusOnError="true"
CssClass="error"
runat="server"
/ </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50" colspan="2"> </
td>
</tr>
<tr>
<td valign="top" align="right"
class="header"></td>
<td align="left"></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div><br />
</form>
</body>
</html>
CSS:
body
{
font-family:verdana, Tahoma, arial;
margin-left:0px;
margin-bottom:0px;
margin-right:0px;
margin-top:0px;
background-color:#87C2FC;
}
..alternatingRowStyle
{
background-color:#E0E0E0;
}
..alternateColourAbold
{
background-color:#E0E0E0;
font-weight:bold;
}
..alternateColourA
{
background-color:#E0E0E0;
}
..alternateColourBbold
{
/*background-color:#87C2FC;*/
font-weight:bold;
}
..alternateColourB
{
/*background-color:#87C2FC; */
}
..bold
{
font-family:verdana, Tahoma, arial;
font-size:12px;
color:#000000;
font-weight:bold;
}
..branchTelephony
{
color:#141B39;
font-family:verdana, Tahoma, arial;
font-size:30px;
font-weight:bold;
font-style:italic;
border-bottom:solid 1px #003366;
}
..btBtn
{
font-family:verdana, Tahoma, arial;
font-size:12px;
color:#000000;
}
..btTextBox
{
font-family:verdana, Tahoma, arial;
font-size:12px;
color:#000000;
width:280px;
background-color:#ffffff;
}
..btUpdateTextBox
{
font-family:verdana, Tahoma, arial;
font-size:12px;
color:#000000;
width:280px;
background-color:#ffffff;
}
..error
{
font-family:verdana, Tahoma, arial;
font-size:12px;
font-weight:normal;
color:#FF0000;
}
..favouriteTableHeader
{
font-family:verdana, Tahoma, arial;
font-size:12px;
color:#ffffff;
font-weight:bold;
background-image: url('../images/slice.gif');
background-repeat: repeat-x;
text-align:center;
}
..favouriteTableFooter
{
background-image: url('../images/slice.gif');
background-repeat: repeat-x;
}
..favouriteTableContent
{
background-color:#ffffff;
text-align:center;
}
..favouriteTable
{
background-color:#ffffff;
border-bottom:solid 1px #cccccc;
border-top:solid 1px #cccccc;
border-left:solid 1px #cccccc;
border-right:solid 1px #cccccc;
}
..gridViewEditRowStyle
{
font-family:verdana, Tahoma, arial;
font-size:12px;
color:#000000;
width:120px;
background-color:#ffffff;
}
..gridViewRowStyle
{
font-family:verdana, Tahoma, arial;
font-size:12px;
color:#000000;
}
..header
{
color:#141B39;
font-family:verdana, Tahoma, arial;
font-size:24px;
font-weight:bold;
font-style:normal;
}
..leftRight
{
border-left:solid 1px #cccccc;
border-right:solid 1px #cccccc;
}
..map
{
border-left:solid 1px #003366;
border-right:solid 1px #003366;
border-top:solid 1px #003366;
border-bottom:solid 1px #003366;
}
..tinytableopacity {
FONT-SIZE: 12px;
FONT-FAMILY:verdana, Tahoma, arial;
background: transparent;
}
..validationError
{
font-family:verdana, Tahoma, arial;
font-size:12px;
font-weight:bold;
color:#cc3333;
}
..viewLink
{
text-align:center;
}
..whiteFooter
{
font-family:verdana, Tahoma, arial;
font-size:10px;
color:#ffffff;
}
..seethrough
{
background-color:#ffffff;
border:1px solid black;
/*FONT-SIZE: xx-small;*/
FONT-SIZE: 12px;
FONT-FAMILY: verdana, Tahoma, arial;
filter:alpha(opacity='90');
-moz-opacity:.90;
opacity:.90;
}