Browser issue w/ Featured Content Glider

[igotregistered]

1) Script Title: Featured Content Glider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentglider.htm

3) Describe problem:

Hello, I am using this on my site. Everything works great in FF most current browser. But it's not working properly in IE 7

my site: nhlf1ghtclub.com ---> replace the #1 with an i

The images glide in on the far right exposing only a corner of the image and no text.

Does anybody know if there's a fix?

Thank you

[jscheuer1]

Add the highlighted:

<div id="canadaprovinces" class="glidecontentwrapper" align="left">

[igotregistered]

Hi John, thank you for reply.

Should I add this to body script code or head?

Thank you,

Ross

[igotregistered]

Oh got it. I didn't realize the end "align" tag was added.

Thank you. All fixed!

[igotregistered]

Hi,

I noticed something with the DD Glider. My text next to the graphic almost overlaps. I've tried using break <br/> tags to separate and added padding. Neither works. Is there a way to add some space between the text and the graphic when there's both?

Thank you

[jscheuer1]

A br only produces a line break (vertical space). And since your image is floated left, it doesn't even produce that. You want horizontal space anyway. Here's what I'd suggest, where you have:

<div class="glidecontent"> <a href="http://www.nhlfightclub.com/fight-club/27253-interview-garry-howatt.html"><img src="http://i.imagehost.org/0868/garry.gif" style="float: left; padding: 1px"/><br/> <br/> NHLFC is interviewing Garry Howatt! Get in on the action and post your <a href="http://www.nhlfightclub.com/fight-club/27253-interview-garry-howatt.html">question</a> </div> <div class="glidecontent"> <a href="http://www.nhlfightclub.com/fight-club/27233-wade-belak-listed-m-i.html#post55135"><img src="http://j.imagehost.org/0811/belak.jpg" style="float: left; padding: 5px" /><br/>
What happened to this guy? MIA? Wade Belak goes from top to bottom in less than a year.
</div>

Get rid of the br's after the image, they aren't doing anything. Lets look at just the image:

<img src="http://i.imagehost.org/0868/garry.gif" style="float: left; padding: 1px"/>

Try:

<img src="http://i.imagehost.org/0868/garry.gif" style="float: left; padding: 1px; border: none; margin-right: 3px;"/>

Just removing the border will make the text appear farther away from that image because it (the image itself) has a white area around it. So you may not even need any added right margin. Alternatively, if you like the border, you could skip the border: none; and make the right margin larger.

You can play around with these to see what looks best to you and apply them to the other images as well, either in the same manner for each, or as looks best for each individual image.

[igotregistered]

Perfect. Thank you again!