Strange effect with panel

Hi all,

I have...

<asp:Panel id=SignInPanel runat="server" borderwidth="1px"
bordercolor="Black" borderstyle="Solid">

<div class=row><asp:label id=BadPasswordLabel runat="server" Visible="False"
forecolor="red"></asp:label><br><font size=2><strong> Sign
in:</strong></font></div>
<div class=row><span class=label>Membership Number / Email address:</span>
<span class=formfields><asp:TextBox id=MembershipTextBox
runat="server"></asp:TextBox></span></div>
<div class=row><span class=label>Password:</span<span
class=formfields><asp:TextBox id=PasswordTextBox runat="server"
TextMode="Password"></asp:TextBox></span></div>
<div class=row><span class=label</span><span class=formfields><asp:Button
id=SignInButton runat="server" Text="Sign In"></asp:Button></span></div>

</asp:Panel>

My styles are...
<style type="text/css">
DIV.row { CLEAR: both; FONT-SIZE: 9pt; PADDING-TOP: 3px; FONT-FAMILY:
verdana }
DIV.row SPAN.label { FLOAT: left; WIDTH: 250px; TEXT-ALIGN: right }
DIV.row SPAN.formfields { FLOAT: right; WIDTH: 190px; TEXT-ALIGN: left }
</style>

For some reason, my SignInButton appears on the outside of the box. I have
had this on other parts of the project as well, but I don't understand what
is going on.

Any ideas?

--
Best regards,
Dave Colliver.
http://www.AshfieldFOCUS.com
~~
http://www.FOCUSPortals.com - Local franchises availableHi David,

The problem here is the use of the "float" style. Because the "float" style
causes an element to "float," it is positioned, and removed from the normal
flow of the document. The "float" style indicates the direction that the
element should float, and any in-line non-positioned element to the opposite
side will flow around the box. However, any non-positioned block elements
next to the floated element will flow vertically as if the floated element
did not exist. This includes the div containing the elements.

The div with the class "row" contains the floated elements, but is
non-positioned, which means that it participates in the normal flow. Because
the elements inside it are positioned using "float," they do not participate
in normal flow. Therefore, the div itself behaves as if it were empty,
collapsing to the default line-height. Using the "clear" style on the
containing div is unnecessary, because it is neither to the right or left of
the elements inside it. It surrounds (contains) them. The scope of the
floating elements is confined to their container.

The "row" divs are not positioned, so they flow normally with regards to one
another, and as block elements they fill the available width of the line,
and flow underneath each other.

The solution is fairly simple:

DIV.row { FONT-SIZE: 9pt; PADDING-TOP: 3px; FONT-FAMILY:
verdana; height: 20px; margin: 1px;}

I removed the "clear" style, which was superfluous. I added a "height"
style, which is the height of the tallest floated elements inside the div.
This results in no spaces between these tallest elements in successive rows.
I could have simply made the "height" style larger, but as it is fairly
obvious that you are emulating a table, I emulated border spacing by
assigning a margin of 1 px to each "row" div.

--
HTH,

Kevin Spencer
Microsoft MVP

Printing Components, Email Components,
FTP Client Classes, Enhanced Data Controls, much more.
DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net
"David" <david.colliver.NEWS@.revilloc.REMOVETHIS.comwrote in message
news:unDWz$roHHA.1244@.TK2MSFTNGP04.phx.gbl...

Quote:

Originally Posted by

