Text-align: -900% in an absolute element?
-
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?
-
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.
-
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.
-
-
*** 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.
-
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.
-
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.
-
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
-
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;
}
-
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.
-
why are you using absolute position on the image? if you want to move it around the div, use padding.
-
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.
-
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
-
I've seen text-indent: -9999px in css all over the web. Perhaps this is the code you are looking for?
Got a burning SEO question?
Subscribe to Moz Pro to gain full access to Q&A, answer questions, and ask your own.
Browse Questions
Explore more categories
-
Moz Tools
Chat with the community about the Moz tools.
-
SEO Tactics
Discuss the SEO process with fellow marketers
-
Community
Discuss industry events, jobs, and news!
-
Digital Marketing
Chat about tactics outside of SEO
-
Research & Trends
Dive into research and trends in the search industry.
-
Support
Connect on product support and feature requests.
Related Questions
-
Do things like using labels on an element that is not a form input affect how google sees us in regards to accessibility?
Do things like using labels on an element that is not a form input affect how google sees us? It's an accessibility error that our devs have made - using a label element because it looks good, not because it's an actual label on a form field. Just wondering how that affects accessibility in Google's eyes.
Web Design | | GregLB0 -
How do elements that are displayed when scrolled impact SEO?
Hi, We are wanting to implement Animate.css and Wowjs on our site and were concerned about the SEO impacts. Basically when the page is loaded, if the element is not within the viewport then the HTML tag (i.e. div tag) have a style="visibility: hidden" and once the element is within the viewport it will change to have style="visibility: visible". Would having the style="visibility: hidden" negatively impact SEO?
Web Design | | KendallHershey0 -
Multiple sites using same text - how to avoid Google duplicate content penalty?
Hi Mozers, my client located in Colorado is opening a similar (but not identical) clinic in California. Will Google penalize the new California site if we use text from our website that features his Colorado office? He runs the clinic in CO and will be a partner of the clinic in CA, so the CA clinic has his "permission" to use his original text. Eventually he hopes to go national, with multiple sites utilizing essentially the same text. Will Google penalize the new CA site for plagiarism and/or duplicate content? Or is there a way to tell Google, "hey Google, this new clinic is not ripping off my text"?
Web Design | | CalamityJane770 -
Will numbers & data be considered as user generated content by Google OR naturally written text sentences only refer to user generated content.
Hi, Will numbers & data be considered as user generated content by Google OR naturally written text sentences only refer to user generated content. Regards
Web Design | | vivekrathore0 -
Requirements for mobile menu design have created a duplicated menu in the text/cache view.
Hi, Upon checking the text cache view of our home page, I noticed the main menu has been duplicated. Please see: http://webcache.googleusercontent.com/search?q=cache:http://www.trinitypower.com&strip=1 Our coder tells me he created one version for the desktop and one for the mobile version. Duplicating the menu cannot be good for on page SEO. With that said, I have had no warnings reported back from Moz. Maybe the moz bots are not tuned to looks for such a duplication error. Anyway, the reason the coder created a different menu for mobile in order to support the design requirements. I did not like the look and feel of the responsive version created based on the desktop version. Hi solution to this problem is to convert the Mobile version menu into ajax. what do you guys think? Thanks, Jarrett
Web Design | | TrinityPower0 -
Can white text over images hurt your SEO?
Hi everyone, I run a travel website that has about 30 pre-search city landing pages. In a redesign last year we added large "hero" images to the top of the page, and put our h1 headlines on top of them in white. The result is attractive, but I'm wondering if Google could be reading this page as "white text on white page", which is an obvious no-no, especially if it could seem that we're trying to hide text. Here's an example: http://www.eurocheapo.com/paris/ H1: Expert reviews of cheap hotels in Paris I should add that our SERPs for these city pages has dropped (for "Cheap hotels in X"), but it could obviously be related to other issues. Any advice would be appreciated. Many thanks! Tom
Web Design | | TomNYC0 -
Replaceing text prices with graphics
Hello all: You probably noticed Google showing product prices in SERP snippets and this did not do us well because there was a noticable drop off in click throughs to the site with the price displaying in snippet. So we're replacing them with graphic prices instead. Does anyone see a problem with that in as far as how Google ranks our pages? Thanks!
Web Design | | holdtheonion0 -
Can google crawl text in jquery sliders?
We are redesigning our website and want to present a fair amount of text within jquery sliders. Will google crawl this text or is it treated the same way as actual script? Perhaps there is a way to just have the text as plain html but use jquery to display it?
Web Design | | Netboost0