I want to get the image on the same line as "Your browser passed the" almost right next to that line.
Please see the attached image.
This is what I have for code:
<span style="background:url(images/TEST_IMAGES/accept.png) no-repeat left center; padding:10px; margin-bottom:10px;">Your browser passed the<br />requirements to use our service!</span>
a span is an inline element. You can't apply margins, padding, width or height to inline elements. Only block and inline-block elements can have such rules applied. If you change this to a block level element like a <p> or <div> you can use those.
If you want the check to appear at the right side, change "left center" to "right top" or use pixel offsets.
Have you tried expanding your background options on the css? Like this:
And you can actually put in numberical values for background-position. It can be found here: http://www.w3schools.com/css/pr_background-position.asp
<span style="background-image:url(images/TEST_IMAGES/accept.png); background-repeat:no-repeat; background-position: left center; padding:10px; margin-bottom:10px;">Your browser passed the<br />requirements to use our service!</span>
As far as I understand, right now you have that image in the vertical middle, but you want it to be in the top-left corner.
Try 0 0 instead of left center in your background rule.
Also, you might find it useful to add a rule to display your span as a block element by display:block
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)