Question

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: [e-mail] 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: [e-mail] 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:[e-mail]\">[e-mail]</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:
[e-mail]
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!

Answer 1

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