Hi all,
>
I have...
>
<asp:Panel id=SignInPanel runat="server" borderwidth="1px"
bordercolor="Black" borderstyle="Solid">
>
<div class=row><asp:label id=BadPasswordLabel runat="server"
Visible="False" forecolor="red"></asp:label><br><font
size=2><strong> Sign in:</strong></font></div>
<div class=row><span class=label>Membership Number / Email address:</span>
<span class=formfields><asp:TextBox id=MembershipTextBox
runat="server"></asp:TextBox></span></div>
<div class=row><span class=label>Password:</span<span
class=formfields><asp:TextBox id=PasswordTextBox runat="server"
TextMode="Password"></asp:TextBox></span></div>
<div class=row><span class=label</span><span
class=formfields><asp:Button id=SignInButton runat="server" Text="Sign
In"></asp:Button></span></div>
>
</asp:Panel>
>
>
My styles are...
<style type="text/css">
DIV.row { CLEAR: both; FONT-SIZE: 9pt; PADDING-TOP: 3px; FONT-FAMILY:
verdana }
DIV.row SPAN.label { FLOAT: left; WIDTH: 250px; TEXT-ALIGN: right }
DIV.row SPAN.formfields { FLOAT: right; WIDTH: 190px; TEXT-ALIGN: left }
</style>
>
>
For some reason, my SignInButton appears on the outside of the box. I have
had this on other parts of the project as well, but I don't understand
what is going on.
>
Any ideas?
>
--
Best regards,
Dave Colliver.
http://www.AshfieldFOCUS.com
~~
http://www.FOCUSPortals.com - Local franchises available
>

Thanks Kevin,

Being a developer rather than a designer, there are many parts to CSS that
still elude me.

I have temporarily got around the issue by adding a couple of BR tags just
after the button, but I do take onboard what you say and will implement it.

You are correct. I was trying to implement a table without using tables. I
am "old school" as in I still use tables for positioning normally, but most
clients now want spans and divs instead of tables, so I have to bite the
bullet and learn it.

--
Best regards,
Dave Colliver.
http://www.AshfieldFOCUS.com
~~
http://www.FOCUSPortals.com - Local franchises available

"Kevin Spencer" <unclechutney@.nothinks.comwrote in message
news:OKMYTv3oHHA.2452@.TK2MSFTNGP02.phx.gbl...

Quote:

Originally Posted by

Hi David,
>
The problem here is the use of the "float" style. Because the "float"
style causes an element to "float," it is positioned, and removed from the
normal flow of the document. The "float" style indicates the direction
that the element should float, and any in-line non-positioned element to
the opposite side will flow around the box. However, any non-positioned
block elements next to the floated element will flow vertically as if the
floated element did not exist. This includes the div containing the
elements.
>
The div with the class "row" contains the floated elements, but is
non-positioned, which means that it participates in the normal flow.
Because the elements inside it are positioned using "float," they do not
participate in normal flow. Therefore, the div itself behaves as if it
were empty, collapsing to the default line-height. Using the "clear" style
on the containing div is unnecessary, because it is neither to the right
or left of the elements inside it. It surrounds (contains) them. The scope
of the floating elements is confined to their container.
>
The "row" divs are not positioned, so they flow normally with regards to
one another, and as block elements they fill the available width of the
line, and flow underneath each other.
>
The solution is fairly simple:
>
DIV.row { FONT-SIZE: 9pt; PADDING-TOP: 3px; FONT-FAMILY:
verdana; height: 20px; margin: 1px;}
>
I removed the "clear" style, which was superfluous. I added a "height"
style, which is the height of the tallest floated elements inside the div.
This results in no spaces between these tallest elements in successive
rows. I could have simply made the "height" style larger, but as it is
fairly obvious that you are emulating a table, I emulated border spacing
by assigning a margin of 1 px to each "row" div.
>
--
HTH,
>
Kevin Spencer
Microsoft MVP
>
Printing Components, Email Components,
FTP Client Classes, Enhanced Data Controls, much more.
DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net
>
"David" <david.colliver.NEWS@.revilloc.REMOVETHIS.comwrote in message
news:unDWz$roHHA.1244@.TK2MSFTNGP04.phx.gbl...

Quote:

Originally Posted by

