Defeated by internet explorer

[bluebomber]

Hello guys, I've been constructing my first ever website using JavaScript along with HTML and CSS, I've never written any JavaScript before and have written everything from reading the w3schools website and by asking questions on this board.I've now finished the website, it works perfectly in chrome and firefox but sadly seems to have fallen at the final hurdle in internet explorer 8 - there is one tiny aesthetic element I just cant get to work but it ruins the site usability.What are the best practices for getting help here - would it be to post a link to the website and external js \ css files with a description of the problem?Are any of the experts here willing to go through a completed website in order to help debug it?

[jeffman]

Posting a link is always best. As specifically as you can, explain what you want to happen and what actually happens. Often it's well documented and can be solved quickly. If not . . . cross your fingers.

[bluebomber]

Ok, thanksThe site is here: http://www.nihon35.com/ - it's a website for one of my personal photography projects.Clicking on one of the three links in the bottom left will take you to a page with thumbnails of images.Clicking on an image will initiate a lightbox style viewer which is controlled with CSS and Javascript functions found here:http://www.nihon35.com/css/style.csshttp://www.nihon35.com/imageviewer.jsOnce in the lightbox viewer, clicking on the main image again will return you to the thumbnails, alternatively you can use either of the left and right arrows to cycle through the available images (with fade effect) in the viewer - all of these are handled by functions in the same js file.All aspects of the viewer seem pretty much water tight in chrome and firefox - the issue comes with using the left and right arrow buttons to cycle the images within the lightbox when you are using internet explorer.The lightbox works by fading in a full screen fixed position DIV (display:table) with a black solid background that contains the image nested within a span which in itself is (display:table-cell) and aligned vertically with "middle". The left and right arrow buttons are floating DIVs nested within the main fixed position DIV.In internet explorer, if you use the left and right arrow buttons to cycle the centred image, the main fixed position full screen DIV forming the lightbox background mysteriously vanishes (taking the 2 nested left and right arrow buttons with it) leaving just the centred image floating above the original website page, it looks messy and the user can no longer see the lightbox navigation buttons.I've no idea why this happens, and I've checked my javascript and css over and over and after spending the best part of 4 hours on this have pretty much given up - internet explorer wins. There's nothing in the image cycling functions that should affect of change the display or the opacity of the background DIV forming the lightbox, its only when the user clicks on the full screen image that a function is called which reduces its opacity (and then eventually removes it by setting its display to none) - again the fact this works in the other browsers tells me the logic behind my code is sound.It's so frustrating to get this far and then trip up right at the end!

[bluebomber]

It has to be said, what I'm trying to do would be so much easier using CSS3 transitions.... with IE9 round the corner... it makes me wonder if I should just give in and do it that way instead.hmm...

[bluebomber]

Another half day gone, and still no progress with this issue.A few clues I've noticed.The left and right image cycle function within the lightbox does work in internet explorer if you enable the lightbox to appear by default, (change the display of #black in the css file from "none" to "table")However as soon as you click on one of the images to return to the thumbnail pages - and the select another image the lightbox background will break as it fades back in.One other clue I've noticed, is that the left and right cycle buttons which change on mouseover are achieved with a simple swap of CSS background-position, yet for some reason these never work within the lightbox in internet explorer - however if you duplicate one of these buttons and place it elsewhere in the main page for example - internet explorer has no problem with them.

[bluebomber]

Ok.... I've re-created the issue with a massively stripped down version of the site which is all self contained in one htm file with 3 images - I'm hoping this will make the problem much easier to digest and solve.The site is here:http://www.nihon35.com/new/the code is mostly the same (although some details have been left out such as the code which protects the functions being called too quickly after each other).Clicking on call light box brings up the black box with centred image, the floating white square that can be seen mimicks the "next" button - clicking on it will cycle through 3 images.It works fine in firefox and chrome.. but in internet explorer - the black box will vanish (and never return) once you hit the cycle image button.I still can't get to the bottom of this, but there's so little substance to this stripped down version I'm sure the answer is staring me in the face.I feel like a man on the edge.

[jeffman]

It actually is quite simple, and not what you expect. Explorer pretty much chokes when you try to display div elements as tables or table cells. I really don't understand why changing the opacity of "vert" should clobber "black", but that's what happens. Display "black" as "block" and all is well.I understand that you are trying to vertically center the image. Mimicking a table cell is not the way.

[bluebomber]

Deirdre's Dad, just before I read your post I actually gave up - and updated the site with a (probably quite crude) bit of code that detects internet explorer, and changes the image cycle function to be a simple image swap with no fade effect - it's less than ideal but it makes the site usable while retaining the nice aesthetic for firefox and chrome users.However, I looked into your method and while it works - the image is no longer centred, I'm only using the combination of table and table-cell displays for the lightbox because I've read it's the only reliable way of getting an image centred within a div using CSS.I've read about other methods (such as applying a negative left and top margin to the image exactly 50% of the images original width and height) but this method as far as I can tell only works if every image you plan to load has the same size - which in my case isn't true...and that's that basically.If you know of a better way of reliably getting images of varying sizes centred within a DIV then I'd love to hear it - because I'd then change the code back and use the block display for "black" element.Either way - I appreciate all the help you've given me this and other posts.

[jeffman]

Actually, the solution is pretty easy in this case, and it will clean up your HTML a lot. The trick is to make your image a background image. Background positioning has a center center option. Here's what I changed:The HTML:

<div id="black">	<div id="vert"></div></div>

The CSS:

#vert{	width:272px;	height:256px;	background-image: url(1.jpg);	background-position: center center;	background-repeat: no-repeat;}

The JS:

// instead of display as tabledocument.getElementById('black').style.display='block';...// instead of changing the image source:document.getElementById('vert').style.backgroundImage = "url(" + number + ".jpg)";

And it works in every browser I tested.

[bluebomber]

Right, what you've said makes total sense.I've tried to put this code back into the original site.The end result?Image cycling now works in internet explorer.... but there's a catch.Now the 2 layers that contain the left \ right buttons vanish when you click them.No layers have any table or table-cell display types so I'm confused (as usual)I've uploaded a portion of the site showing this issue here:http://www.nihon35.com/new2/tokyo.htm

[bluebomber]

Right, ignore that last post.Deirdre's Dad - if you've got a moment.I rebuilt my lightbox as a standalone page with cleaner javascript and html - it's herehttp://www.nihon35.com/image/I've used your technique of 2 DIVs and and a centered background image.Things work smoother than ever in Firefox and Chrome - but again, there are big issues in ie.Even though your last post did indeed work great, for some reason mixing in the ability to fade the lightbox in and out along with the image cycling causes massive (and for me unexplainable) issues in internet explorer.If you try the example above in ie - the browser seems to hang for a while when you attempt to cycle image, eventually the image will cycle (without a fade for some reason) and then the arrows will mysteriously disappear.If you try nesting the navigation buttons inside the imagelayer instead of the lightbox layer things improve slightly, the buttons won't disappear but the browser still advances images without the fade effect and seems to hang for a very long time in doing so.The really weird thing is - if you change the css so the lightbox is already open when the page loads... the image cycling works just fine in internet explorer, but then as soon as you fade the lightbox out things go wrong when you go back in for the next time.It's almost as if internet explorer just can't deal with manipulating the opacity of DIVS once it or its parent divs have had their display value tampered with.