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
-
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 -
Relative or Absolute???
https://mza.seotoolninja.com/learn/seo/internal-link
Web Design | | Mike.Bean
https://mza.seotoolninja.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 -
Hidden Text w/ Java Script _ Is it Bad?
Just came across an article that stated that Google is looking negatively at sites that attempt to hide text or use javascripts to expand text on websites. We are about to launch our new website and believe we are using this technique but im not certain if what we are doing will hurt us. Our website tends to be a little heavy on the text so used a "read more" scrpit that will expand when clicked on. Three sections that use this on the new website Take a look and let me know your thoughts http://joomplateshop.com/demos/catdi.com/
Web Design | | ChopperCharlie0 -
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 -
White Text / Black Background & SEO Impact
Does anyone know of any testing / studies with evidence that Google prefers dark text on a light background vs. light text on a dark background? I have a website that currently has light text on a black background, and really like the way it looks, but am concerned that the style may be hurting SEO. Moreover, redesigning something inverse with the same quality would be a large project and fairly costly, so I'd like to make sure the benefit will really be worth the cost before moving forward.
Web Design | | Bromtec0 -
How will engines deal with duplicate head elements e.g. title or canonicals?
Obviously duplicate content is never a good thing...on separate URL's. Question is, how will the engines deal with duplicate meta tags on the same page. Example Head Tag: <title>Example Title - #1</title> <title>Example Title - #2</title> My assumption is that Google (and others) will take the first instance of the tag, such that "Example Title - #1" and canonical = "http://www.example.com" would be considered for ranking purposes while the others are disregarded. My assumption is based on how SE's deal with duplicate links on a page. Is this a correct assumption? We're building a CMS-like service that will allow our SEO team to change head tag content on the fly. The easiest solution, from a dev perspective, is to simply place new/updated content above the preexisting elements. I'm trying to validate/invalidate the approach. Thanks in advance.
Web Design | | PCampolo0 -
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