By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,969 Members | 1,579 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,969 IT Pros & Developers. It's quick & easy.

Strange effect with panel

P: n/a
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>&nbsp;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
May 30 '07 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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" <da*****************@revilloc.REMOVETHIS.comwrot e in message
news:un**************@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>&nbsp;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

May 31 '07 #2

P: n/a
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" <un**********@nothinks.comwrote in message
news:OK**************@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" <da*****************@revilloc.REMOVETHIS.comwrot e in message
news:un**************@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>&nbsp;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


May 31 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.