CSS fails to render properly on pages containing multiple query strings

An issue was initially reported by a customer using an IE browser (specific version unknown). I was able to reproduce the problem on my Samsung Galaxy 3 mobile's Chrome browser. The CSS is not being applied to the page when accessing this link with two query strings:

Upon inspecting the source code, it can be seen that the necessary CSS files are being called and are accessible: iqRegional.css keywordsearchsearchform.css iqBIM.css

While one CSS file is linked absolutely, the other two are linked relatively. Despite this, none of the files load on my Samsung Galaxy 3 mobile's Chrome browser for this specific page.

However, after shortening the query string in the URL, the CSS loads without any issues.

javascriptandroidhtmlcss

Answer №1

Visit this link

The code on lines 67-72 looks like this:

<script type="text/javascript>
    MyIQDynamicListArrayName = 'MyIQListArrays', List_Catalog_ID = 1642; 
</script>
<link rel="stylesheet" type="text/css" href="http://catalogs.infocommiq.com/avcat/css/iqRegional.css?v=6"><link rel="stylesheet" type="text/css" href="../keywordsearchsearchform.css?v=6"><title>Audio Visual Equipment, AV Service Providers Directory and Resource Center - AV-iQ</title><meta name="description" content="The most complete audio visual equipment, AV service providers directory and industry resource center including AV equipment, installations, dealers, rentals, service providers, case studies, news and more!"><meta name="keywords" content="audio visual equipment AV services providers directory resource installations dealers rentals 3D cameras displays projectors screens mounts video production presentation systems content delivery digital signage test measurement signal management furniture consoles media manufacturers - AV-iQ"></head>

<body>

On the other hand, for this link

The code on lines 62-67 is as follows:

<script type="text/javascript>
            MyIQDynamicListArrayName = 'MyIQListArrays', List_Catalog_ID = 1642; 
        </script>
        </head>

<body>

It seems that there are additional css files being loaded in the first link. It's recommended to review your template code to understand why adding a query string disrupts the loading of these css files.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to navigate to tab activity in main activity using a button press

Is there a way to navigate from the main.xml containing a button to the tab activity using the tabs fragments in tab.xml? ...

androidxmlandroid-fragments

Using JavaScript to switch the classes of buttons and elements

Hey there! I received this code from a friend who was trying to modify the switch buttons. I made some changes so that each button can now change the state of two separate elements when pressed. Here's the altered code: function toggleClass(ev){ v ...

javascriptcss

Arranging Material UI tabs on both sides

I'm currently working with Material UI tabs and I'm trying to achieve a layout where some tabs are positioned to the left and others to the right. For instance, if I have 5 tabs, I want 3 on the left and 2 on the right. I've tried placing th ...

javascriptreactjsmaterial-ui

Converting javascript html object lowercase

Is there a way to dynamically adjust the height of specific letters in my label? Right now, I am overriding the text for the elements: let element = document.getElementById('xxx') element.textContent = 'Label' I attempted using <sup ...

javascripthtmlangular

Anchor element not displaying Bootstrap popover upon focus trigger

I'm exploring ways to implement bootstrap popovers that respond to both click and hover events without relying on jQuery. I have a variety of controls on my page and I want to bind popovers to them using JavaScript. While testing with buttons and anc ...

javascripttwitter-bootstrapbootstrap-5popoverbootstrap-popover

Unable to pass observable data when closing the pop-up

