Links aren't working, css not recognized.

[starlight1992]

Alright so I am working on a website for a company called KBDuct. On the homepage, there are links for the "clamp together video" and "ducting layout planner". These links work in google chrome but not in mozilla or IE. When I inspected these elements within these browsers, the developer tools seem to not even recognize the elements at all. However if I inspect the "download catalog" button, everything seems to pop up in the developer tools. Its really strange. Some help would be greatly appreciated.


Website: www.KBDuct.com

Programming Language: PHP

If you need to see any of my coding let me know.

[trolly]

Works for me.
But there is a major error. All three links are contained by a div with the same id. This can not be.

All divs below have the id "catalog".

Code: Select all

<div id="catalog">
<a href="http://www.kbduct.com/ducting-components-catalog-order/"><p>DOWNLOAD CATALOG <img src="http://www.kbduct.com/img/download_icon.png"></p></a>
</div>
<div id="catalog">
<a href="https://www.youtube.com/watch?v=X_tbdgGVGrU&amp;feature=youtu.be" target="_blank"><p>CLAMP TOGETHER VIDEO </p></a>
</div>
<div id="catalog">
<a href="http://www.kbduct.com/ducting-layout-planner" target="_blank"><p>DUCTING LAYOUT PLANNER</p></a>
</div>

[jscher2000]

Depending on the shape and size of the window, div#slideup_cont can block some or all of those elements. Unlike (older versions of) IE, Firefox does not pass clicks through transparent elements higher in the z-order.

To see what I mean, open Firefox's web console (Ctrl+Shift+k) and run this code, then close the console, resize the window and watch what happens:

Code: Select all

document.getElementById("slideup_cont").style.backgroundColor="#000";

Ideally the z-order of the blocked buttons would be higher than the (black) box but lower than the elements that slide up from the footer. You may need to experiment a bit.