>Hi all,
>>
>I have...
>>
><asp:Panel id=SignInPanel runat="server" borderwidth="1px"
>bordercolor="Black" borderstyle="Solid">
>>
><div class=row><asp:label id=BadPasswordLabel runat="server"
>Visible="False" forecolor="red"></asp:label><br><font
>size=2><strong> Sign in:</strong></font></div>
><div class=row><span class=label>Membership Number / Email
>address:</span<span class=formfields><asp:TextBox id=MembershipTextBox
>runat="server"></asp:TextBox></span></div>
><div class=row><span class=label>Password:</span<span
>class=formfields><asp:TextBox id=PasswordTextBox runat="server"
>TextMode="Password"></asp:TextBox></span></div>
><div class=row><span class=label</span><span
>class=formfields><asp:Button id=SignInButton runat="server" Text="Sign
>In"></asp:Button></span></div>
>>
></asp:Panel>
>>
>>
>My styles are...
><style type="text/css">
> DIV.row { CLEAR: both; FONT-SIZE: 9pt; PADDING-TOP: 3px; FONT-FAMILY:
>verdana }
> DIV.row SPAN.label { FLOAT: left; WIDTH: 250px; TEXT-ALIGN: right }
> DIV.row SPAN.formfields { FLOAT: right; WIDTH: 190px; TEXT-ALIGN: left }
> </style>
>>
>>
>For some reason, my SignInButton appears on the outside of the box. I
>have had this on other parts of the project as well, but I don't
>understand what is going on.
>>
>Any ideas?
>>
>--
>Best regards,
>Dave Colliver.
>http://www.AshfieldFOCUS.com
>~~
>http://www.FOCUSPortals.com - Local franchises available
>>

>
>

Strange effect with panel

