...

View Full Version : IE image replacement woes - PLEASE HELP



michaelespinosa
10-27-2008, 11:00 PM
I am getting extremely frustrated trying to figure out what is going on in IE 7. The site I am working on is reynoldssports.com (http://www.reynoldssports.com) and all the titles that I used a image replacement on are all way off the the right. Here a sample of what I did:

HTML

<h3 id="newsTickerTitle"><span>News Updates</span></h3>

CSS

#newsTickerTitle {
height: 15px;
position: relative;
}
#newsTickerTitle span {
display: block;
position: absolute;
width: 110px;
height: 15px;
text-indent: -5000px;
overflow: hidden;
background: url(../images/newsUpdates.jpg) no-repeat;
}

What is going on? It's probably a simple fix but I can't find it. Thanks for any help.

VIPStephan
10-27-2008, 11:05 PM
Hm, well, can’t test right now but have you considered using the top and left properties for the absolutely positioned span? If nothing is stated the element should be positioned at its default position but IE might have some issues if floats or whatever come into play.

Scriptet
10-27-2008, 11:33 PM
I don't understand what is the spans actual purpose if you are using text-indent -5000px

michaelespinosa
10-27-2008, 11:48 PM
@Scriptet the purpost of the span is for search engines and code mobility. So search engines can read the title of the section and so when I make a mobile style sheet for the site the code is already there and I can style accordingly without pictures.

Ok mostly was fixed with the super technical property of
align-text: left;

But there is another issue. Check out the background image duplicating when the window width is sized down. For some reason the #wrapper div is not centering with the body. Any ideas?

michaelespinosa
10-28-2008, 12:26 AM
Ok sorry fixed that one too. Overflow: hidden; did the trick. The last issue I am having is the thumbnail headshot pictures. If you you look at it in FF you'll see they line up correctly but in IE the is a little overlap on the left side of the div and part being cut off on the right side. Accepting any suggestions. Thanks

jerry62704
10-28-2008, 03:32 PM
Just a thought. I also have hidden text for the purpose of screen readers (never thought about spyders). But if it is (and it appears to be) a section title, it should be a "hx" tag. Then move that "hx" tag out of sight with an absolute position so it doesn't still eat up screen space.

VIPStephan
10-28-2008, 07:26 PM
Ok mostly was fixed with the super technical property of
align-text: left;

That is not valid CSS. It must read text-align

Scriptet
10-28-2008, 08:01 PM
@Scriptet the purpost of the span is for search engines and code mobility. So search engines can read the title of the section and so when I make a mobile style sheet for the site the code is already there and I can style accordingly without pictures.


But I thought the whole purpose of the SPAN was so that text-indent:-5000px wasn't needed? With that you don't need a SPAN at all do you?

michaelespinosa
10-28-2008, 08:14 PM
@jerry62704 I am using an H3 tag. Then using that space to put the image into with the span.

@Scriptet There are ways to use the span and not use the text-indent and I have used them, but I still use the text-indent because sometimes you could see the original text before the span img showed up. Like a flicker and I didn't like that.

@VIPStephan Your absolutely right. I checked my css and luckily I only mistyped it in this post.

Has anyone had to chance to look at the horizontal carousel on the headshots in IE 7? Still not sure what's going on. Any help to remedy this for IE 7 would be much appreciated.

Here it is (http://reynoldssports.com)

Scriptet
10-28-2008, 08:31 PM
So wouldn't something like:

<h3>My Header</h3>

h3 { background:url(img.gif); text-indent:-5000px; }

Do the same thing without the use of a span?

michaelespinosa
10-28-2008, 10:50 PM
@Scriptet It works in FF but I was having issues in IE and using span fixed it. I'm not exactly sure what the problem is though.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum