While following a Ruby tutorial to create a Sample App, I encountered an issue with the signup page. The errors displayed during sign up are not formatted correctly - the period at the end of the error line appears before it, and both the asterisk and bullet point are on the wrong side of the line.
Below is the HTML source of the page:
<div class="container">
<h1>Sign up</h1>
<div class="row">
<div class="span6 offset3">
<form accept-charset="UTF-8" action="/users" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="UPwVQbjK5hdjlsXerJfnAESR61pKf3l/K1u2/05+ILY=" /></div>
<div id="error explanation">
<div class="alert alert-error">
The form contains 2 errors.
</div>
<ul>
<li>* Password doesn't match confirmation</li>
<li>* Email is invalid</li>
</ul>
</div>
Displayed content:
CSS used:
#error_explanation {
color: #f00;
ul {
list-style: none;
margin: 0 0 18px 0;
}
}
In addition to the formatting issue, I also experienced a problem with the input field where the cursor was positioned on the right side of the box (similar to Arabic text). To solve this, I added direction: ltr; in my input textarea CSS:
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
padding: 10px;
height: auto;
margin-bottom: 15px;
direction: ltr;
@include box_sizing;
}
I attempted adding the direction styling in my CSS but that did not resolve the issue. I am currently unsure how to proceed. Any guidance on what might be causing this problem would be greatly appreciated.