html radio buttons alignment inside a panel

I have two html radio buttons and I want to align both of them vertically at the same vertical position within the panel. However, the two buttons are always misaligned, the top radio button a little on the left of the bottom one (Please see the code below). Can someone please help?

<asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset">
            <table cellspacing="0"> 
            <tr> 
            <td> 
            <input type="radio" name="Sellable" align="middle" value="S" onclick="toggleSet(this)" checked="checked">Sellable</td> </tr>
            <tr><td>
            <input type="radio" name="Sellable" align="middle" value="N" onclick="toggleSet(this)"> Not Sellable<br>
            </td> </tr></table>
            </asp:Panel>

Open in new window

LVL 1
skaleem1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

nicawCommented:
Heh, if this helps it's the easiest question I answered so far.
<asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset">
<table cellspacing="0"> 
<tr> 
<td> 
<input type="radio" name="Sellable" align="middle" value="S" onclick="toggleSet(this)" checked="checked">Sellable</td> </tr>
<tr><td>
<input type="radio" name="Sellable" align="middle" value="N" onclick="toggleSet(this)">Not Sellable<br>
</td> </tr></table>
</asp:Panel>

Open in new window

0
skaleem1Author Commented:
I am sorry but I could not see the difference between my code and your code, can you please identify and elaborate?
0
nicawCommented:
There was a <space> right before "Not Sellable".
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

skaleem1Author Commented:
But that does not sole the alignment issue, see the attached screenshot:
Sellable.GIF
0
nicawCommented:
I see what you mean now. Please included more code.
0
a1aaitCommented:
Do you have an associated style sheet for this?
0
Dave BaldwinFixer of ProblemsCommented:
It looks like your sample is enclosed by a block that is 'centered'.  Also, what browser are you viewing it in and capturing the sample?
0
skaleem1Author Commented:
a1aait:
As you can see in the code above, I am not referencing any stylesheet or style with both the enclosing panel as well as the inner table, so the answer is no.

DaveBaldwin:
Well, as far as know, there is no block of code that is enclosing this panel and the contained table. I am using IE.

nicaw, and all,

Please see detailed code below:
aspx:

<div class="OuterListBox">
        <asp:Panel ID="radioOptCountryRegionPanel" runat="server" BorderStyle="Outset">
            <table cellspacing="0"> 
            <tr> 
            <td> 
            <input type="radio" name="CountriesRegions" align="middle" value="Countries" onclick="LoadCountriesRegions(this)" checked="checked">Countries Based Restrictions</td> </tr>
            <tr><td>
            <input type="radio" name="CountriesRegions" align="middle" value="Regions" onclick="LoadCountriesRegions(this)">Regions Based Restrictions
            </td> </tr></table>
            </asp:Panel>
        <asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset">
            <table cellspacing="0"> 
            <tr> 
            <td> 
            <input type="radio" name="Sellable" align="middle" value="S" onclick="toggleSet(this)" checked="checked">Sellable</td> </tr>
            <tr><td>
            <input type="radio" name="Sellable" align="middle" value="N" onclick="toggleSet(this)">Not Sellable
            </td> </tr></table>
            </asp:Panel>
        <div class="InnerLeftListBox">            
            <table style="width: 260px">
                <tr><td><asp:Label ID="lblForThisPartRestric" runat="server" Text="Sellable In" ForeColor="#3366CC" 
                Font-Size="Small" Font-Bold="True"/></td><td style="width: 30px"></td></tr>
                <tr><td style="width: 150px"><p><select id="lstForThisPartRestric" size="10" runat="server" style="WIDTH: 176px; HEIGHT: 128px" multiple="true" 
                onchange='OnChange("btnlstItemRestricRemove", "btnlstItemRestricAdd","lstForThisPartRestric", "lstAllRestric");'>          
        </select></p></td>
                <td style="width: 80px">
            <button id="btnlstItemRestricAdd" type="button" runat="server" onclick="addSelectedItemToDestAndRemoveFromSource('btnlstItemRestricAdd', 'btnlstItemRestricRemove', 'lstAllRestric','lstForThisPartRestric');">&lt&ltAdd</button>
            <button id="btnlstItemRestricRemove" type="button" runat="server" onclick="addSelectedItemToDestAndRemoveFromSource('btnlstItemRestricRemove', 'btnlstItemRestricAdd', 'lstForThisPartRestric','lstAllRestric');">Remove>></button>            
            <asp:Button ID="btnlstItemRestricReset" runat="server" Enabled="false" OnClick="btnlstItemRestricReset_Click" Text="Reset" Width="80px"/>
            
            </td></tr>
            </table>
        </div>
        <div class="InnerRightListBox">
            <asp:Panel ID="RestricEditPanelRight" runat="server" Visible="false">
            </asp:Panel>
            <asp:Panel ID="RestricAddPanel" runat="server">
                <table style="width: 180px">
                    <tr><td><asp:Label ID="lblAllRestric" runat="server" Text="Rest of World" ForeColor="#3366CC" 
                Font-Size="Small" Font-Bold="True"/></td><td style="width: 30px"></td></tr>
                    <tr><td style="width: 150px"><p><select id="lstAllRestric" size="10" runat="server" style="WIDTH: 176px; HEIGHT: 128px" multiple="true" 
                onchange='OnChange("btnlstItemRestricAdd", "btnlstItemRestricRemove","lstAllRestric", "lstForThisPartRestric");'>          
        </select></p></td>
                    </tr>
                </table>
                
            </asp:Panel>
        </div></div>

