Alignment question

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

Anthony Jones

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?
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Enabling Radiobuttonlist in Javascript 4
Can somebody explain this it's some html so I assume that somebody know this 1
Javascript with IE 7 6
Style sheet question 2
RadioButtonList, Web User Control, Firefox, IE 5
strange behavior with updatepanel 2
The code behind file seems to work very strange 2
OnChange Javascript - IE vs Firefox 7

Top