CSS conflict when using iFrame

Question

Overview

Hi there,

I run a website for my Football Team on Wordpress. I recently used a software to register and create a card for every member of my Football Team. Since this registration is made outside my website, I used an iFrame to include it.

However I noticed the topbar/menu items are not showing up correctly in the iFrame on my website, but perfectly fine on the software link.

I checked the code through Chrome and found out there's a line of CSS that's setting the menu's items' display option to None. The problem is I can't find the CSS on Wordpress, so I think it's the CSS of the software's website.

Question

What am I missing?

Is there a way to fix that CSS?

Or have I setup the iFrame wrong?

Or is it maybe a conflict with my website's CSS?

Screenshots

My Website, not working

Software's website, working

CSS Line

Edit

Here's the full code for the iFrame:

< script language = "javascript"
type = "text/javascript" >
function iFrameHeight() {
    var h = 0;
    if (!document.all) {
        h = document.getElementById('blockrandom').contentDocument.height;
        document.getElementById('blockrandom').style.height = h + 60 + 'px';
    } else if (document.all) {
        h = document.frames('blockrandom').document.body.scrollHeight;

    }
} < /script>

< div > Tesseramento al Torneo Campioni di Amicizia < /div> < iframe onload = "iFrameHeight()"
id = "blockrandom"
name = "iframe"
src = "https://app.softwaretessere.it/index.aspx"
width = "300%"
height = "1000"
scrolling = "no"
align = "top"
frameborder = "0" >
Questa scelta non funziona correttamente in quanto il browser utilizzato non supporta gli Inline Frames < /iframe>