Alignment question

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Dave - 22 Mar 2008 21:31 GMT

A couple of quetions regarding the following simple code provided below:

a. Why don't the Label and the RadioButtonList align on top? The text also
doesn't align.

b. Why do the radiobuttons "Self" and "Team" appear so far apart from each
other? I'd like them to appear next to each other.

===========================
<%@ Page Language="VB" AutoEventWireup="false"
CodeFile="frmLayoutTest.aspx.vb" Inherits="frmLayoutTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>

<style type="text/css">
form p {
width: 600px;
clear: both;
}
form p label {
float: left;
width: 170px;
}

form p input, form p textarea, form p select, form p RadioButtonList {
float: left;
height:auto;
width:auto;

}
</style>

</head>
<body>
<form id="form2" runat="server">
<p>This is a form.</p>

<p>
<label for="rblView">Allowed to Enter Time For:</label>
<asp:RadioButtonList ID="RadioButtonList1" runat="server"
AutoPostBack="False" RepeatDirection="Horizontal" style="float:left;">
<asp:ListItem Value="0">Self</asp:ListItem>
<asp:ListItem Value="1">Team</asp:ListItem>
</asp:RadioButtonList>
</p>

</form>
</body>
</html>

Reply to this Message

Anthony Jones - 23 Mar 2008 20:58 GMT

> A couple of quetions regarding the following simple code provided below:
>
[quoted text clipped - 50 lines]
> </body>
> </html>

There is no actual HTML element called RadioButtonList so your CSS selector
that references it won't be doing anything

The RadioButtonList is actually implemented as a table. It therefore has
CellSpacing and CellPadding which is why it isn't aligning as you expect.
You can apply CellSpacing="0" to the RadioButtonList control and that
attribute will appear on the generated table element. You can control
CellPadding as an attribute or in CSS as td {padding:0}.

The reason they are so far apart is the the text next to the radio button is
contained in a label element. You CSS gives a label element a minimum size
of 170px.

What is it your trying to achieve?

Signature

Anthony Jones - MVP ASP/ASP.NET

Reply to this Message

Dave - 24 Mar 2008 16:16 GMT

Thanks for the quick response. Yes, this answers my questions. Thanks
again.

> > A couple of quetions regarding the following simple code provided below:
> >
[quoted text clipped - 68 lines]
>
> What is it your trying to achieve?

Reply to this Message

Alignment question

Free Magazines