[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

CSS Background image issue

Posted on 2011-03-18
24
Medium Priority
?
305 Views
Last Modified: 2012-05-11
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
Comment
Question by:Computer Guy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
  • 2
  • +4
24 Comments
 
LVL 5

Expert Comment

by:rucky544
ID: 35164725
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
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 35164730
add float:right to that image
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 35164733
sorry, didn't check that image is a background image
0
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 
LVL 2

Expert Comment

by:enkor
ID: 35164736
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
 
LVL 5

Expert Comment

by:rucky544
ID: 35164746
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
 
LVL 3

Author Comment

by:Computer Guy
ID: 35164786
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
 
LVL 5

Expert Comment

by:rucky544
ID: 35164796
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
 
LVL 2

Expert Comment

by:enkor
ID: 35164817
display:block; is missing
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35164830
Added display:block, same result
0
 
LVL 5

Expert Comment

by:rucky544
ID: 35164852
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
 
LVL 3

Author Comment

by:Computer Guy
ID: 35164877
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
 
LVL 5

Expert Comment

by:rucky544
ID: 35164917
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
 
LVL 3

Author Comment

by:Computer Guy
ID: 35165048
I need to keep document.getElementById('msgCookieSuccess').style.display = 'inline';

in inline format
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35165050
Due to a spacing issue, I can't have a <br> which block includes.
0
 
LVL 5

Expert Comment

by:rucky544
ID: 35165086
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
 
LVL 3

Author Comment

by:Computer Guy
ID: 35178706
still no luck. Can someone please test then post?
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 35184055
Here is the accept.png file.
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 35188362
Why don't you just make this whole thing an image so you can put the check image right where you want it?
0
 
LVL 17

Expert Comment

by:Shinesh Premrajan
ID: 35188442
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
 
LVL 44

Accepted Solution

by:
Chris Stanyon earned 1000 total points
ID: 35188555
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
 
LVL 5

Expert Comment

by:rucky544
ID: 35188587
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
 
LVL 5

Expert Comment

by:rucky544
ID: 35189085
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

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question