Why is my site in progress on the “HTML5 Boilerplate” system resulting in non-interactive pages?
Example: http://www.maxilham.com/buttons
I am no expert at coding, but I have made several websites and have an increasingly better knowledge of html, css, js and so on. I do not have real training or a technical background, so I always like to try systems and templates that are probably more semantically correct and up to date than anything I would write out of thin air.
Thus I downloaded the http://html5boilerplate.com/ template and then went about coding as I normally do. Everything looked perfect (at least as I expected it to, not finished designing), but when I replicated index.html to start testing links and building the other pages, I realized no links on the page were clickable, and that in general the whole thing was acting more like a screen-cap or .pdf then the website I thought I had made.
When I stripped everything out of the BP .css file (except for what I had added), I broke the structure/styling, but all the links became active, hovering states showed, etc..
I cannot pinpoint what it is about the starter index.html/style.css combo or what I am doing wrong to them, that is breaking the site.
Does anyone know of an obvious mistake/coding conflict that would freeze/lock my pages?
Thanks in advance for any help and sorry if this is too specific/generic/not in right place.
AB
Check for a negative z-index. If you have a z-index that is lower than 0, it will place it ‘behind’ the body tag, aka make it completely non-interactive. Only reason I guess that is because I am unable to inspect anything and I’ve seen this before.
Alternatively, make sure you don’t have some sort of page-wide element with a z-index that is higher than everything else, however Inspecting any element on the page only selects the body tag, leading me to believe that is the culprit.
I doubt the problem is in any way directly related to the HTML5BP.