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.comw rote in message
news:un******** ******@TK2MSFTN GP04.phx.gbl...
Hi all,
I have...
<asp:Panel id=SignInPanel runat="server" borderwidth="1p x"
bordercolor="Bl ack" borderstyle="So lid">
<div class=row><asp: label id=BadPasswordL abel runat="server"
Visible="False" forecolor="red" ></asp:label><br>< font
size=2><strong> Sign in:</strong></font></div>
<div class=row><span class=label>Mem bership Number / Email address:</span>
<span class=formfield s><asp:TextBox id=MembershipTe xtBox
runat="server"> </asp:TextBox></span></div>
<div class=row><span class=label>Pas sword:</span<span
class=formfield s><asp:TextBox id=PasswordText Box runat="server"
TextMode="Passw ord"></asp:TextBox></span></div>
<div class=row><span class=label</span><span
class=formfield s><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
