JS CSS 表单验证

我最近在学做一个表单验证。如图效果。
当输入框获得焦点，我让
document.getElementById("ts").innerHTML="内容";
document.getElementById("ts").className="zhuyi";
当输入错误时，切换CSS，实现这个效果。（不好意思，本人是新手，不太懂网上的这个效果怎么实现。这个办法是自己想的。可能这个办法比较麻烦，呵呵！）
可是在同一行上，效果正常。可我想让他在下一行显示。就出现了如图那样。缺少了上面的线，有时缺下面的线。我把高增大，还不行。以下是CSS样式。麻烦高手帮我看看！万分谢谢..
.zhuyi {
background-image: url(../images/zhuyi.gif);
border: 1px solid #00a8ff;
background-repeat: no-repeat;
background-color: #e2f5ff;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
background-position: 3px 3px;
font-family: "宋体";
font-size: 12px;
line-height: 20px;
}
.error {
background-image: url(../images/errror.gif);
border: 1px solid #FF0000;
background-repeat: no-repeat;
background-color: #fff2e9;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
background-position: 3px 3px;
line-height: 20px;
font-family: "宋体";
font-size: 12px;
}

补充：document.getElementById("ts").innerHTML 
ts 是一个标签的ID。

追问：代码太多。发不了...
你看图： 我想让提示的东西在下一行显示。
你看密码框的提示。如果在同一行，就不会出现“缺线”的情况.
而 帐号的提示，我让他换行显示，就出现了 “缺线”...（上面的线没有显示出来！）