return{ // The following code can be found in index.js addItem: function () { alert("working"); Newram.show().then(function (response) `***// Calling show functionin Newram.js***` { var c = response; ...

javascriptjsonknockout-2.0durandal-2.0

CSS Grid with dynamically changing number of rows set to "auto", while ensuring one row always has a fixed size of "1fr"

Currently, I am experimenting with a CSS grid-based frontend and have encountered a specific requirement that keeps repeating itself in various parts of the frontend: A grid with a dynamic number of rows. Each row should be of variable size (auto). The f ...

htmlcsscss-grid

What is the best way to locate a table of a specific class using jQuery selectors?

Is there a way to specifically target a table with the class "d" using jQuery selectors? I'm having trouble making it work... var dTableTags = $(".d table"); For instance, an example table would look like this... <table id="thetable" class="d"&g ...

javascriptjquery

Trigger the execution of the second function upon the successful completion of the first

In the following code, my concept is to display: The clicked kingdom (clicked_id) initiates an attack on (clicked_id). https://i.stack.imgur.com/Bx8QW.png https://i.stack.imgur.com/Cg2GL.png https://i.stack.imgur.com/gUNxM.png How can I trigger the sec ...

javascripthtml

Image loading failure detected in ReactJS

In my current project using Reactjs (Nextjs framework), I encountered an issue where I am unable to display an image on a page without specifying the "height" and "width" attributes in the Image tag. I attempted the following code snippet but the image is ...

javascriptreactjsnext.js

How to retrieve the class of a dynamic div by clicking on a different div using jQuery?

I am trying to retrieve the class of a dynamic div when clicking on another div with the class name "div.secondclass". Below is my code snippet: $(document).ready(function() { $("div.secondclass").click(function () { firstclass=$('#firsti ...

javascriptjqueryhtml

Issues with the functionality of the accordion menu

I have implemented an accordion menu on my website. However, I am facing an issue where the 2nd menu always slides up when it gets loaded instead of sliding up after clicking on it. I want the behavior to change so that the sub menus elaborate only upon cl ...

javascriptjquerycss

Ways to determine the presence of an alert using JavaScript or Selenium

I am currently developing a bot that performs constant searches. However, I have run into an issue where sometimes an alert requesting access to the user's location pops up. Is there a way for me to detect the presence of this alert or even disable it ...

javascriptpythonselenium

Configuring timezone for 'date' type in Plotly.js

I'm currently working on a graph to showcase the trend over time. The data I have is in Unix format and I use JavaScript code (new Date(data)).toUTCString to display it in my title. Surprisingly, while the data for the graph and the title is the same, ...

javascriptdatetimezoneplotly

Is there a way to eliminate the feature that rearranges characters in reverse order?

Is there a way to modify this code to only replace vowels with "er" instead of reversing the order of characters? I'm hoping to remove the function that reverses the character order. If you want to take a look at the code, it's available on Past ...

javascript

Moving Configuration Files in NextJS

When working on a typical Next.js project, I often end up with several root-level configuration files: tsconfig.json next.config.js next-seo-config.ts .eslintrc etc... I am looking to tidy up my root directory by moving these files into their own separat ...

javascriptnode.jsreactjsnext.jspackage.json

Step-by-step guide on aligning a div of unknown height in the center of a div with a set

Struggling to center product images vertically within a fixed height box? Here's the code I've been working with: <div class="main-pic"> <ul> <li><img src="images/extra/laptop.jpg"></li> <li><img ...

htmlcss

Clicking on Bootstrap Select Does Not Trigger Dropdown Opening

Currently, I am working on generating a dynamic set of bootstrap-select widgets that include a dropdown. My main challenge lies in preventing the select from closing the dropdown, which requires me to use 'event.stopPropagation()' on the dropdown ...

javascripttwitter-bootstrapbootstrap-select

Routing static pages in Angular 2

I successfully created a static page using Angular 2. When I run ng serve and visit my page, it functions as intended. Specifically, I can navigate to a specific page by typing in the URL, such as www.mysite.com/resume. However, after uploading it to my si ...

javascriptangularangular2-routing

CSS: element misplaced at the top instead of the bottom where it belongs

The component with the ID of "#bottom-nav" actually appears at the top. I just designed this on CSS-board, so feel free to review the HTML and CSS code Take a look at it on CSS-desk here It is positioned at the very end of the page and includes a ' ...

htmlcss