Hi all,
I have...
<asp:Panel id=SignInPanel runat="server" borderwidth="1px"
bordercolor="Black" borderstyle="Solid">
<div class=row><asp:label id=BadPasswordLabel runat="server" Visible="False"
forecolor="red"></asp:label><br><font size=2><strong> Sign
in:</strong></font></div>
<div class=row><span class=label>Membership Number / Email address:</span>
<span class=formfields><asp:TextBox id=MembershipTextBox
runat="server"></asp:TextBox></span></div>
<div class=row><span class=label>Password:</span> <span
class=formfields><asp:TextBox id=PasswordTextBox runat="server"
TextMode="Password"></asp:TextBox></span></div>
<div class=row><span class=label> </span><span class=formfields><asp:Button
id=SignInButton runat="server" Text="Sign In"></asp:Button></span></div>
</asp:Panel>
My styles are...
<style type="text/css">
DIV.row { CLEAR: both; FONT-SIZE: 9pt; PADDING-TOP: 3px; FONT-FAMILY:
verdana }
DIV.row SPAN.label { FLOAT: left; WIDTH: 250px; TEXT-ALIGN: right }
DIV.row SPAN.formfields { FLOAT: right; WIDTH: 190px; TEXT-ALIGN: left }
</style>
For some reason, my SignInButton appears on the outside of the box. I have
had this on other parts of the project as well, but I don't understand what
is going on.
Any ideas?
Best regards,
Dave Colliver.
http://www.AshfieldFOCUS.com
~~
http://www.FOCUSPortals.com - Local franchises availableHi David,
The problem here is the use of the "float" style. Because the "float" style
causes an element to "float," it is positioned, and removed from the normal
flow of the document. The "float" style indicates the direction that the
element should float, and any in-line non-positioned element to the opposite
side will flow around the box. However, any non-positioned block elements
next to the floated element will flow vertically as if the floated element
did not exist. This includes the div containing the elements.
The div with the class "row" contains the floated elements, but is
non-positioned, which means that it participates in the normal flow. Because
the elements inside it are positioned using "float," they do not participate
in normal flow. Therefore, the div itself behaves as if it were empty,
collapsing to the default line-height. Using the "clear" style on the
containing div is unnecessary, because it is neither to the right or left of
the elements inside it. It surrounds (contains) them. The scope of the
floating elements is confined to their container.
The "row" divs are not positioned, so they flow normally with regards to one
another, and as block elements they fill the available width of the line,
and flow underneath each other.
The solution is fairly simple:
DIV.row { FONT-SIZE: 9pt; PADDING-TOP: 3px; FONT-FAMILY:
verdana; height: 20px; margin: 1px;}
I removed the "clear" style, which was superfluous. I added a "height"
style, which is the height of the tallest floated elements inside the div.
This results in no spaces between these tallest elements in successive rows.
I could have simply made the "height" style larger, but as it is fairly
obvious that you are emulating a table, I emulated border spacing by
assigning a margin of 1 px to each "row" div.
HTH,
Kevin Spencer
Microsoft MVP
Printing Components, Email Components,
FTP Client Classes, Enhanced Data Controls, much more.
DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net
"David" <david.colliver.NEWS@.revilloc.REMOVETHIS.com> wrote in message
news:unDWz$roHHA.1244@.TK2MSFTNGP04.phx.gbl...
> Hi all,
> I have...
> <asp:Panel id=SignInPanel runat="server" borderwidth="1px"
> bordercolor="Black" borderstyle="Solid">
> <div class=row><asp:label id=BadPasswordLabel runat="server"
> Visible="False" forecolor="red"></asp:label><br><font
> size=2><strong> Sign in:</strong></div>
> <div class=row><span class=label>Membership Number / Email address:</span>
> <span class=formfields><asp:TextBox id=MembershipTextBox
> runat="server"></asp:TextBox></span></div>
> <div class=row><span class=label>Password:</span> <span
> class=formfields><asp:TextBox id=PasswordTextBox runat="server"
> TextMode="Password"></asp:TextBox></span></div>
> <div class=row><span class=label> </span><span
> class=formfields><asp:Button id=SignInButton runat="server" Text="Sign
> In"></asp:Button></span></div>
> </asp:Panel>
>
> My styles are...
> <style type="text/css">
> DIV.row { CLEAR: both; FONT-SIZE: 9pt; PADDING-TOP: 3px; FONT-FAMILY:
> verdana }
> DIV.row SPAN.label { FLOAT: left; WIDTH: 250px; TEXT-ALIGN: right }
> DIV.row SPAN.formfields { FLOAT: right; WIDTH: 190px; TEXT-ALIGN: left }
> </style>
>
> For some reason, my SignInButton appears on the outside of the box. I have
> had this on other parts of the project as well, but I don't understand
> what is going on.
> Any ideas?
> --
> Best regards,
> Dave Colliver.
> http://www.AshfieldFOCUS.com
> ~~
> http://www.FOCUSPortals.com - Local franchises available
>
Thanks Kevin,
Being a developer rather than a designer, there are many parts to CSS that
still elude me.
I have temporarily got around the issue by adding a couple of BR tags just
after the button, but I do take onboard what you say and will implement it.
You are correct. I was trying to implement a table without using tables. I
am "old school" as in I still use tables for positioning normally, but most
clients now want spans and divs instead of tables, so I have to bite the
bullet and learn it.
Best regards,
Dave Colliver.
http://www.AshfieldFOCUS.com
~~
http://www.FOCUSPortals.com - Local franchises available
"Kevin Spencer" <unclechutney@.nothinks.com> wrote in message
news:OKMYTv3oHHA.2452@.TK2MSFTNGP02.phx.gbl...
> Hi David,
> The problem here is the use of the "float" style. Because the "float"
> style causes an element to "float," it is positioned, and removed from the
> normal flow of the document. The "float" style indicates the direction
> that the element should float, and any in-line non-positioned element to
> the opposite side will flow around the box. However, any non-positioned
> block elements next to the floated element will flow vertically as if the
> floated element did not exist. This includes the div containing the
> elements.
> The div with the class "row" contains the floated elements, but is
> non-positioned, which means that it participates in the normal flow.
> Because the elements inside it are positioned using "float," they do not
> participate in normal flow. Therefore, the div itself behaves as if it
> were empty, collapsing to the default line-height. Using the "clear" style
> on the containing div is unnecessary, because it is neither to the right
> or left of the elements inside it. It surrounds (contains) them. The scope
> of the floating elements is confined to their container.
> The "row" divs are not positioned, so they flow normally with regards to
> one another, and as block elements they fill the available width of the
> line, and flow underneath each other.
> The solution is fairly simple:
> DIV.row { FONT-SIZE: 9pt; PADDING-TOP: 3px; FONT-FAMILY:
> verdana; height: 20px; margin: 1px;}
> I removed the "clear" style, which was superfluous. I added a "height"
> style, which is the height of the tallest floated elements inside the div.
> This results in no spaces between these tallest elements in successive
> rows. I could have simply made the "height" style larger, but as it is
> fairly obvious that you are emulating a table, I emulated border spacing
> by assigning a margin of 1 px to each "row" div.
> --
> HTH,
> Kevin Spencer
> Microsoft MVP
> Printing Components, Email Components,
> FTP Client Classes, Enhanced Data Controls, much more.
> DSI PrintManager, Miradyne Component Libraries:
> http://www.miradyne.net
> "David" <david.colliver.NEWS@.revilloc.REMOVETHIS.com> wrote in message
> news:unDWz$roHHA.1244@.TK2MSFTNGP04.phx.gbl...
>

