Browser compatibiltiy equivalent of canvas and jquery positioning

This is a couple of related issues in one..I've developed this site but the links don't work in IE, does anyone know of an IE compatible equivalent, plus...the tooltip and the gallery itself are offset, I can't see where to edit them in the css?

Ideally I'd like the gallery to open in the same horizontal position , bit to be centalised vertically and for the tooltip to appear over the appropriate thumbnail.

If it helps, the scripts were taken from here

Many thanks in advance
Who is Participating?
SleepinDevilConnect With a Mentor Commented:
Wow the base of this website is messed up. There are 3 major <div>s that are opened and then unclosed. There is a false start of <body> BEFORE it really should.... Anyway I went and fixed some of these issues and I have attached the file with this comment. Take a look at it. It works fairly well now... There is still the issue of this

      <a class="active" href="">
            <span class="typeface-js-vector-container"><canvas style="margin-top: -1px; margin-bottom: -1px;" width="121" height="41"></canvas>
                  <span style="margin-left: -122px; letter-spacing: 2.14286px; width: 121px;" class="typeface-js-selected-text">Gallery</span>
            <span style="display: inline-block;" class="sub"></span>

I am not quite sure what the person who designed this website is trying to achieve with the <canvas> type elements.

That took me over 30mins gah. I should get paid for fixing up websites. I cannot stand incorrect coding practice
JuliamacAuthor Commented:
Thank you! SleepinDevil, it works wonderfully now, were the divs causing the problems? I am that person who tried to design the site! I adapted it from a template, I think it's just a case of not understanding well enough what's going on, I took the page into Visual Studio which I thought would show me any unclosed tags, but none showed up as errors, so I din't think there was a problem with that aspect. How did you suss that out?

The canvas elements were there, is there an IE friendly element, I'm guessing it's not compatible with IE? I will definitely give the the points BTW, just wanted to try and understand where I was going wrong!
JuliamacAuthor Commented:
Oh, I misunderstood, when you said 'there's still the issue' I didn't realise the canvas thing was fixed. Just looked in IE and saw that all is hunky dory. Thanks again. Just be grateful if you could explain if it was the unclosed divs that were the problem and how you managed to suss that out.

Brilliant, thanks!
2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

JuliamacAuthor Commented:
WHOOPS sorry I did not mean to be offensive to you or anything lol, I just noticed links to other site designing websites and thought you paid someone money to design that.

So the list of things I changed, lets see

1) The doctype I'm not a fan of transitional, I used strict instead.
2) I tabbed out everything properly
3) I placed the 4 <link>s that was under <body> before into the <head></head> as this is where links to CSS scripts should be placed.
4) I put a </head> and <body> where they are meant to go (after all the <style> tags on the page or whatever)

5) I added a </a> after one of the links for the photos as one was missing.
6) I moved out the <div>s with id "tooltip" and "gallery" from the nested <div>s outside so it was within just the <body> element as its parent.
7) I added some stuff like type="text/javascript" and type="text/css"

Thats about it. Sorry if it sounds complicated.

To attempt to answer your question more directly well I think it was not working properly because of the <div>s with id= "tooltip" and "gallery" being nested inside the big list of <div>s. I am not sure if this was the reason because I just edited it all up in one go saved it and refreshed it on my end and everything was working fine :S

About the "canvas" element I really have no idea what that is :P probably some custom thing with the template you were looking at. Hmmm but yes I removed it and made it look the same on IE and FF.

I use a program called Notepad++. I was able to quickly notice the unclosed tags as when you click onto an element in Notepad++ it highlights both the starting and opening tag and so I noticed there were a lack of closing </div> tags

I hope you enjoy what it looks like now, cos I know I sure do :) It looks great.

Grab a book on just HTML (or even xhtml if you wanted to) and read through it and you will get the hang of htmling with Notepad (or Notepad++) just like that, if you wanted to follow that path :P or just come back onto EE and post and someone else or myself will be able to help you.

I am glad I helped out :) and thanks for the points
JuliamacAuthor Commented:
No problem, no offense taken!

Thanks for all that, you've really been very helpful
All Courses

From novice to tech pro — start learning today.