Why are the hidden links throughout my page still appearing in the noscript tags?

Question

I have been working on a simple web site (one page at the moment) to display some basic information. This site also contains several links that refer the user to downloadable content (2 links to a PDF and one link to a zip file).

These links, like most of my page, are hidden using the display:none CSS attribute if the user cannot run JavaScript, which several features of the site require. A message is then displayed in the <noscript> tag to inform the user of why they aren't seeing the scripted content. This was all working perfectly when I previewed the files on my personal computer without hosting them.

My problem came after hosting on the site on GoDaddy.com. Now, whenever <noscript> is called upon (regardless of browser), every link from my site is pulled out and shoved in the upper-left corner where the user can see it. CSS styling does not appear to affect these links and I cannot figure out how to get rid of them.

How can I solve this? Most importantly, how to make the links go away unless I set them to visible again?

This is my <noscript> tag, at the bottom of the page:

<noscript>
    <div class="scriptError">
        <h1>Javascript is disabled!</h1>
        <div id="noScriptNotice">
            <p>This site works best with Javascript enabled. A 'noscript-friendly' version is currently in progress, but for now please enable Javascript to view the contents.</p>
        </div>
    </div>
</noscript>

Everything else (including links) is inside this div:

<div class="scriptedContent" style="display: none;">
<script>
    //If scripting is enabled, display the site.
    $(".scriptedContent").css("display", "block");
</script>

Answer 1

If it's working on your own localhost, but not Godaddy.com , you should first and foremost try to submit a support ticket to see if that provides any help.

The links that are re-appearing, see if you can apply this CSS style to the links that you are trying to hide:

font-size: 0;
text-decoration: none;

That should do the trick of hiding the links, that is, if your CSS is affecting them at all. If not, try to "right click > view source" of the page, and then view and compare the source with your own.

Alternative if that does not work: Try making your links (in the HTML code) something along the lines of:

<a href="#" style="display:none;"> Text </a>

and seeing if that stops them from overriding your Styling.