Why is IE not playing ball with my scrolling div?

ultranerds · September 24, 2014, 6:04am

Hi,

Love the new forum

I’m working on a new design for my site, and I’ve git a bit of a roadblock with a custom gallery system I’ve written. It works fine in FF, Chrome, Safari … but IE (as always!) is being a sod!

You can see it here:

http://steamp.co/new/product.html

I thought it was more related to CSS, as I’m pretty sure its not the jQuery causing the issue.

The main codes around it are:

.scrollableRow {
    float: left;
    overflow-x:hidden;
    overflow-y:hidden;
    position:relative;
    height:281px;
    margin:5px auto;
    border:1px solid #cccccc;
}

/* this actuallt gets updated in the jQuery, to make the correct width */
#scrollDivGallery { 
    width: 300px;
}
.horiz_container ul
{
    margin:0px; padding:0px;
    float:left;
    height: 100%;
    text-align:center;
}

.horiz_container_inner
{
    padding:5px;
    padding-left:0px;
}

.horiz_container li
{   
    width: 200px;
    height: 100%;
    list-style:none;
    float: left;
    margin:0px;
    margin-right: 10px;
    background: #fff;
    border: 2px solid #FCD04C;
}

ul.items li {
    position: relative;
}

div[id^=horiz_container_] {
    width: 4040px; /* this gets tweaked in the jQuery, to make it the correct size for all the elements added together */
    margin:0px;
    padding:0px;
    height:300px;
}
.scroll-left-gallery, .scroll-right-gallery {
    width: 35px;
    height: 40px;
}
.scroll-left-gallery {
    cursor: pointer;
    background-image: url(./images/arrow-left.png);
    background-repeat: no-repeat;
    background-position: center center ; 
    float: left;
}
.scroll-right-gallery {
    cursor: pointer;
    background-image: url(./images/arrow-right.png);
    background-repeat: no-repeat;
    background-position: center center ;
    float: right;
}

#horiz_container_scrollDivGallery {
    height: 278px;
    background:yellow;
}

#horiz_container_scrollDivGallery li {
    margin: 0;
    border: 0;
    vertical-align: middle;    
    height: 100%;
}

#horiz_container_scrollDivGallery li img {
    vertical-align: middle;
}

(I tried posting the HTML … but for some reason the <code> feature isn’t encoding it?)

I’m really at my wits end with this feature - I just wanna get on with the other cool stuff I have planned for the site

Any suggestions are much appreciated!

Cheers

Andy

ultranerds · September 24, 2014, 6:38am

I just setup a fiddle here:

For some reason its not running at all for me in IE (won’t do anything) … almost as if the content is being blocked

I REALLY wish M$ would sort their act out… even Safari is playing ball… just damn IE again. Eugh

PaulOB · September 24, 2014, 9:23am

Hi,

This seems to be a script problem because your fiddle works if I change jquery to 1.9.1.

If you can’t switch to jquery 1.9.1 then I’ll move the thread to the js forum for more help.

PaulOB · September 24, 2014, 9:38am

In IE11 you can seem to fix the issue with CSS.

.horiz_container ul{float:none}

ultranerds · September 24, 2014, 9:42am

Hi,

Thanks for the reply. I’ve changed my main page to use 1.9.1, but the problem still exists:

http://steamp.co/new/product.html

Its almost like the ul elements isn’t going horizontal for some reason (whereas it does in FF/Chrome/Safari just fine). The weird thing though, is that it works ok on the fiddle - so I’m not sure what I’ve done differently there

Any ideas?

TIA

Andy

PaulOB · September 24, 2014, 11:12am

Did you see my last post?

ultranerds · September 24, 2014, 11:51am

Hi Paul,

Doh - I did try that, but I stupidly added it at the top of the CSS file - which is why it didn’t make a difference =)

All good now on IE11. Always in a bit of a predicament on how to test older versions of IE now though. Are there any good tool?

Thanks!

Andy

PaulOB · September 24, 2014, 12:14pm

