Featured Content Glider - FF = OK, IE7 = NOT OK

**nwsebas** · 04-24-2008, 05:08 AM

1) Script Title: Featured Content Glider

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

3) Describe problem: First off, just so everyone knows ahead of time, I've read through the forum topics featuring the words "content glider" and couldn't seem to find any similar problems. Secondly, I'm guessing the problem has something to do with this..

"Note that the CSS used to style this script assumes that your page contains a valid doctype at the very top in order to display properly in IE. This is due to IE's buggy support of CSS and the Box Model. Of course you're free to modify the CSS in any way to get the desired look."

....I've tried using the "box model hack" page but still couldn't figure it out.

Whats happening is on FF the glider shows up fine. Exactly how I want it. On IE7 it looks like it shows up fine, however it almost seems like its right justified. I can only see the first half of whatever image/text I want.

I'd post an example of it, but its on a **** site of mine lol... not sure if thats ok around here? Here is a sample of the code I'm using.

Code:

<div id="tubevideos" class="glidecontentwrapper">
<div class="glidecontent">
<table width="575" id="mytableborder" align="left" cellpadding="0" cellspacing="1">
                    <tr>
                      <td width="141" height="115" align="center"><a href="stephanie_cane.html"><img src="images/sc_stephanie.jpg" width="135" height="102" class="image"></a></td>
                      <td width="431" height="115" align="left"><a href="stephanie_cane.html" class="videotitle">Teen Stephanie Cane Video</a><br>
                        <div class="alltext">When you watch a Stephanie Cane **** you find it really hard to believe she can be that good at just 18 years old! She gives one great blowjob and then gets her tight pussy ****ed by a thick cock! <br>
                          <b>Time: 1:18</b></div></td>
                    </tr>
                    </table>

</div>

</div>

Code:

.glidecontentwrapper{
position: relative;
width: 575px;
height: 118px; 
border: 1px solid #FFFFFF;
overflow: hidden;
}

.glidecontent{
position: absolute;
background: white;
padding: 0px;
visibility: hidden;
width: 575px;


}

I obviously also have all the proper scripts and the css attached. I've been trying for 2 hours. I can't for the life of me figure out how to fix this problem. ANY help would be greatly appreciated. This code is EXACTLY what I was looking for. Thanks.

**jscheuer1** · 04-24-2008, 12:04 PM

It is unfortunate about the site's content. No, we don't allow links to **** sites here. Thank you for not posting one. However, in order to help you out, if you could make a mock up of your page using only PG images and text, that might be the best way for us to diagnose the problem.

I can tell you that you might as well (if you aren't doing so already) use a valid URL DOCTYPE (as you mentioned is required in your post) like:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

or:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

One of these should be the very first thing at the top of the page's source code, followed immediately by the opening <html> tag.

The other thing I can tell you is that the problem you mention sounds like you have some centering of an absolutely positioned element. This means that one or more of the container elements for an absolutely positioned element has either the text-align:center style or the align=center attribute or is itself a <center> tag. In IE, this should be avoided. Often this can be corrected by having the most immediate containing element to the absolutely positioned element text-align:left or align=left. Sometimes one can even insert a division like that around the absolutely positioned element to take care of this.

Sometimes what one has is a relatively positioned element around an absolutely positioned one. In that case, just make sure that both elements do not have either of these centering qualities (the style or the attribute) and that their immediate parent element doesn't either.

**nwsebas** · 04-24-2008, 01:42 PM

Originally Posted by jscheuer1

It is unfortunate about the site's content. No, we don't allow links to **** sites here. Thank you for not posting one. However, in order to help you out, if you could make a mock up of your page using only PG images and text, that might be the best way for us to diagnose the problem.

I can tell you that you might as well (if you aren't doing so already) use a valid URL DOCTYPE (as you mentioned is required in your post) like:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

or:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

One of these should be the very first thing at the top of the page's source code, followed immediately by the opening <html> tag.

The other thing I can tell you is that the problem you mention sounds like you have some centering of an absolutely positioned element. This means that one or more of the container elements for an absolutely positioned element has either the text-align:center style or the align=center attribute or is itself a <center> tag. In IE, this should be avoided. Often this can be corrected by having the most immediate containing element to the absolutely positioned element text-align:left or align=left. Sometimes one can even insert a division like that around the absolutely positioned element to take care of this.

Sometimes what one has is a relatively positioned element around an absolutely positioned one. In that case, just make sure that both elements do not have either of these centering qualities (the style or the attribute) and that their immediate parent element doesn't either.

Wow, it was so simple I almost want to punch myself. It turned out that I needed to have this div tag...

Code:

<div id="tubevideos" class="glidecontentwrapper">

... set

Code:

align="left"

As soon as I read what you said it came to me. Thanks alot jscheuer1. I really appreciate it.

Thread: Featured Content Glider - FF = OK, IE7 = NOT OK

Thread Tools

Search Thread

Featured Content Glider - FF = OK, IE7 = NOT OK

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions