DIV and CSS issue

Question

i have one div and div has one img tag but image is not showing in div

here is my code

<div id="infscr-loading" >
<img src="http://jquerystyle.com/-/img/ajaxLoader.gif" alt="Loading...">
<div>
<em>Loading the next set of posts...</em>
</div>
</div>

<style type="text/css">
#infscr-loading {
background: -moz-linear-gradient(center top , #747D84 0%, #434F56 100%) repeat scroll 0 0 transparent;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
bottom: 0;
font-size: 0.8em;
font-style: normal;
font-weight: normal;
height: 50px;
left: 50%;
margin-left: -45px;
padding-top: 20px;
position: fixed;
text-align: center;
text-indent: -999em;
width: 90px;
background-repeat:no-repeat;
background-position: center center;
}
</style>

here is my div and style sheet. why image is not showing inside the div. can anyone point out.....thanks

paulcol. · Accepted Answer · 2011-12-20 12:45:47Z

5

Try removing text-indent: -999em; from your css

Negative text indent hides all your text/images and other inline content -999em from view.

answered Dec 20, 2011 at 12:45

paulcol.

3,0081 gold badge23 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tom van der Woerdt · Accepted Answer · 2011-12-20 12:46:51Z

4

Your text-indent: -999em; is moving all text, including images, off the screen.

answered Dec 20, 2011 at 12:46

Tom van der Woerdt

30.1k7 gold badges76 silver badges105 bronze badges

Comments

AndroidHustle · Accepted Answer · 2011-12-20 12:47:08Z

3

margin-left: -45px; and text-indent: -999em; could definitely cause that problem

answered Dec 20, 2011 at 12:47

AndroidHustle

1,8146 gold badges25 silver badges47 bronze badges

1 Comment

Tom van der Woerdt Over a year ago

margin-left: -45px; combined with left: 50%; puts an element that has width: 90px; on the center of the screen.

Nix · Accepted Answer · 2011-12-20 12:52:57Z

1

Depending on your doctype, try closing your image tag properly.

<img src="http://jquerystyle.com/-/img/ajaxLoader.gif" alt="Loading..." />

Also, while this probably don't have anything to do with your problem, you could clean up your style significantly. You don't need the background position and repeat, those can be merged directly into your shorthand property. The two border-radius properties can also be merged into one shorthand.

edited Dec 20, 2011 at 12:52

answered Dec 20, 2011 at 12:46

Nix

6,0684 gold badges34 silver badges53 bronze badges

1 Comment

Tom van der Woerdt Over a year ago

I wonder why this got upvoted. This is in no way a solution for the problem.

hungneox · Accepted Answer · 2011-12-20 12:45:46Z

-2

Check your url http://jquerystyle.com/-/img/ajaxLoader.gif
should have slash before close <img src="http://jquerystyle.com/-/img/ajaxLoader.gif" alt="Loading..."/>

UPDATED:

I found that because text-indent: -999em;. If you remove it, the image will appear.

answered Dec 20, 2011 at 12:45

hungneox

9,86113 gold badges51 silver badges67 bronze badges

4 Comments

Madara's Ghost Over a year ago

You could have checked yourself and see that it works. And no, no slash is required in an IMG tag, no doctype was specified, so per specs HTML5 is assumed, in HTML 5 the closing slash is not required. So, wrong on both cases mate, -1.

hungneox Over a year ago

@Truth Oh sorry, I want to give some comment while checking his html

hungneox Over a year ago

@Truth everybody on stack-overflow are so fast :))

Madara's Ghost Over a year ago

:) In which case, you should have made a comment, and not an answer ;). Better luck next time :)

Collectives™ on Stack Overflow

DIV and CSS issue

5 Answers 5

Comments

Comments

1 Comment

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related