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
-
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 -
Links not visible in "Google cache text version" but visible in "Fetch as Google" in Webmaster tool
Hi Guys, There seems some issue with the coding due to which Google is not indexing half of our menu bar links. The cached text version of http://www.99acres.com/ is not showing links present in dropdown "All India" , dropdown "Advice" and "Hot Projects" tab in blue bar on top menu whereas these links are visible in "Fetch as Google" in Google Webmaster tool. Any clue to why is there a difference between the links shown in Google webmaster and Google cache text version. Thanks in advance 🙂
Web Design | | vivekrathore0 -
Is it cloaking/hiding text if textual content is no longer accessible for mobile visitors on responsive webpages?
My company is implementing a responsive design for our website to better serve our mobile customers. However, when I reviewed the wireframes of the work our development company is doing, it became clear to me that, for many of our pages, large parts of the textual content on the page, and most of our sidebar links, would no longer be accessible to a visitor using a mobile device. The content will still be indexable, but hidden from users using media queries. There would be no access point for a user to view much of the content on the page that's making it rank. This is not my understanding of best practices around responsive design. My interpretation of Google's guidelines on responsive design is that all of the content is served to both users and search engines, but displayed in a more accessible way to a user depending on their mobile device. For example, Wikipedia pages have introductory content, but hide most of the detailed info in tabs. All of the information is still there and accessible to a user...but you don't have to scroll through as much to get to what you want. To me, what our development company is proposing fits the definition of cloaking and/or hiding text and links - we'd be making available different content to search engines than users, and it seems to me that there's considerable risk to their interpretation of responsive design. I'm wondering what other people in the Moz community think about this - and whether anyone out there has any experience to share about inaccessable content on responsive webpages, and the SEO impact of this. Thank you!
Web Design | | mmewdell0 -
Legitimate hidden text and H1s are "OK?" Show me the data!
I'm trying to promote the SEO perspective during a site redesign so I'm researching the impact of design requests: Embedding text in graphic headers and applying to the graphics to get the SEO value Reducing view-able text on a page for design reasons and by using JavaScript to hide text in accordions or tabs. SEOmoz uses these techniques on their ranking report and most of what I read in teh forums says it is OK to hide text if your motives are pure and the text displays in a text-only browser. But I do SEO, not SEOK. I want to optimize, not just avoid penalties. And I try to make decisions based on data, not just anecdotes. Are there any studies out there on the effects these hidden-text topics? How much difference DOES it make to have the text exposed? Since there is potential for spam with these techniques, why would Google give the same rank to pages with and without hidden text? When I'm balancing UX and SEO, I want to clearly define the trade-off. What have you done when faced with this dilemma?
Web Design | | integra-telecom0 -
Live Text in Navigation Vs. Image - Does this affect SEO
I recently was asked the question if having live text in the navigation vs and image affect seo. For example, refer to this link http://markup.io/v/avsaenq856kw the navigation highlighted is seperate images. The html elements read : ![](</span><strong style=)/images/procedures.png"> Live text html reads like this: Breast » What is better for seo value, or does it now matter having live text or an image?
Web Design | | Red_Spot_Interactive0 -
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