Solved

HTML - How do I align a select and an input ?

Posted on 2008-10-30
7
1,423 Views
Last Modified: 2012-06-21
Ok, I've got an .xsl page which is defining my HTML.
1. A table is being used for layout (lables on left, other items on right)
2.The first few elements on the page are inputs, then there are some selects (drop down box).

When the page renders, the left sides of the inputs and selects do not line up. the selects are "in" a few spaces..its driving me nuts..looks horrible!!

How does one fix this? I tried aligning left etc etc, but it just doesn't want to do anythng.

Here's the code from my .xsl
I'm giving you the code as it exists on the site, I've 100 versions which do nothing, so thought best to start from scratch?

Thanks in advance for anything you can think of!



<tr>

   <td valign="top">

      <div class="formtext1">

         <label for="email"><xsl:call-template name="navarrows" />

            <span class="boldstyle">Email Address</span>

         </label>

      </div>

   </td>

   <td align="left">

      <input type="text" name="Email_Address" style="width:200px" size="30" id="email" disabled="disabled" >

        <xsl:attribute name="value"><xsl:value-of select="contact[@type = 'email']/@number"/></xsl:attribute>

      </input>

   </td>

</tr>

<tr>

    <td valign="top">

        <div class="formtext1">

            <label for="grades">

                <xsl:call-template name="navarrows" />

                    <span class="boldstyle">Grade</span>

            </label>

        </div>

    </td>

	<td align="left">

	    <div class="formtext1">

	        <select name="Grade" id="grades" disabled="disabled">

	            <xsl:for-each select="//dropdown_details/grades/grade">

	                <option><xsl:attribute name="value">

	                    <xsl:value-of select="."/></xsl:attribute>

	                        <xsl:if test="//personal_details/jobdetails/@grade=.">

	                            <xsl:attribute name="selected">

	                                <xsl:text>true</xsl:text>

	                            </xsl:attribute>

	                        </xsl:if>

	                    <xsl:value-of select="."/>

	                </option></xsl:for-each>

	        </select>

		</div>

	</td>

</tr>

Open in new window

0
Comment
Question by:dpeadmin
  • 3
  • 2
  • 2
7 Comments
 
LVL 4

Accepted Solution

by:
MattKenefick earned 125 total points
ID: 22843033
Try this..

I removed the table ( if that's ok )
<style>

	label,input {

		display: block;

		float: left;

		margin-bottom: 10px;

	}

	

	label {

		text-align: right;

		width: 150px;

		padding-right: 20px;

	}

	

	br {

		clear: both;

	}

</style>
 
 

<div class="formtext1">

 <label for="email"><xsl:call-template name="navarrows" />

    <span class="boldstyle">Email Address</span>

 </label>

</div>

<input type="text" name="Email_Address" style="width:200px" size="30" id="email" disabled="disabled" >

<xsl:attribute name="value"><xsl:value-of select="contact[@type = 'email']/@number"/></xsl:attribute>

</input>
 

  <br />

  

<div class="formtext1">

    <label for="grades">

        <xsl:call-template name="navarrows" />

            <span class="boldstyle">Grade</span>

    </label>

</div>
 

<div class="formtext1">

    <select name="Grade" id="grades" disabled="disabled">

        <xsl:for-each select="//dropdown_details/grades/grade">

            <option><xsl:attribute name="value">

                <xsl:value-of select="."/></xsl:attribute>

                    <xsl:if test="//personal_details/jobdetails/@grade=.">

                        <xsl:attribute name="selected">

                            <xsl:text>true</xsl:text>

                        </xsl:attribute>

                    </xsl:if>

                <xsl:value-of select="."/>

            </option></xsl:for-each>

    </select>

    </div>

Open in new window

0
 

Author Comment

by:dpeadmin
ID: 22843231
Oh yikes..remove the table?? This particular .xsl is over 3000 lines of code.. I'm not really looking to rewrite a lot, just thought if I could tidy it up because it offends my sense of symetry to look at it!

I will try and do soemthing with it in the morning and get back to you on how it worked out..

Thanks :)
0
 
LVL 44

Assisted Solution

by:scrathcyboy
scrathcyboy earned 125 total points
ID: 22846779
No, you don't need to replace the table.  All you have to do is get control of the margins and padding for the individual elements -- so start with this in CSS --

FORM, INPUT, TABLE, TD  { margin-left:0px; padding-left:0px; border:0px; }

that will remove all padding and margins from the form elements like input and the table elements like TD.  Now it is going to look bad, because it is all squashed up against the left side with no buffer.  But you can increase as you want, til it looks right.

If there is any other element where you want to limit the left margin, just add them to the list above, or else do a separate styling on them using the same 0 values, until you get it right.  The point about CSS is that tables and table cells (TDs) can be styled JUST as effectively as can all other page elements.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 4

Expert Comment

by:MattKenefick
ID: 22850411
Tables don't render as quickly.
0
 

Author Comment

by:dpeadmin
ID: 22850593
Its an ancient intranet / document management system I've inherited..trust me, slow tables are the least of my worries!!

I'm going to try and work on this this afternoon and see if the above items help me out.. will update Monday if I can .

Thanks
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22852210
"Tables don't render as quickly."

Not correct, they render a lot faster than complex DIV layouts, which is needed to position them to try to emulate table layout.  Do some testing
0
 

Author Closing Comment

by:dpeadmin
ID: 31511725
Thanks for the help guys. I've used bits from both of you to do what I wanted..in testing in worked and now I'm being pulled into another project so won't be able to finish this one up for a few weeks!
Thanks again
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Ajax control editor 4 59
Fixing my modal from bootstrap 18 39
TCPDF HTML Table of Contents how can I create leading dots 7 35
Apply tab index in forms 6 33
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

943 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now