Strange effect with panel

[David]

Hi all,

I have...

<aspanel 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>

</aspanel>


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

 

[Kevin Spencer]

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]

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