The CSS stylesheets are not compatible with IE7 and IE8

I am encountering an issue with my local site where the CSS links are not being included in the page, particularly in IE7 and IE8.

The technologies I am using include WordPress 3.6, Bootstrap 3, Modernizr, and jQuery.

Source Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie-7"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie-8"> <![endif]-->
<!--[if IE 9]><html class="no-js lt-ie9 ie-9"> <![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"> 
        <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      <title><?php echo title(); ?></title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width">
      <link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/bootstrap.css"/>
      <link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/bootstrap-theme.css"/>
      <link href='http://fonts.googleapis.com/css?family=Maven+Pro:400,700' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/common.css"/>
      <?php if(is_front_page()){ ?><link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/home.css"/><?php } ?>
      <link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/media.css"/>
      <link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>/print.css" media="print"/>
      <script type="text/javascript" src="<?php echo JS_PATH; ?>/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
      <script type="text/javascript">var template = '<?php echo get_template_directory_uri(); ?>';</script>
    </head>

Chrome Head

IE8 Head

I suspected it might have something to do with the DOCTYPE, so I tried changing to HTML4 but the issue persists. It's worth noting that it works in IE8 Browser Mode and Document Mode as Quirks, but not in Standard Mode.

Answer №1

It appears that you have implemented conditional comments.

<!--[if gt IE 8]><!--><html class="no-js"> 
        <head>

However, there seems to be an issue with properly ending the condition for the <html> start tag in the case of gt IE8. This may result in the content before the next comment being hidden on browsers that meet this criteria.

To resolve this, make sure to include <!--<![endif]-->.

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

Why isn't my lightbox able to read this specific property?

A gallery was created using both lightgallery and cycle2. Cycle is a carousel plugin while lightgallery is a lightbox gallery. Clicking on an image in the carousel opens it in the lightbox. Everything worked perfectly until a category in the carousel was ...

What is the best way to save variables in PHP for later use in various scripts?

As a newcomer to PHP programming, I am facing a rather simple issue that I haven't been able to solve despite trying various methods and searching online for a solution. Any assistance you can provide would be greatly appreciated. The problem at hand ...

Adaptable layout - featuring 2 cards side by side for smaller screens

I am currently designing a webpage that showcases a row of cards, each featuring an image and a title. At the moment, I am utilizing the Bootstrap grid system to display 4 cards per row on larger screens (col-md-2), but my goal is to modify this layout t ...

Formulate a jQuery array consisting of droppable components

I have successfully implemented draggable li-elements and droppable boxes using jQuery UI. Here is my structure: A list of 3 different permission types <ul> <li data-action="create">Create</li> <li data-action="edit">Edi ...

Styling Material UI height in select elements (React)

Currently, I am developing a react application that utilizes Material Dashboard. I am encountering an issue with the height of a Select (drop-down list) component. See image here On the right side of my app, there is a standard input field and I would li ...

Trying to showcase information received from a server using an API

For a school project, I am developing a website that can retrieve weather data (currently just temperature) based on a city or zip code from openweathermap.org using an asynchronous call. I have successfully retrieved the data from the API, but I am strug ...

Arrangement featuring two distinct types of tiles

Looking for a way to achieve this layout using just CSS or a combination of CSS and a little JS. Click on my avatar to see the reference image enlarged =) I've tried using floats and display options but haven't been successful. Take a look at htt ...

The Bootstrap carousel indicators are not automatically switching because they are placed outside of the main div

I have integrated the latest Bootstrap framework into my website, featuring a visually appealing carousel. The unique aspect of my carousel design is that the indicators are positioned outside the main carousel div. Here is a snippet of my carousel code: ...

css code for styling html elements

HTML: <link rel="stylesheet" type="text/css" href="styles.css"><table border="0" cellpadding="0" cellspacing="0" class="month"> <tr><th colspan="7" class="month">January 2017</th></tr> <tr><th class="mon">Mo ...

Issue with anchor tag not functioning properly within toggle div

Can you please help me troubleshoot why the anchor tag is not functioning properly within my div elements? When I click on the first div, the second div is displayed but the anchor tag inside the first div does not seem to be working. <script> $(&ap ...

Click to Rotate the Shape

I am attempting to apply a rotation effect on a shape when clicked using jQuery and CSS. My goal is to select the element with the id of x and toggle the class rotate on and off. The rotate class utilizes the CSS transform property to achieve the desired r ...

Is there a way to access the HTML and CSS source code without using the inspect feature

I'm working on a project that involves an "edit box" where users can write text, add emojis, change the background color, insert images, and more. After users finish creating their content, I want them to be able to send it via email. This means I ne ...

Uploading files asynchronously in Internet Explorer 8

Currently, I am on the lookout for sample code that allows asynchronous file uploads in IE8 using Ajax. While having upload progress would be a bonus, it is not essential. Moreover, I specifically need PHP code to handle the uploaded files on the server ...

Can you provide me with steps to customize my mouse cursor specifically when hovering over the canvas?

I own a .cur file and I desire to utilize that specific cursor image whenever my mouse hovers over the canvas element in Google Chrome. <body> <canvas id="canvas" width="600" height="405" style="position:relative; background: black;" onc ...

CSS rule for targeting an element that does not have any child elements

I have a variety of different elements that are structured similarly to the following.. <div id="hi"> <div class="head"> </div> <div class="footer"> </div> </div> ..however, some of these elements do no ...

Saving downloaded web pages as an HTML document

I'm looking to extract the HTML content of a webpage. Within this HTML, there are two specific elements with XPaths that I need to retrieve. Unfortunately, my knowledge on this subject is quite limited. While searching for solutions, most examples in ...

What could be causing my Angular.js application to malfunction on IE7?

I have developed an Angular.js application that is working well on most browsers, but I am now facing compatibility issues with IE 7 and above. I have tried different approaches such as adding id="ng-app", using xmlns:ng, manually bootstrapping angular wi ...

Encountering an error when attempting to switch to an IFrame using Selenium in C#

When attempting to switch to the iframe, I encountered a "No Such element exception". <div class="panel1" id="list_container" style="height: 181px;"> <div class="control" id="FilteredDashboardList"> <div class="splitter h ...

Displaying the second div once the first div has loaded, then concealing the first div

Current Approach: There are two divs occupying the same space, with div1 set to display:block and div2 set to display:none When a tab is clicked, jQuery hides one div over a period of 2000ms and reveals the other div. Challenge: The goal is for the ...

Enhance Your List with Icon Decorations

Is it feasible to utilize a sprite image in place of the default bullet for an ul list? Is this achievable? ...