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 does ARIA-hidden text appear to search engines
I'm having trouble getting my accessibility team to add alt text to our site's images for SEO benefits as they feel some of it would add additional noise for screen readers. They proposed using ARIA-hidden attributes to hide the text but I'm wondering if will that be interpreted as a cloaking tactic to search engines? Also, I'm wondering if it the alt text will carry the same weight if ARIA-hidden is used. Has anyone had any experience with this? I'm having trouble finding any research on the topic.
Web Design | | KJ6001 -
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 -
Relative or Absolute???
https://moz.com/learn/seo/internal-link
Web Design | | Mike.Bean
https://moz.com/blog/relative-vs-absolute-urls-whiteboard-friday I have read both articles above, however further reading the comments that followed, it appears that neither provided an answer. Some said Absolute and some were determined that Relative linking is the only way to go. There were heated comments, apologetic comments and mostly comments agreeing to disagree. But in the end I think what I got out of it was there are two sides to developing a site. Side A: Web Developer Standpoint, Relative (easier) Side B: SEO Standpoint, Absolute (harder) To me Side B puts money in the bank, so I will go with B. Now since we’ve been dealt the recent https algo, there seem to more opinions that are thrown into the question. All I’m asking for is a straight answer so our employees can feel confident that our efforts are not in loss. I also want to ask about how images should be linked internally. NOTE: Our sites are not all https but have SSL’s in place, and 301 redirects reflect http versions of pages. So since it appears Absolute linking is the preferred method, I ask which is the best option or an option at all. Internal Navigation: Current internal link - /store/pc/Rollators-c379.htm Absolute Options http://www.company.com/store/pc/Rollators-c379.htm (what I see for most Absolute links)
www.company.com/store/pc/Rollators-c379.htm (would this work for both http and https?)
//www.company.com/store/pc/Rollators-c379.htm (would this work for both http and https?) All three links above resolve to www.company.com/store/pc/Rollators-c379.htm with no http:// in front. If I type https://www.company.com/store/pc/Rollators-c379.htm in the url it resolves to https://www.company.com/store/pc/Rollators-c379.htm with the https:// in front. Internal Images: If I want my images to be indexed as well as pages should I be using Absolute links for them as well? Current internal image link - /store/pc/images/rollators.jpg Absolute Options http://www.company.com/store/pc/images/rollators.jpg (what I see for most Absolute links)
www.company.com/store/pc/images/rollators.jpg (would this work for both http and https?)
//www.company.com/store/pc/images/rollators.jpg (would this work for both http and https?) Just once I would like an answer that’s not:
It depends on the site or it doesn’t matter which method you use, they both work lol. I would like one that says google likes this better. Thanks for taking the time to help us understand and can’t wait for MOZ Con this September.0 -
Body of text on category pages
Hello everyone, wonder if I can pick your brains about our company's website. We are a tea company - Canton Tea Co. We have been advised that it is really important to get more text onto the category pages on our website, as otherwise the page just consists of a list of products, and therefore provides Google with a ton of headers, tiny descriptions, and not enough text to allow the page to being easily indexed, therefore hurting our Google ranking for key search terms like 'Green Tea' which should lead to the Green Tea category page. So we decided to add some text to the category page. The only place for this text to go was laid over the category header image. However, it looks pretty awful and unsophisticated having this text on top of the image - please see an example, our Green Tea category page, via this link: http://www.cantonteaco.com/loose-leaf-tea-1/type/green-tea.html So I have three questions: How significant is the text on a category page such as this to that page's Google ranking? If we moved the text to an area that was hidden until clicked on, for example the 'Filter by' section that opens up when you click on it (see via URL above), would that negate the SEO benefit? Do you have any other ideas or opinions on how to resolve this? Thank you! Louise, Canton Tea Co.
Web Design | | Cantonteaco0 -
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 -
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 -
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