View Full Version : Help with messed up links on a HTML5 website

08-02-2011, 09:03 PM
It is a single-page scrolling website in HTML5,
I got the (free) template from here: http://speckyboy.com/2011/02/22/free-single-page-scrolling-html5-portfolio-template-psds/

Here is the site: http://chileva.com
You can check the source (view->source) via your browser,
it is the only thing I have modified, I haven't touched the Java/CSS files at all.

Uses CSS3 and jQuery, works fine for the most part however...
That little red banner on the left side menu is a little messed up.

So, when you click any of the menu items, the red banner should stay behind the link you clicked to indicate it is active.

The thing is that when you click on DIPLOMA, it does load the diploma section,
however the red banner drops down and goes to CONTACT.

Likewise, when you click on CERTIFICATES, it does load the correct section again,
however the red banner drops down and goes to REFERENCES.

These are the only two instances when the red banner goes haywire...
For the rest of the menu items, it works fine.

Any help regarding this is very appreciated!

08-03-2011, 04:24 PM

08-03-2011, 04:32 PM
Without investigating further, you do know that IE has trouble with the new html5 tags like the section tag right? I think there is some script somewhere so that IE can properly render html5 tags. Have you used this in your code? If not you should try looking around on google for the script.

Also, I hope you realize that html5 is STILL very experimental and probably wont be fully supported for a few more years.

edit: actually I have this script that would work if you didn't already use something similar.

<!--[if lte IE 8]>
<script language="JavaScript">
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header ,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(',');for(var i=0;i<e.length;i++){document.createElement(e[i])}})()

08-03-2011, 06:39 PM
The website does the same thing in IE, FireFox and Opera, under Win7/linux/WinXP...

I added the code you posted, but it still does the same thing...

The original website, where I downloaded the template from, does NOT have this issue...
Which leads me to think I might have messed up a line or two somewhere...