Question

I have a registration form if username does not exist in database then it shows an image beside my text box(thick mark image) and along with that i want to show my text that

“this user name already exist”

$("#usr_verify").css({ "background-image": "url('<?php echo base_url();?>images/no.png')" });
$("#usr_verify2").text("it does not exist ::");

these two selectors are sending my text and my image in two different spans one with id usr_verify and other with the id usr_verify2

now both the span tags are in one paragraph tag. Now my error is that the text is overlapping the image, text appears onto that image. Any idea where i have gone wrong ?

Answer 1

It’s difficult to tell exactly what’s going on without looking at your markup, and perhaps a JsFiddle, but here’s a stab at it:

Spans are inline elements, and as such, can’t be given an explicit height and width. Background images are not image blocks, that assume the space required to show the entire image, but really just fill whatever area is granted them.

Try using an img instead of a span, or try to give the span display: inline-block so that you can set its width and height to whatever the image requires.

Edit:

A JsFiddle showing what I mean…