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 -
Organization name as text vs. as a picture with alt text + Schema.org markup
I'm looking for some feedback to implement best practice for the markup of our header/navigation at the top of our site. Our organization name and a tag line is at the top of every page on the left, then our logo, then our navigation to items like "Topics" "FAQs" "About us" etc is to the right along the top. Our organization name includes the most frequently searched keyword for what we want to rank on, and our organization name is our domain name. A couple other background items: we're a non-profit startup and no code is public yet -- hence, I'll be explaining what we're going for. We're coding in straight html/css, not using Wordpress or anything like that. When we originally DIY coded our draft homepage and a few landing pages, we put the organization name and tag line into the markup as text, to look like this: Organization name | Pretty | Navigation items over here
Web Design | | scienceisrad
Explanatory fun tag line | Cool |
--------------------------------------- | Logo | --------------------------------------------------------- Then we outsourced the markup of two more landing pages to a company that does on-demand orders for responsive markup, based on png's we sent of the designs. The company's code renders a fabulous looking version of our design, and important for usability, it is responsive. The company also did something else I'm not so sure of. They made one big image out of our organization name, tag line and logo ... because? The indenting and different font sizes of the Organization name and tag line was too hard to code in? Or is it just best practice for html standards, SEO, etc. to make it one big logo?? Now, as part of an overall effort I'm working on to reconcile our different code ... I'm mulling right now specifically on reconciling the different approaches we each took and incorporating new best practices for the header ... based on what I'm reading online about headers, including debates about whether to use h1 for your company name, whether using an image for the name is fine, advice about including Schema.org markup for logos, etc. Given all this, which of these two options look better to you? Do they seem equally good to you? What would you change about the one that looks better to you? What do I have wrong in them? Or would you code this entirely differently to hit all best practices? What do you think about using h1 for organization name vs. is there a better tag to use for the organization name to code it in as text? (Note: we have other h1's on our pages for the actual article/content titles of each page, which maybe we should, maybe we shouldn't be having those as h1's?) Option 1 -- using text for our name and tag line: <header id="top" class="brandfont brandcolor">
[# Organization name Explanatory fun tag line](/) Organization name logo {navigation code here}
</header> Option 2 -- name, tag line and logo all as one big png image: <header id="header" class="container"> Organization name tag line {navigation code here}
</header>1 -
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 -
Hi, I have a doubt. If we want to hide unwanted text in a web page its possible with "" tag. And my question "does a search engine crawl those text? help me.
I want to hide a lot of text behind my site page. I know its possible with that tag. But in what way a search engine looks at those text? Hidden or they are crawled and indexed.
Web Design | | FhyzicsBCPL0 -
Using More Info javascript:toggleDisplay tag for More info text
Is there any harm in using javascript so a user can "toggle" open or closed additional text on a website? For example, if a user wants to read more about something, they can click on "More Info" and the text would then appear. Google is able to read the text, because I chose a random 8 word section of the text within the More Info and pasted it into a Google Search and the website showed up in search results. Just wondering if using this technique would have any negative impact. Here's what the code would look like:
Web Design | | EEE3
<a <span="">title</a><a <span="">="Show Tables" href="</a><a class=" " target="_blank">javascript:toggleDisplay('table1')</a>">More Info style="display: none;" id="table1"> this is where the text would be, and from this section was where I grabbed text to search with in google. Then in the footer, here is the script needed so the more info will work: I am by no means an expert in coding/html/javascript. Thanks!0 -
Duplicate H1 tag IF it holds SAME text?
Hello people, I know that majority of SEO gurus (?) claim that H1 tag should only be used once per page. In the landing page design I'm working with, we actually need to repeat our core message stated in H1 & H2 - at the bottom of the page. Now the question is: Can that in any way cause any ranking penalty from big G? In my eyes that is not attempt to over optimize page as it contains SAME info as the H1 & H2 at the top of the page. Confusing, so I'm hope that some SEO gurus here will share some light on this. Thanks in advance!
Web Design | | RetroOnline0 -
Flag page elements to not be loaded by Instapaper and co.
Does anybody know if there is a way to mark certain elements (especially navigation menus) so that instapaper and co don't pull them? I'm looking for a quick solution (best would be if it was CSS based) nothing fancy like parsing the user-agent. That would be plan B. I've added role="navigation" id="navigation" and class="navigation" to the nav elements in hope that it would work. Seems like it does not; sometimes the elements are present in the page generated by instapaper, sometimes not. Thank you for any replies and have a great day! Jan
Web Design | | jmueller0