Line breaks with javascript and HTML

I have a problem with Javascript and HTML. I'm using a form that the user submits. If the credentials are wrong, the script shows a text message next to the input field.

The message contains an email which I want it to be clickable.

The things is that:

When the message is only a string, everything is OK.

When I add the <a href=\"mailto tag, the line breaks.

<div id="message_box">
<span id="msgbox" style="display:none"></span>
</div>

OK:

$("#msgbox").fadeTo(200,0.1,function()
        {
            var msg = ("Ooops, the number you enterd is not valid<br /> Please contact: some@mail.com to solve this problem").replace(/[\r\n]/g, '');
          $(this).html(msg).addClass('messageboxerror').fadeTo(900,1);
        }); 

(EDIT)Shows:

Ooops, the number you enterd is not valid

Please contact: some@mail.com to solve this problem

NOT OK:

$("#msgbox").fadeTo(200,0.1,function()
        {
            var msg = ("Ooops, the number you enterd is not valid<br /> Please contact: <a href=\"mailto:some@mail.com\">some@mail开发者_JS百科.com</a> to solve this problem").replace(/[\r\n]/g, '');
          $(this).html(msg).addClass('messageboxerror').fadeTo(900,1);
        }); 

(EDIT)Shows:

Ooops, the number you enterd is not valid

Please contact:

some@mail.com

to solve this problem

The CSS:

#message_box {
    width:370px;
    height:30px;
    padding-top:15px;
}



   .messagebox{
 position:relative;
 width:100px;
 margin-left:0px;
 padding:290px;
 font-size:14px;
 color: #647a03;
}
.messageboxok{
 position:relative;
 padding:0px;
 width:100px;
 color:#F00;
 font-size:10px;

}
.messageboxerror{
 position:relative;
 width:100px;
 padding:0px;
 color:#CC0000;
 font-size:12px;
}

Can anyone help me remove these annoying linebreaks??

Thanks!

---

From comments:

Given the complete CSS code requested by several commenters, the a tag is set to display: block. It needs to be set to inline for this anchor tag.

W3C Resources:

• Controlling box generation
• The 'display' property

---

The easy answer would be to use CSS white-space:nowrap; on the messageboxerror class.

.messageboxerror {
    white-space:nowrap;
}

You could play around with display:inline-block; as well, and other tricks, but to me the nowrap fix should do the trick.

In this context, it's more of a workaround than a fix, so it may not fix the underlying layout problem that's causing it, but if it solves the problem there's no need to dig too much further.