Modern IE allows you to download virtual machines for testing.

I use IEtester for quick testing but also have some old PC machines with older browsers on.

The developer tools in IE allows you to emulate some versions of IE but it’s a bit hit and miss and doesn’t really give a good idea of what will work.

ultranerds · September 24, 2014, 12:24pm

Thanks - that Modern IE looks interesting. Will have to take a look at that. I already use IETester, but I never know if its a “true” test or not

Thanks again for your help - I was going mad with that bug!

PaulOB · September 24, 2014, 2:42pm

IE tester on the main is 99.9% accurate for css and is likely to be better than virtual machines that have not got the correct service packs added etc. However it is very buggy and crashes all the time and there are some things it doesn’t like like file inputs and problems with transparency in some earlier versions. It does also depend on what version of IE is installed by default because IE7 emulation won’t run locally.

Nothing beats having the real version running on a real computer though

ultranerds · September 24, 2014, 2:55pm

Yeah for sure. The problem is that I’m not a designer per-say … I’m a programmer I guess it couldn’t hurt to have a 2nd machine, which can boot up into different version of Windows, each with different versions of IE on - it just a PITA, as I guess it mean’s needing multiple licenses as well. I think the IE Tester one sounds good for what I need right now. As long as I can test the bulk of it, I’m sure I can do with a crash every now and then

RyanReese · September 24, 2014, 6:57pm

Chrome also has an extension called IE Tab. I’ve tested some code at work on it and it seems to behave exactly like IE. Only does IE7-9 though but it’s been 100% accurate so far of what should break etc.

ultranerds · September 24, 2014, 7:12pm

Thanks - will give that a go too

PaulOB · September 24, 2014, 8:19pm

I believe IE tab only uses the version of IE that you currently have installed unless I am mistaken

RyanReese · September 25, 2014, 1:30am

No you have the option of changing whatever IE version you want. My work computer has IE11 installed. I have the options of IE7-9 (they note that I need to have at least the version installed if I want to emulate it)

PaulOB · September 25, 2014, 8:11am

I don’t believe that’s true Ryan. It will only accurately emulate the current version you have installed. Any other versions will be the versions from developer tools options which are wildly inaccurate and don’t react to known bugs in those versions so is little use for testing as it’s the bugs that you usually want to fix.

RyanReese · September 25, 2014, 9:57am

I do not know how accurate yoru bug statement is, but my computer at work has browserstack which I can use (I’m the designated debugger since they know I browser Sitepoint and I like debugging ) . The IEtab emulated version compared to BStacks IE is identical. I don’t know about how accurate bugs are bug…

For example - we have a masthead slider using slick-slider (Foundation). We had an issue where it wasn’t automatically rotating in IE9 only. My IEtab correctly showed that it was broken when I selected to see it in IE9.

Also had an issue where a span was exceeding the parents width and on the masthead slider, you could see caption2 behind caption 1 (faded). BStack on IE9 showed this. The emulated IEtab also showed this.

Bugs aside, seems accurate for me. Perhaps showcasing bugs are the downfall.

PaulOB · September 25, 2014, 10:57am

You can easily check by testing a bug and then seeing if your IE tab displays it properly.

Try this in IE8:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body:after {
	content:" testing a fixed element";
	background:black;
	color:#fff;
	position:fixed;
	top:100px;
	width:200px;
	height:200px;
}
</style>
</head>

<body>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
</body>
</html>

IE8 has a bug and fixed positioned elements using :after scroll with the document when they shouldn’t. IE9+ apply it correctly but not in IE8. The developer tools in IE get this wrong and so will your IE tab I believe (unless you are running a native IE8).

The developer tools are OK for simple stuff but just can’t be relied upon enough to debug properly.

RyanReese · September 25, 2014, 11:15am

Yeah it’s not showing bugs but default rendering and everything shows up fine - I gave two examples in my previous post.

I don’t know if you’ve ever used BrowserStack but it quickly gets to be a nuisance, so I was looking for a better option.