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
-
Text hidden in tabs on desktop
Hello, Is it still devaluated by google ? It seems that on mobile it isn't anymore but what about desktops ? Thank you,
Web Design | | seoanalytics0 -
Login to see more (some text hidden by CSS height and jquery) will it ruin SEO?
Hey SEO masters! I have a website that is smashing it for SEO in Australia. In an effort to increase a user base I want to make it so only logged in users can see all the content. So today, I launched a new feature hiding content using CSS 'height:' property. The content is obviously still there and if you were a developer you could easily 'inspect element' and remove that CSS style to see everything... There are a few other tweaks i made for logged out users, but that only affects some json. Question: will this affect my SEO rankings? Here is a direct example: https://www.fishingspots.com.au/s/perth if you sign up, there is about 1400words of content.
Web Design | | thinkLukeSEO0 -
Location of body text on page - at top or bottom - does it matter for SEO?
Hi - I'm just looking at the text on a redesigned homepage. They have moved all the text to the very bottom of the page (which is quite common with lots of designers, I notice - I usually battle to move the important text back up to the top). I have always ensured the important text comes at the top, to some extent - does it matter where on the page the text comes, for SEO? Are there any studies you can point me to? Thanks for your help, Luke
Web Design | | McTaggart2 -
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 -
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 -
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 -
Title Element length too long?
My site automatically builds a title element basic by taking the forum thread title and adding the board description to it. Let's use a fictional site as "Gaggle - Chevy Corvette Lovers forums" in this example. A user makes a post titled "Transmission Problems" then the automatically created title would be: Transmission Problems | Gaggle - Chevy Corvette Lovers forums The process seems to be helpful. Overall thread ranking is good. The added words provide value to users searching for information as "Transmission Problems" is too vague, whereas by adding Chevy Corvette the search can be optimized better. The only issue is a small percent of my pages are being flagged by reporting tools with "Title Element Too Long" So I wish to ask, is there any real harm in this case? Google will simply truncate the title, right?
Web Design | | RyanKent0 -
How does the toolbar caclulate text to code ratio?
I am seeing some very weird text to code ratios on a competitor site (over 100%) through the Analyze feature on the SEOmoz toolbar. I'm wondering how that's calculated, and what my competitors might be doing to raise that ratio so high artificially. I need to turn in a report on this soon, any help is greatly appreciated!! EHR
Web Design | | EHR0