?
Solved

help with basic html/css layout issue

Posted on 2013-06-26
5
Medium Priority
?
222 Views
Last Modified: 2013-07-23
Hello again

Please can you look at this form

http://www.docexdemo.com/retrofit/book-mot.php

If you don't fill in the form and click book mot at the bottom you will see error messages for the form. I have 3 basic  questions

1) why are the error messages showing up underneath the textboxes? They are supposed to be in a span tag which is directly after the textbox

e.g.

<tr><td class="td_pad5 w30 r s t">Registration</td><td class="td_pad5 l"><input type="text" id="vehicle_reg" name="vehicle_reg" class="details_input"/><span id="invalid_vehicle_reg" /></td></tr>

Open in new window


The error message goes in invalid_vehicle_reg

2) Why is the error message 'registration required' wrapping and not taking up the whole table cell width?

3) Why is the message 'you can login with this password...' about 20px below the password textbox. It is supposed to be directly below it as so

'<tr><td class="r td_pad5 s w30 t">Password</td><td class="l td_pad5"><input type="text" id="password" name="password" class="details_input"/><span id="invalid_password"/></td></tr><tr><td colspan="2">', $password_message, '</td></tr>';

Open in new window


The variable $password_message contains that text.

Thanks for your help
0
Comment
Question by:andieje
[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
5 Comments
 
LVL 15

Expert Comment

by:Ess Kay
ID: 39278641
1, if there is not enough room in the box, the errors will go to next line

2. the answer is in the css of the page, open chrome and do CTRL+i and go line by line to find out

3. the spacing in the css can be played with using method mentioned in answer #2
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39279080
The main problem is that you are using colspan="2" when there are actually 3 columns making up the full width of the row with the calendar in it. You have a 10px wide column between the calendar and time columns.

So, using colspan="3", your bottom table would look like this:

<table width="100%" align="center">
<tbody>
<tr>
<td colspan="3" class="tdh">Your Contact details</td>
</tr>
<tr>
<td class="r td_pad5 s w30 t">Name</td>
<td class="l td_pad5">
      <input type="text" class="details_input" name="name" id="name">
</td>
<td>
    <span id="invalid_name"></span>
</td>
</tr>
<tr>
<td class="r td_pad5 s w30 t">Phone</td>
<td class="l td_pad5">
      <input type="text" class="details_input" name="phone" id="phone">
</td>
<td>
    <span id="invalid_phone"></span>
</td>
</tr>
<tr>
<td class="r td_pad5 s w30 t">Email</td>
<td class="l td_pad5">
      <input type="text" class="details_input" name="customer_email" id="customer_email">
</td>
<td>
    <span id="invalid_customer_email"></span>
</td>
</tr>
<tr>
<td class="r td_pad5 s w30 t">Password</td>
<td class="l td_pad5">
      <input type="text" class="details_input" name="password" id="password">
</td>
<td>
    <span id="invalid_password"></span>
</td>
</tr>
<tr>
<td colspan="3"><br>You can login with this password to see your bookings</td>
</tr>
<tr>
<td colspan="3" class="tdh">Your vehicle</td>
</tr>
<tr>
<td class="td_pad5 w30 r s t">Registration</td>
<td class="td_pad5 l">
      <input type="text" class="details_input" name="vehicle_reg" id="vehicle_reg">
</td>
<td>
    <span id="invalid_vehicle_reg"></span></td>
</tr>
<tr>
<td class="td_pad5 w30 r s">Make</td>
<td class="td_pad5 l">
      <input type="text" class="details_input" name="make" id="make">
</td>
<td>
</td>
</tr>
<tr>
<td class="td_pad5 w30 r s">Model</td>
<td class="td_pad5 l">
      <input type="text" class="details_input" name="model" id="model">
</td>
<td>
</td>
</tr>
</tbody>
</table>

That will put the error messages to the right of the text boxes.
0
 
LVL 6

Accepted Solution

by:
lightspeedvt earned 2000 total points
ID: 39279621
To solve #1 and #2 add this CSS code to you 'css/style.css' file:
#invalid_name,
#invalid_phone,
#invalid_customer_email,
#invalid_password,
#invalid_vehicle_reg{
	position:absolute;
	margin-left:10px;
}

Open in new window


As for #3 - just do not do colspan="2". Instead of this add another <td>&nbsp;</td> before .
So you will have it:
<tr>
	<td>&nbsp;</td>
	<td>
	<br>
	You can login with this password to see your bookings
	</td>
</tr>

Open in new window

0
 

Author Comment

by:andieje
ID: 39282394
Hi, i tried those solutions but they did not work.

The table containing the form is a nested table so I don't see how the number of columns in the outer table matters

The registration required message does not wrap in IE but it does in opera and others so it isn't that there isn;t enough space for the message.

Using position absolute for the error messages placed them above the text boxes on the the row below and not on the same row.
0
 
LVL 6

Expert Comment

by:lightspeedvt
ID: 39282422
Can you add the position absolute to you styles and let us know to see what we are getting with it?
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

765 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