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

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

dpeadminAsked:
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.

MattKenefickCommented:
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

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
dpeadminAuthor Commented:
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
scrathcyboyCommented:
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
Ultimate Tool Kit for Technology Solution Provider

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 now.

MattKenefickCommented:
Tables don't render as quickly.
0
dpeadminAuthor Commented:
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
scrathcyboyCommented:
"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
dpeadminAuthor Commented:
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
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.