styles:

div.OuterListBox {

        width: 350px;

        border:none;

        position: relative;

        clear: both;

        }
        
        div.InnerLeftListBox {

        width: 70%;

        position: relative;

        background: none;        

        float: left;

        }

 

        div.InnerRightListBox {

        width: 30%;

        position: relative;

        background: none;        

        float: right;
            top: 0px;
            left: 36px;
            height: 80px;
        }

Open in new window

0
Dave BaldwinFixer of ProblemsCommented:
For what it's worth, the only way I can duplicate what you showed in the pic is to put td {text-align: center;} in the style section.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
LZ1Commented:
Like this?
<style> 
div.OuterListBox { 
 
        width: 350px; 
 
        border:none; 
 
        position: relative; 
 
        clear: both; 
 
        } 
         
        div.InnerLeftListBox { 
 
        width: 70%; 
 
        position: relative; 
 
        background: none;         
 
        float: left; 
 
        } 
 
  
 
        div.InnerRightListBox { 
 
        width: 30%; 
 
        position: relative; 
 
        background: none;         
 
        float: right; 
            top: 0px; 
            left: 36px; 
            height: 80px; 
        }</style>
</head>

<body>
<div class="OuterListBox"> 
        <asp:Panel ID="radioOptCountryRegionPanel" runat="server" BorderStyle="Outset"> 
            <table cellspacing="0">  
            <tr>  
            <td>  
            <input type="radio" name="CountriesRegions" align="middle" value="Countries" onclick="LoadCountriesRegions(this)" checked="checked" style="text-align:left;">Countries Based Restrictions</td> </tr> 
            <tr><td> 
            <input type="radio" name="CountriesRegions" align="middle" value="Regions" onclick="LoadCountriesRegions(this)" style="text-align:left;">Regions Based Restrictions 
            </td> </tr></table> 
            </asp:Panel> 
        <asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset"> 
            <table cellspacing="0">  
            <tr>  
            <td>  
            <input type="radio" name="Sellable" align="middle" value="S" onclick="toggleSet(this)" checked="checked">Sellable</td> </tr> 
            <tr><td> 
            <input type="radio" name="Sellable" align="middle" value="N" onclick="toggleSet(this)">Not Sellable 
            </td> </tr></table> 
  </asp:Panel> 
        <div class="InnerLeftListBox">             
            <table style="width: 260px"> 
                <tr><td><asp:Label ID="lblForThisPartRestric" runat="server" Text="Sellable In" ForeColor="#3366CC"  
                Font-Size="Small" Font-Bold="True"/></td><td style="width: 30px"></td></tr> 
                <tr><td style="width: 150px"><p><select id="lstForThisPartRestric" size="10" runat="server" style="WIDTH: 176px; HEIGHT: 128px" multiple="true"  
                onchange='OnChange("btnlstItemRestricRemove", "btnlstItemRestricAdd","lstForThisPartRestric", "lstAllRestric");'>           
        </select></p></td> 
                <td style="width: 80px"> 
            <button id="btnlstItemRestricAdd" type="button" runat="server" onclick="addSelectedItemToDestAndRemoveFromSource('btnlstItemRestricAdd', 'btnlstItemRestricRemove', 'lstAllRestric','lstForThisPartRestric');">&lt&ltAdd</button> 
            <button id="btnlstItemRestricRemove" type="button" runat="server" onclick="addSelectedItemToDestAndRemoveFromSource('btnlstItemRestricRemove', 'btnlstItemRestricAdd', 'lstForThisPartRestric','lstAllRestric');">Remove>></button>             
            <asp:Button ID="btnlstItemRestricReset" runat="server" Enabled="false" OnClick="btnlstItemRestricReset_Click" Text="Reset" Width="80px"/> 
             
            </td></tr> 
            </table> 
        </div> 
        <div class="InnerRightListBox"> 
            <asp:Panel ID="RestricEditPanelRight" runat="server" Visible="false"> 
            </asp:Panel> 
            <asp:Panel ID="RestricAddPanel" runat="server"> 
                <table style="width: 180px"> 
                    <tr><td><asp:Label ID="lblAllRestric" runat="server" Text="Rest of World" ForeColor="#3366CC"  
                Font-Size="Small" Font-Bold="True"/></td><td style="width: 30px"></td></tr> 
                    <tr><td style="width: 150px"><p><select id="lstAllRestric" size="10" runat="server" style="WIDTH: 176px; HEIGHT: 128px" multiple="true"  
                onchange='OnChange("btnlstItemRestricAdd", "btnlstItemRestricRemove","lstAllRestric", "lstForThisPartRestric");'>           
        </select></p></td> 
                    </tr> 
                </table> 
                 
            </asp:Panel> 
        </div></div>

