Text-align: -900% in an absolute element?

[ldestrooper]

I'm having a hard time doing image replacement in an absolute element. I know there is a replacement technique which is ideal for this but the text is larger then the window so when the image is shown over the text, a part would still be visible.

Could anyone help me any further?

[DanDeceuster]

I've seen text-indent: -9999px in css all over the web. Perhaps this is the code you are looking for?

[Getz.pro]

I don't think you have this correct. What this does is to set text to a negative which sends it off the page, however, the div contains an image. So the image shows, but the text does not (to the user).

This is often done with first letters of a paragraph to change to a unique font.

but let us start with what are you trying to do

[ldestrooper]

Well yes, i use text text-align in a negative way so the text goes of the page, then i use a background-image to replace it. But it seems like text-indent is incompatible with an absolute position, so i'm looking for a better way to do the image replacement or a workaround for IE.

[Getz.pro]

why are you using absolute position on the image? if you want to move it around the div, use padding.

[ldestrooper]

I'm not trying to. Using text-indent on the text and then using an image-background on the div is a common way of image replacement.

[Getz.pro]

Yes, I understand that

But why then are you using absolute positioning?

Oh, and you are doing a text-indent at -9999px correct?

.swap-image {

text-indent: -9999px;

background:url(path-to-image) top left no-repeat;

min-height: 40px;

}

[ldestrooper]

That looks pretty much like i did it. It always works, just not for the absolute element. It is because it is a share box for facebook, twitter, etc. I've seen many options to make it go with the browser but obviously positioning it absolute is the best way.

It seems so hard to find a solution for this

[Getz.pro]

Let's start over. Why do you want an absolute position on this element? It should be positioned at the point where the text starts.

[ldestrooper]

I'll give you the example, this is my test website:

http://www.computerworkstationdeskguide.com

I run my theme there to make sure i get everything right before publishing to my main one. If you go to a single post, you'll notice the sidebar on the left. That's where the problem lies. It shows nice verywhere, but in IE (and maybe not just in IE, i don't know) it still shows the text.

[Getz.pro]

*** Again, sorry about the late response. I am moving, so please don't expect anything back until Thursday night ***

Please provide the CSS snippet for this. I see you are running a WP and have a few CSS files. I do not have time to search all of them to find the corresponding code.

I will look at this and get back to you.

[ldestrooper]

No problem at all, thanks for the help! This is the exact same as i use:

• Text 1

• Text 2

#box {

width: 70px;

position: fixed;

}

#socialshare {

position: absolute;

}

#socialshare a {

display: block;

width: 50px;

height: 65px;

text-indent: -900%;

background: url('image.png') no-repeat;

}

[Getz.pro]

You are not going to like this, but your code work in Safari and Firefox.

try using -900px instead of -900**%**

I also removed the position: fixed and position: absolute. What are you doing with these? I do not see where they are needed.

[ldestrooper]

I use fixed and absolute so the box won't move when i scroll my browser.

I also tested in Safari and Firefox and works just fine, it's IE which is bugging me.