Solved

How can I increase the spacing between my fields?

Posted on 2013-12-24
5
206 Views
Last Modified: 2013-12-27
This is a problem that shows up most obviously in IE. Safari and Firefox don't display it, but IE is an irritant.

The problem is that my fields have no space between them. I've attempted to adjust the padding and border-spacing of the table and the cell, but to no avail.

What am I missing?

The page in question is http://muscularchristianityonline.com/campus/student_profile.php.

My stylesheet is at http://www.muscularchristianityonline.com/campus/stylesheet.css and the html is what you see in the source code.

What do you think?
0
Comment
Question by:brucegust
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 400 total points
ID: 39738228
Before spending too much on this, I would suggest looking through the html validation errors.  http://validator.w3.org/

Things like missing alt tags are not going to change anything, but missing closing tags will.

But as a quick fix, you may try changing the css for the td from

td {
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
padding: 0;
}

Open in new window

to
td {
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
padding-bottom: 5px;
padding-top: 5px;
}

Open in new window

0
 
LVL 35

Assisted Solution

by:Dan Craciun
Dan Craciun earned 100 total points
ID: 39738233
Remove padding:0 from the td and you'll have spacing in IE.

td {
font-family: Verdana, Microsoft Sans Serif;
font-size: 12px;
color: #000000;
/* padding:0; */
}

HTH,
Dan
0
 

Author Closing Comment

by:brucegust
ID: 39742821
Scott! What am I doing when I'm missing "closing tags." I've seen that before and I took it to mean that I had things documented in an improper sequence. Is that it or is there more to it than that?
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39742985
I am just about to sign off and will have to take  a look. Sometimes it is another issue that causes that error.
0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39743088
Viewing your source, let's start on line 36.

It looks like this
<table class="body">
<tr>
<td class="body">&nbsp;<BR>
	<table class="content">
	<tr>
	<td class="header">
		<table class="login">
		<tr>
		<td style="width:425px; height:23px; vertical-align:center;">
		<form action="student_validate_header.php" method="Post" style="display:inline; padding:0;"><input type="text" size="23" class="login" name="email" value="email">
		<input type="password" size="23" class="login" name="password" value="password">
		<input type="image" src="images/login.png" border="0" name="submit" style="vertical-align:middle;"></form></td>
		<td>
		<IMG SRC="images/spacer.gif" width="325" height="23">
		</td>
		<td background="images/spacer.gif" width="175" height="23" style="vertical-align:top;">
			<table style="padding:0px; border-spacing:0; border-collapse:collapse; background-color:#ffffff;"><form action="search.php" method="Post" style="display:inline; margin:0;">
			<tr>
			<td>
			<input type="text" name="search" size="23" value="" style='border:0px; height:18px'>
			</td>
			<td style="vertical-align:top;">
			<input type="image" src="images/search_icon.png" border="0" name="submit">
			</td>
			</tr>
			</table></form>
		</td>
		</tr>
		</table>

Open in new window


It is kind of hard to spot the error at first, but let's indent your code.   Now see if you can spot the error here.   Forget about "&nbsp;<BR>" for now, that is not so much an error as not needed or compensating for something else.  

Your hint is you need to close everything in the same order it was opened. I do think you have become confused with this table layout.  You would be much better off using your tables to display tabular data and instead use a grid system to manage your content.  Once you find the error here, go back to the validator and keep pasting your code in (or supply url).  I wouldn't be so worried about missing alt tag's html that is out of order or not closing a tag needs to be fixed.  Sometimes, fixing one error has s domino effect and fixes others as well.
<table class="body">
	<tr>
		<td class="body">&nbsp;<BR>
			<table class="content">
				<tr>
					<td class="header">
						<table class="login">
							<tr>
								<td style="width:425px; height:23px; vertical-align:center;">
									<form action="student_validate_header.php" method="Post" style="display:inline; padding:0;">
										<input type="text" size="23" class="login" name="email" value="email">
										<input type="password" size="23" class="login" name="password" value="password">
										<input type="image" src="images/login.png" border="0" name="submit" style="vertical-align:middle;">
									</form>
								</td>
								<td>
									<IMG SRC="images/spacer.gif" width="325" height="23">
								</td>
								<td background="images/spacer.gif" width="175" height="23" style="vertical-align:top;">
									<table style="padding:0px; border-spacing:0; border-collapse:collapse; background-color:#ffffff;">
									<form action="search.php" method="Post" style="display:inline; margin:0;">
										<tr>
											<td>
												<input type="text" name="search" size="23" value="" style='border:0px; height:18px'>
											</td>
											<td style="vertical-align:top;">
												<input type="image" src="images/search_icon.png" border="0" name="submit">
											</td>
										</tr>
									</table>
									</form><!-- Where should this be closed -->
								</td>
							</tr>
						</table>

Open in new window

0

Featured Post

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses

632 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