Alignment question

  • Thread starter Thread starter Dave
  • Start date Start date
D

Dave

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>
 
Dave said:
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>
Click to expand...

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?
 
Back
Top