Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 308
  • Last Modified:

CSS Background image issue

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.
<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>

Open in new window

CSS-Demo.png
0
Computer Guy
Asked:
Computer Guy
  • 8
  • 7
  • 2
  • +4
1 Solution
 
rucky544Commented:
You need to set the background position to top left

Change: background:url(images/TEST_IMAGES/accept.png) no-repeat left center

To: background:url(images/TEST_IMAGES/accept.png) no-repeat left top
0
 
Gurvinder Pal SinghCommented:
add float:right to that image
0
 
Gurvinder Pal SinghCommented:
sorry, didn't check that image is a background image
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
enkorCommented:
or set exact space by changing:

background:url(images/TEST_IMAGES/accept.png) no-repeat left center

to:

background:url(images/TEST_IMAGES/accept.png) no-repeat left 5px
0
 
rucky544Commented:
If you want to move it in closer to the text then you can use a px value,

e.g. background:url(images/TEST_IMAGES/accept.png) no-repeat 15px 5px
0
 
Computer GuyAuthor Commented:
Hi,

This is where I want it to be, but the top is being cut off.
<span id="msgCookieSuccess" class="msgSuccess" style="background:url(images/TEST_IMAGES/accept.png) no-repeat no-repeat 5px 10px; padding:10px; margin-right:3px;">Your browser passed the<br />requirements to use our service!</span>

Open in new window

CSS-Demo-2.png
0
 
rucky544Commented:
Try using a div instead of a span, the span is an inline tag, you should be using a block element,

Or change the span to a block element with display:block;
0
 
enkorCommented:
display:block; is missing
0
 
Computer GuyAuthor Commented:
Added display:block, same result
0
 
rucky544Commented:
What other CSS is controlling #msgCookieSuccess and .msgSuccess

This may be causing the problem.

Have you got the code online to have a look at?
0
 
Computer GuyAuthor Commented:
Here is everything.
<style type="text/css">
    .msgSuccess
    {
        color: green;
	    font-weight:bold;
        display: none;
    }
    .msgError
    {
        color: red;
		font-weight:bold;
        display: none;
    }
</style>

<script type="text/javascript">
<!--
    function check() {
        document.getElementById('msgJavaScriptError').style.display = 'none';
        document.getElementById('msgJavaScriptSuccess').style.display = 'none';


        if (navigator.cookieEnabled) {
            document.getElementById('msgCookieSuccess').style.display = 'inline';
            document.getElementById('login_button').disabled = false; // Enable login button
        }
        else {
            // Cookie are not enabled
            document.getElementById('msgCookieError').style.display = 'inline';
        }
    }
	window.onload = function () { document.forms.login.amember_login.focus(); } 

//window.onload = function () { check(); document.forms.login.amember_login.focus(); }
-->
</script>

Open in new window

0
 
rucky544Commented:
change where it says: document.getElementById('msgCookieSuccess').style.display = 'inline';

to: document.getElementById('msgCookieSuccess').style.display = 'block';

in 2 places

It is forcing it to be an inline element.
0
 
Computer GuyAuthor Commented:
I need to keep document.getElementById('msgCookieSuccess').style.display = 'inline';

in inline format
0
 
Computer GuyAuthor Commented:
Due to a spacing issue, I can't have a <br> which block includes.
0
 
rucky544Commented:
It looks like it should be a block element on the page!

Making a block element does not make a <br>.

Can you explain what you want a little better.

To get the background to position in the "block" you will need it to be a block element
0
 
Computer GuyAuthor Commented:
still no luck. Can someone please test then post?
0
 
Computer GuyAuthor Commented:
Here is the accept.png file.
0
 
nanharbisonCommented:
Why don't you just make this whole thing an image so you can put the check image right where you want it?
0
 
Shinesh PremrajanEngineering ManagerCommented:
1) Instead of span use Div.
2) padding left should be the width of the icon + 2 px
3) padding bottom should be height of the icon.

Hope this helps
0
 
Chris StanyonCommented:
As others have said, set it to a DIV, instead of a SPAN. It will then be a block level element and work the way you want it to. You'll probably need to set it to display Block in your Javascript. If the BR is an issue, remove it and set a width on the block - let the line break occur naturally.




#msgCookieSuccess {
	background:url('accept.png') no-repeat;
	padding-left:35px;
	width:200px;
}


<div id="msgCookieSuccess" class="msgSuccess">Your browser passed the requirements to use our service!</div>

Open in new window

0
 
rucky544Commented:
It won't actually matter if it is a div or span if you are setting it as a block element.

If space is a problem then maybe try absolutely possitioning it? It will need to be a block element for it to look how you have requested it though!
0
 
rucky544Commented:
I gave you all those answers, but you wouldn't accept that it needed to be a block element!

You obviously don't believe I was any help to you in getting this question answered!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 8
  • 7
  • 2
  • +4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now