PC Review


Reply
Thread Tools Rate Thread

Alignment question

 
 
Dave
Guest
Posts: n/a
 
      22nd Mar 2008
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 With Quote
 
 
 
 
Anthony Jones
Guest
Posts: n/a
 
      23rd Mar 2008

"Dave" <(E-Mail Removed)> wrote in message
news:B0E53C59-F50B-4753-8B91-(E-Mail Removed)...
> 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>
>


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?

--
Anthony Jones - MVP ASP/ASP.NET


 
Reply With Quote
 
Dave
Guest
Posts: n/a
 
      24th Mar 2008
Thanks for the quick response. Yes, this answers my questions. Thanks
again.

"Anthony Jones" wrote:

>
> "Dave" <(E-Mail Removed)> wrote in message
> news:B0E53C59-F50B-4753-8B91-(E-Mail Removed)...
> > 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>
> >

>
> 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?
>
> --
> Anthony Jones - MVP ASP/ASP.NET
>
>
>

 
Reply With Quote
 
 
 
Reply

Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Number Alignment Question mjcxp Microsoft Excel Misc 2 29th Jul 2008 09:04 PM
Question about text alignment hrbsh97 Microsoft Word Document Management 4 18th Dec 2007 09:32 PM
Alignment Question Wayne Wengert Microsoft ASP .NET 2 28th Nov 2005 03:26 PM
c# alignment question Brendan Microsoft C# .NET 2 26th Feb 2004 12:57 PM
c# alignment question Brendan Microsoft C# .NET 0 26th Feb 2004 03:47 AM


Features
 

Advertising
 

Newsgroups
 


All times are GMT +1. The time now is 06:46 AM.