The secondary linked stylesheet is not affecting the layout

I'm encountering an issue with linking a second stylesheet to my HTML document, and I'm struggling to identify the (hopefully glaringly obvious) problem.

My method of linking stylesheets in the head is as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="assets/css/global.css" type="text/css" media="all" title="Global styles" charset="utf-8">
<link rel="stylesheet" href="assets/css/ie.css" type="text/css" media="all" title="IE Overrides" charset="utf-8">

The issue lies in the fact that the second stylesheet is not having any effect at all. Even when I reverse their order, it remains ineffective.

To troubleshoot, I added a rule in the second stylesheet to make the background of the body red, and even tried using !important, but unfortunately, nothing changed.

/* Global CSS */
body {
    background-color: #fff;
}

/* IE CSS */
body {
    background-color: #f00 !important;
}

In the Firebug net panel, I can see that both stylesheets are loading, and the style panel displays the styles from both. However, the rules in the second stylesheet just don't seem to be working.

This situation has left me perplexed, as it involves very basic concepts that I have successfully implemented many times before.

htmlcss

Answer №1

To improve your website's performance, consider removing the title attribute from all link tags. The title attribute carries a special significance when utilized with stylesheet links, for more information visit:

Alternate Style: Exploring Alternative Style Sheets

Answer №2

After transferring CSS rulesets from a PHP string in the page source to an external CSS file, I encountered an issue:

Originally:

    $headCss.=
    '   <style type="text/css">
            #containBrainForHire
            {   background:url(\'/graphics/BrainForHire.png\');
                display:table;
                height:300px;
                margin:0 auto;
                width:525px;
            }
        </style>
    ';

Revised:

    #containBrainForHire
    {   background:url(\'/graphics/BrainForHire.png\');
        display:table;
        height:300px;
        margin:0 auto;
        width:525px;
    }

It turns out that nothing in the new CSS file was working properly due to an error in the background definition. The backslashes used to escape single quotes in the PHP string were not valid in the CSS file.

Corrected CSS file content:

    #containBrainForHire
    {   background:url('/graphics/BrainForHire.png');
        display:table;
        height:300px;
        margin:0 auto;
        width:525px;
    }

Despite no errors being reported in the console, the new CSS file was not affecting the page's display. Debugging tools proved to be less helpful than expected.

I share this experience in hopes of saving someone else the time it took me to identify and resolve the issue.

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 pinpoint a particular division and switch its class on and off?

Consider this scenario, where a menu is presented: function toggleHiddenContent(tabClass) { let t = document.querySelectorAll(tabClass); for(var i = 0; i<t.length; i++) { t[i].classList.toggle="visible-class"; } } .hidden-conten ...

javascriptjqueryhtmlcss

Is it possible to utilize react for constructing a static HTML, CSS, and JavaScript document?

As a front end content developer, my main focus is on creating content assets. I typically use vscode to build my html, css, and js files, and then upload these static files to the content management system. However, this approach doesn't give me the ...

javascripthtmlcssreactjsstatic

Is there a way to customize the look of the time selected in the <input matInput type="time" step="1" /> time picker?

Currently, I am utilizing the following code as a time picker in my Angular 9 application. My goal is to modify the selected time's color to a bright blue shade. How can I accomplish this task? <input matInput type="time" step="1&quo ...

javascriptcssangulartypescriptangular-material

Is it possible to drag the parent element but only select the text within the child

How can I make the parent div draggable, yet keep the text in the child span selectable? <aside draggable="true" id="dragme"> This is an aside, drag me. <span id="copyme" draggable="false">But copy me!</span> </aside> A simila ...

javascriptcsshtmldraggable

When using HTML/Bootstrap5, the ms-auto class does not correctly align items to the right in the navbar

I'm currently working on mastering bootstrap through an online tutorial, but I've hit a roadblock when it comes to right-aligning items in a navbar. I've double-checked my code against the instructor's, and it's a perfect match: &l ...

htmlcssbootstrap-5

There appears to be an issue with the dynamic functionality of RouterLink in Angular 6

user-dashboard.html <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" routerLink='/dashboard'>User Dashboard</a> </li> <li class="nav-item" *ngFor="let cat of categories; let i = in ...

htmlangulartypescript

Incorporating multidimensional arrays into the `<input type=checkbox>` element

Hey there, I've set up my form in HTML format like this: <input type="checkbox" name="opt[]" value="<?php echo $option['optionname']?>"> Currently, I'm processing the above option[] as an array with just the 'optionn ...

htmlmultidimensional-array

Blending a background image with CSS

I've set a background image for the div, which is also used for responsive design. Check out the demo My goal is to ensure that the image doesn't appear cut off in the responsive view. I'm looking for a CSS solution to blend the image wit ...

cssresponsive-design

Is It Possible to Use Separate Stylesheets for Different Web Browsers?

I have been trying to implement a JavaScript code that loads a specific stylesheet based on the user's browser. However, it seems like the code is not functioning correctly as none of the stylesheets are being displayed. I have meticulously reviewed t ...

javascriptjquerycss

When the text exceeds the designated block, it will be fragmented

I have always struggled with text elements not breaking when they exceed the boundaries of their parent element. I understand that setting a max-width of 100px will solve the issue, but it's not an ideal solution for me. I want the text to break only ...

htmlcss

This is an alignment of the background image ('relative') to the right side

I am facing an issue with the header section of my website. The background-image is styled using the following CSS: .header { position: relative; min-height: 436px; background: url("../img/holland-canal.jpg") no-repeat; background-size: co ...

cssresponsive-design

What are some ways to stop animated scrolling text from unexpectedly resetting in HTML and CSS?

I created this code snippet on CodePen to illustrate my point: https://codepen.io/sakana-boy/pen/wvBedWo .scroll-text { overflow: hidden; position: relative; } .scroll-text * { white-space: pre; transform: translateX(100%); animatio ...

javascripthtmlcss

Displaying an image that spans the entire width of the browser

I'm currently working on a WordPress site and have encountered an issue with the header image. I want it to span the full width of any browser window. The existing code in the parent theme is as follows: background: url("/test/wp-content/themes/Howt ...

htmlcsswordpress

The CSS design morphs as I adjust the browser size. Despite my limited coding experience of just a few weeks, I've encountered a challenging obstacle

Hi there, I've been searching on W3 and various other sources but haven't found a solution to my problem. I have managed to create the layout I want, however, it starts falling apart when I resize the browser window. I'm relatively new to co ...

htmlcss

Enhance the appearance of the Vaadin Details Expand Icon by customizing the default CSS styling

For my expand/unexpand feature, I am utilizing Vaadin Details. Div contentDiv = new Div(); Label label = new Label("Expand"); Details details = new Details(label, contentDiv); The current output looks like this: https://i.sstatic.net/y8XQC.pn ...

cssvaadinvaadin-flowvaadin14

Having difficulty configuring particlesJS as the background

If you're looking to create a three-page single scrolling webpage with particlesJS as the background, consider using the following resources: particlesJS Website and particlesJS Github Page. An issue arises when trying to set particlesJS as the back ...

javascriptcsshtmltwitter-bootstrap-3particles.js

CSS - Guidelines for Targeting Multiple Elements

My CSS code includes several commands that target similar elements, but the resulting design appears messy. I am seeking advice on a more effective way to select these elements in a conventional manner. Despite consulting documentation, I have resorted to ...

htmlcsscss-selectorsconventions

Having trouble locating HTML elements by their id when typing into a box using cy.get in Cypress with JavaScript

I am a novice in working with cypress and HTML, and I am currently attempting to enter an address in the specified address field. <input type="text" title="Street Address 1" name="billing[street][]" id="billing:street1" value="" class="input-text " ...

javascripthtmlcypress

Button will be disabled unless a value is selected in the dropdown menu

I am currently dealing with a code issue where the button is disabled on page load when the dropdown value is empty. However, even after selecting a value from the populated database dropdown, the button remains disabled. Jquery: <script> $(doc ...

javascriptphpjqueryhtmldropdown

Achieving CSS centering with translate and avoiding content overflow

I have a code snippet for centering content both horizontally and vertically. It functions properly unless there is too much content, in which case it gets cut off. Is there a CSS solution to prevent this overflow issue without involving JavaScript? .b ...

htmlcsscentering