Overflow issue in IE

[digiology]

Howdy people!

Czech this: http://takingnotes.net/progress/div_test10.html

Look at the image with the arrows on either side.

In order to allow the images to slide left and right I have a wide div containing all 5 images which is inside a narrower div (id: outerness) with the property overflow:hidden.

I recently put this inside a two column table and the overflow property is now ignored in IE!

It looks fine in other browsers (firefox, safari) and as you should be able to see, the old version without the 2 column table looks fine: http://takingnotes.net/progress/div_test8.html


I hope you can offer me insight into the mysterious internet explorer.

 

[adx]

Forgive me if I'm wrong about this, but do you even have a style sheet? It doesn't appear in your source, so basically the id 'outerness' is totally useless. Are you applying all the styles with JavaScript??

 

[digiology]

Apologies, the id isn't used by css(except perhaps by a javascript function for something else). The only styling applied is within the div tag.

Don't hesitate to ask for any clarifications on the code, it probably looks a little confusing if you're not familiar with it.

 

[horrorshow75]

See if this helps

http://fplanque.com/dev/xhtml-css/css-fixing-overflow-hidden-in-ie-ie6-win

 

[digiology]

Thanks but that didn't work, I already had the width set and setting height didn't help.

I'm using a 2 column table because I want the image and arrows to be placed left to right (and then use relative positioning to move the arrows into the right position). If there is some easier way to make these three divs go side by side that may help too.

In the 'working' example I gave the arrows are placed below the main image which creates a large gap between it and the next paragraph so using the 2 column table is a way of avoiding this.

 

[horrorshow75]

Well it obviously has something to do with the table, because it works as should in IE without it. So maybe you need to apply the overflow property to the <td> instead of the div. I'm just guessing here.

Your site doesn't validate. It shows 47 errors.

http://validator.w3.org/check?uri=http%3A%2F%2Ftakingnotes.net%2Fprogress%2Fdiv_test10.html&charset=%28detect+automatically%29&doctype=Inline&group=0

Test 8 only shows 42 errors. Maybe IE doesn't like one of these 5 errors and is breaking.

http://validator.w3.org/check?uri=http%3A%2F%2Ftakingnotes.net%2Fprogress%2Fdiv_test8.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.606

 

[digiology]

Yeah I tried adding overflow:hidden to and the td and I tired adding it to the table, no luck.

I'll try eliminating those extra 5 errors.

 

[digiology]

ok, all those errors are gone except for a few small ones like missing alt tags.

http://takingnotes.net/progress/div_test10_old.html

But no dice, it still doesn't look right in IE.


Can use suggest a way of placing the arrows and main image in left to right order without using a table? (without leaving big gaps on the top or bottom of the image).


Cheers

 

[horrorshow75]

Maybe you can explain the table thing to me because I don't fully understand when i open the old version without the table the image gallery looks fine across IE6, 7 and FF3. The images scroll left or right depending which arrow I push and I don't see any gaps. Could you post a screenshot of what you think looks incorrect so I have a better idea of what to look for.

Have you tried adding the overflow hidden to div id="scrolly"?

 

[digiology]

Yes I tried that!

It does look fine the old way BUT there is a gap below the image when I put a paragaph after the image because the actual position of the arrows is there(i.e. if no relative positioning was there).

The table is meant to hold the main image and the arrows side by side so that the arrow boxes don't take up any space below.
So its: coll1: image, coll2: both arrow buttons.
I could position all subsequent content up 106 pixels (height of the two arrow boxes) put the site will be dynamic and that could all give a little messy with more than one image gallery in a single blog post. Make sense?

One other thing, the arrow images are in divs to avoid a bug where mousing over the areas where they would be without relative positioning causes them to highlight.

 

[horrorshow75]

Well i'm stumped (sort of) if you remove the position: relative from the scrolly div the overflow hides in IE. However doing this breaks your JS.

Unfortunately I'm not savvy enough in JS to figure out how to make it work without the relative positioning.

sorry man

 

[digiology]

Thanks man, that actually helped (in a way).

I put the image into another div and had JS mess with the positioning of that outer one. It doesn't make any sense but it seemed to fix it.

http://takingnotes.net/progress/div_test10_old.html


Cheers

 

[horrorshow75]

Awesome. Glad you got it working. Good luck with the rest of the site.