strange hyperlink focus problem

i have inserted a hyperlink into a form:

<asp:hyperlink id="OpenCalendarLink" runat="server" imageurl="../../images/button_calendar.gif">
 </asp:hyperlink>

there is an <asp:textbox> before my hyperlink but when I tab out of my textbox the cursor focus jumps past my hyperlink. I have tried tabbing all across the page and the cursor never focuses on my hyperlink. Yet on a different page I have a hyperlink within the <edititemtemplate> of a dataSet and the cursor focuses on the hyperlink within that page.

can anyone help me solve this problem please!Post the code to the ASPX page and I'll take a look.
here is my code thanks darrell:

<%@. Page language="c#" Debug="true" Codebehind="trnew.aspx.cs" AutoEventWireup="false" Inherits="PinpointOnline.TimeRecordingNewPage" %>
<%@. Register TagPrefix="date" Namespace="PeterBlum.PetersDatePackage" Assembly="PetersDatePackage" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
<html>
<head>
<title>PINPOINT ONLINE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="http://links.10026.com/?link=../../css/timerecording.css" type="text/css">
<script language="JavaScript">
function SelectMatter(){
var lookupWin = window.open('../misc/mattersearch.aspx?parent=trnew&by=Code&page=1&totpages=0&for='
 + window.document.forms['TRNewForm'].elements['NewDisplayCodeTB'].value,
 'mattersearchWin', 'scrollbars=yes,resizable=yes,width=660,height=500', true);
}
function SelectAttCode(){
var lookupWin = window.open('../misc/attcodesearch.aspx?fecode=0&rscode=2&dcode=SPE0287&by=Code&page=1&totpages=0&for='
 + window.document.forms['TRNewForm'].elements['NewAttCodeTB'].value,
 'attcodesearchWin', 'scrollbars=yes,resizable=yes,width=660,height=500', true);
}
 function submitit()
 {
 document.forms[0].action="trview.aspx";
 document.forms[0].target="viewFrame";
 document.forms[0].__VIEWSTATE.name = 'NOVIEWSTATE';
 document.forms[0].submit();
 self.TRNewForm.NewDateTB.focus();
 }
 </script>
</head
<body class=bodystyle2 text=#000000
 onload=javascript:self.TRNewForm.NewDateTB.focus();>
 <form id=TRNewForm runat="server">
 <div id=Layer1
 style="Z-INDEX: 1; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 10px">
 <table class=tablenew1 cellspacing=0 cellpadding=0 width="100%" border=0>
 <tbody>
 <tr>
 <td nowrap=true>
Date:
 <date:datetextbox class=formcontent3 id=NewDateTB
 runat="server" xinitiallyblankrule="Today"
 xinvaliddatemsg=" " xerrorbackcolor="Red"
 columns="11" xshowpopupb="False"
 xenablecontextmenub="False">
 </date:datetextbox>
 <asp:hyperlink id=LoadCalendarPopupLink
 onclick="javascript:calendar_window=window.open('../misc/calendar.aspx?form=TRNewForm&textbox=NewDateTB','DatePicker','width=220,height=179,left=134,top=80'); calendar_window.focus();"
 runat="server"
 imageurl="../../images/button_calendar.gif">
 </asp:hyperlink>
 </td>
 <td align=right width="100%">
 <date:datetextboxvalidator id=NewDateTBValidator runat="server"
 controltovalidate="NewDateTB"
 font-bold="True">
 </date:datetextboxvalidator>
 <input class=formcontent1 readonly=true size=12
 name=NewTimeDisplayTB><input class=formcontent1 onclick=stopWatch1.startclock() tabindex=-1
 type=button value=start name=NewStartClockButton><input class=formcontent1 onclick=stopWatch1.stopclock() tabindex=-1
 type=button value=stop name=NewStopClockButton><input class=formcontent1 onclick=stopWatch1.resetclock() tabindex=-1
 type=button value=reset name=NewResetClockButton>
 </td>
 </tr>
 </tbody>
 </table>
 <table class=tablenew2 cellspacing=0 cellpadding=0 width="100%" border=0>
 <tbody>
 <tr>
 <td nowrap=true>
Matter:
 <asp:textbox class=formcontent4 id=NewDisplayCodeTB tabindex=-1
 runat="server" readonly="true" size="12"
 maxlength="12">
 </asp:textbox>
 <input class=formcontent1 onclick=SelectMatter(); type=button
 value=... name=LoadMatterSearchPopUpButton>
 </td>
 <td nowrap=true>
Client:<input class=formcontent1 tabindex=-1 readonly=true maxlength=50 size=50
 name=NewDisplayNameTB>
 </td>
 <td valign=baseline nowrap=true width="100%">
LA:<img height=13 src="http://pics.10026.com/?src=../../images/checkbox_blank.gif" width=13 align=absMiddle
 name=NewLAImage>
 </td>
 </tr>
 </tbody>
 </table>
 <table class=tablenew3 cellspacing=0 cellpadding=0 width="100%" border=0>
 <tbody>
 <tr>
 <td nowrap=true>
Narrative:
 <asp:textbox class=formcontent1 id=NewNarrativeTB
 runat="server" size="50" maxlength="50">
 </asp:textbox>
 </td>
 <td nowrap=true>
Rate:
 <asp:dropdownlist id=NewRateSchemeDDL runat="server"
 enabled="false" cssclass="formcontent1">
 </asp:dropdownlist>
 </td>
 <td nowrap=true>
AT:
 <asp:textbox class=formcontent1 id=NewAttCodeTB runat="server"
 size="7" maxlength="7">
 </asp:textbox>
 <input class=formcontent1 onclick=SelectAttCode(); type=button
 value=... name=LoadAttCodeSearchPopupButton>
 </td>
 <td nowrap=true>
Time/Units:
 <asp:textbox class=formcontent1 id=NewUnitsTB runat="server"
 size="6" maxlength="6">
 </asp:textbox>
 </td>
 <td nowrap=true width="100%">
 <asp:button id=SubmitFormButton runat="server"
 cssclass="formcontent2" value="submit" text="Submit">
 </asp:button>
 </td>
 </tr>
 </tbody>
 </table>
 <table class=tablenew4 cellspacing=0 cellpadding=0 width="100%" border=0>
 <tbody>
 <tr>
 <td> 
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </form>
</form>
</tr>
</tbody>
</table>
<div>
</div>
</form>
</body>
</html>