Open in new window

0
skaleem1Author Commented:
DaveBaldwin:

I tried your idea and style="text-align:center;" did not work however style="text-align:left;" worked  (the two radio buttons in each panel are vertically aligned, nice). However, there is one issue left. Please see the code below as well as the screenshot. In the screenshot, as you can see, how can I vertically align the radio buttons in the lower panel (sellable/not sellable)  with the radio buttons in the upper panel (Countries/Regions)?
<asp:Panel ID="radioOptCountryRegionPanel" runat="server" BorderStyle="Outset">
            <table cellspacing="0"> 
            <tr> 
            <td style="text-align:left;"> 
            <input type="radio" name="CountriesRegions"  value="Countries" onclick="LoadCountriesRegions(this)" checked="checked" >Countries Based Restrictions</td> </tr>
            <tr><td style="text-align:left;">
            <input type="radio" name="CountriesRegions"  value="Regions" onclick="LoadCountriesRegions(this)">Regions Based Restrictions
            </td> </tr></table>
            </asp:Panel>
        <asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset">
            <table cellspacing="0"> 
            <tr> 
            <td style="text-align:left;"> 
            <input type="radio" name="Sellable"  value="S" onclick="toggleSet(this)" checked="checked">Sellable</td> </tr>
            <tr><td style="text-align:left;">
            <input type="radio" name="Sellable"  value="N" onclick="toggleSet(this)" >Not Sellable
            </td> </tr></table>
            </asp:Panel>

Open in new window

SellableCountries.GIF
0
LZ1Commented:
To get them to line up exactly your going to have to play with the margin-left style inside of the table.  Ideally you could just add
text-align:left;
to both cells and you'd be fine. I'm not sure this would work though, as I'm not testing with a live source.
How wide are both of those boxes containing the buttons?
0
skaleem1Author Commented:
well, as the code suggests, there is no width set for the two panels enclosing the two tables:

<asp:Panel ID="radioOptCountryRegionPanel" runat="server" BorderStyle="Outset">

<asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset">

0
LZ1Commented:
And you can't use text-align:left in the td or you'd prefer to have them both centered?
 

<asp:Panel ID="radioOptCountryRegionPanel" runat="server" BorderStyle="Outset"> 
            <table align="left" cellspacing="0">  
            <tr>  
            <td style="text-align:left;">  
            <input type="radio" name="CountriesRegions"  value="Countries" onclick="LoadCountriesRegions(this)" checked="checked" >Countries Based Restrictions</td> </tr> 
            <tr><td style="text-align:left;"> 
            <input type="radio" name="CountriesRegions"  value="Regions" onclick="LoadCountriesRegions(this)">Regions Based Restrictions 
            </td> </tr></table> 
