Browser compatibiltiy equivalent of canvas and jquery positioning

This is a couple of related issues in one..I've developed this site http://www.philippa.e-concepts.co.uk 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 http://flowplayer.org/tools/demos/combine/scrollable-gallery-with-tooltips.html

Many thanks in advance
JuliamacAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SleepinDevilCommented:
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

<li>
      <a class="active" href="http://www.philippa.e-concepts.co.uk/gallery.html">
            <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><br>
            <span style="display: inline-block;" class="sub"></span>
      </a>
</li>

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
gallery.html
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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!
0
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!
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

JuliamacAuthor Commented:
Fab!
0
SleepinDevilCommented:
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
0
JuliamacAuthor Commented:
No problem, no offense taken!

Thanks for all that, you've really been very helpful
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.