473,320 Members | 1,841 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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>&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
2 1304
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Martin Drautzburg | last post by:
In the wx demoy TreeCtrl.py I find the following code, that should have no effect but seems to be needed nevertheless. class TestTreeCtrlPanel(wx.Panel): def __init__(self, parent, log): , isz)...
0
by: Marc Robitaille | last post by:
Hello group I have a strange problem. I have a panel. On this panel, I can drop custom Textbox that I create at runtime. I have a toolbar on witch a delete button exist. When I click on this...
1
by: sternchen | last post by:
Hi, I read all threads to this topic which were exactly like my problem and I tried all solutions but it still doesnt want to work :(. Can anybody help? I wrote an application where you can...
2
by: kulabhishek | last post by:
Hello all. I have developed one user control "Grid" in C# and I am using it in another user control inside one panel. The AutoScroll property for the panel is enabled. When the height or...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.