</asp:Panel> 
        <asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset"> 
          <table align="left" cellspacing="0">  
            <tr>  
            <td style="text-align:left;">  
            <input type="radio" name="Sellable"  value="S" onclick="toggleSet(this)" checked="checked">Sellable</td> </tr> 
            <tr><td style="text-align:left;"> 
            <input type="radio" name="Sellable"  value="N" onclick="toggleSet(this)" >Not Sellable 
            </td> </tr></table> 
</asp:Panel>

Open in new window

0
skaleem1Author Commented:
this does not work and it messes up the look and feel completely, see the screenshot below:
SellableCountries-1.GIF
0
LZ1Commented:
Sorry about that one..

<asp:Panel ID="radioOptCountryRegionPanel" runat="server" BorderStyle="Outset"> 
            <table cellspacing="0">  
            <tr>  
            <td style="text-align:left;">  
            <input type="radio" name="CountriesRegions"  value="Countries" onclick="LoadCountriesRegions(this)" checked="checked" >Countries Based Restrictions</td> </tr> 
            <tr><td style="text-align:left;"> 
            <input type="radio" name="CountriesRegions"  value="Regions" onclick="LoadCountriesRegions(this)">Regions Based Restrictions 
            </td> </tr></table> 
</asp:Panel> 
        <asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset"> 
          <table style="text-align:left;" cellspacing="0">  
            <tr>  
            <td style="text-align:left;">  
            <input type="radio" name="Sellable"  value="S" onclick="toggleSet(this)" checked="checked">Sellable</td> </tr> 
            <tr><td style="text-align:left;"> 
            <input type="radio" name="Sellable"  value="N" onclick="toggleSet(this)" >Not Sellable 
            </td> </tr></table> 
</asp:Panel>

Open in new window

0
skaleem1Author Commented:
This does not help as the vertical alignment of radiobox between the two panels is still off as shown in the screenshot below:

The only way to make it work in terms of having the same vertical alignment is to set the style="text-align:left;"  style inside both panels. However, in this case, all four radio buttons are aligned vertically to the extreme left of both panels, something I don't want. I want all of the radio buttons in the two panels aligned vertically but in the center...
SellableCountries.GIF
0
LZ1Commented:
Here's the thing.  If we want to align that way, we'll have to know the width or set the width.  In that case, we can align using the margin-left.  The table and text alignment are not going to work properly.
0
LZ1Commented:
Like this:
<asp:Panel ID="radioOptCountryRegionPanel" runat="server" BorderStyle="Outset"> 
            <table width="100%" cellspacing="0">  
            <tr>  
            <td style="text-align:left;">  
            <input type="radio" name="CountriesRegions" style="margin-left:50px;"  value="Countries" onclick="LoadCountriesRegions(this)" checked="checked" >Countries Based Restrictions</td> </tr> 
            <tr><td style="text-align:left;"> 
            <input type="radio" name="CountriesRegions"  style="margin-left:50px;" value="Regions" onclick="LoadCountriesRegions(this)">Regions Based Restrictions 
            </td> </tr></table> 
</asp:Panel> 
        <asp:Panel ID="radioOptSellablePanel" runat="server" BorderStyle="Outset"> 
          <table width="100%" cellspacing="0" style="text-align:left;">  
            <tr>  
            <td>  
            <input type="radio" name="Sellable"  style="margin-left:50px;" value="S" onclick="toggleSet(this)" checked="checked">Sellable</td> </tr> 
            <tr><td style="text-align:left;"> 
            <input type="radio" name="Sellable"  style="margin-left:50px;" value="N" onclick="toggleSet(this)" >Not Sellable 
            </td> </tr></table> 
</asp:Panel>

Open in new window

0
skaleem1Author Commented:
Thanks LZ1, that worked perferctly. I will split the points between you and DaveBaldwin as he answered the first part of the question i.e aligning between the radio buttons within each individual panel (see 29883520)
0
skaleem1Author Commented:
Thanks a lot to both DaveBaldwin and LZ1
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.