Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts

    IE image replacement woes - PLEASE HELP

    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 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
    Code:
    <h3 id="newsTickerTitle"><span>News Updates</span></h3>
    CSS
    Code:
    #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.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,630
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    I don't understand what is the spans actual purpose if you are using text-indent -5000px

  • #4
    New Coder
    Join Date
    Aug 2007
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts
    @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
    Code:
    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?

  • #5
    New Coder
    Join Date
    Aug 2007
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts
    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

  • #6
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,630
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    Quote Originally Posted by michaelespinosa View Post
    Ok mostly was fixed with the super technical property of
    Code:
    align-text: left;
    That is not valid CSS. It must read text-align

  • #8
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Quote Originally Posted by michaelespinosa View Post
    @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?

  • #9
    New Coder
    Join Date
    Aug 2007
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts
    @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
    Last edited by michaelespinosa; 10-28-2008 at 08:14 PM. Reason: added link

  • #10
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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?

  • #11
    New Coder
    Join Date
    Aug 2007
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts
    @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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •