The issue with the class attribute being disregarded by Internet Explorer

Question

The issue with the class attribute being disregarded by Internet Explorer

Having trouble with a complex web page (JavaScript application) where an included style sheet has the following rule:

.floatleft {
  float: left;
  margin-right: 10px;
}

There is a DIV element within that layout:

<div class="floatleft" width="25%">

The issue is that in IE9 (quirks mode), the floatleft class is being ignored. In fact, when checked using Firebug lite, it shows: This element has no style rules..

Other rules on the page are working fine and FireFox, Chrome display the correct layout.

Some additional points to note:

This problem is not related to float:left as even border:1px solid red doesn't show up.
The parent's parent of the DIV also has another working class attribute.
A child nested within the problematic DIV also has a functioning class attribute.
An inline style like style="float:left" works without any issues.
Removing the width attribute does not solve the problem.
You can find the full CSS code here: http://pastebin.com/1JAATMZD

Unfortunately, replicating the problem in a simplified test case is not possible (the same rule works fine in a different application) and providing a URL for you to view the issue is restricted due to access limitations.

I would appreciate any hints or tips on how to identify the problem. I am aware that Internet Explorer sometimes messes up with style rules unexpectedly.

css internet-explorer internet-explorer-9

Answer 1

Answer №1

Encountered the same issue today with IE7.

In my case, I utilized a JavaScript-created <div> element and tried to apply CSS styling to it using a class. However, IE7 failed to apply the specified styles to the <div>.

(Interestingly, when creating the <div> directly in HTML without involving Javascript, IE7 successfully applied the CSS class).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>::</title>
    <style type="text/css">
      .childDiv{background:red;padding:10px;color:yellow;}
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var parentDiv = document.createElement("div");
      parentDiv.setAttribute("id", "parentDiv");

      var childDiv = document.createElement("div");
      childDiv.setAttribute("class", "childDiv");
      childDiv.appendChild(document.createTextNode("Hello IE7!"));

      parentDiv.appendChild(childDiv);
      document.body.appendChild(parentDiv);
    </script>
  </body>
</html>

I discovered that setAttribute() behaves oddly in IE7 specifically when setting an Element's class name.

The solution that worked for me was to use the className property instead of setAttribute().


childDiv.className = "childDiv";

~~Initially, I tried using an ID attribute instead of Class:~~

#childDiv{background:red;padding:10px;color:yellow;}

along with

childDiv.setAttribute("id", "childDiv");

or referencing the <div> through the parent's ID:

#parentDiv div{background:red;padding:10px;color:yellow;}

Answer 2

Encountered the same issue today with IE7.

In my case, I utilized a JavaScript-created <div> element and tried to apply CSS styling to it using a class. However, IE7 failed to apply the specified styles to the <div>.

(Interestingly, when creating the <div> directly in HTML without involving Javascript, IE7 successfully applied the CSS class).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>::</title>
    <style type="text/css">
      .childDiv{background:red;padding:10px;color:yellow;}
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var parentDiv = document.createElement("div");
      parentDiv.setAttribute("id", "parentDiv");

      var childDiv = document.createElement("div");
      childDiv.setAttribute("class", "childDiv");
      childDiv.appendChild(document.createTextNode("Hello IE7!"));

      parentDiv.appendChild(childDiv);
      document.body.appendChild(parentDiv);
    </script>
  </body>
</html>

I discovered that setAttribute() behaves oddly in IE7 specifically when setting an Element's class name.

The solution that worked for me was to use the className property instead of setAttribute().


childDiv.className = "childDiv";

~~Initially, I tried using an ID attribute instead of Class:~~

#childDiv{background:red;padding:10px;color:yellow;}

along with

childDiv.setAttribute("id", "childDiv");

or referencing the <div> through the parent's ID:

#parentDiv div{background:red;padding:10px;color:yellow;}

The issue with the class attribute being disregarded by Internet Explorer

Answer №1

Similar questions

Designing a layout with one box on top and two beneath it, covering the entire page, can be achieved by following these steps

What is the best way to extract text from multiple "div class" (html) elements in R?

Title: How to Build a Dynamic Logo Carousel with React and CSS without External Dependencies

Adding a class name to the three active, visible, and shown slides in SwiperJS is a simple process that can be done by

Best practices for organizing fonts in SCSS 7-1 architecture?

Is it possible to use columns in the Bootstrap 4 grid system to create text that wraps around an image?

The barely noticeable difference of 1 pixel in the link between Chrome and Firefox

Troubleshooting a layoutUnit problem with Primefaces southern region

Is it possible to use multiple stylesheets with PhoneGap?

The IE condition is failing to work properly with .js and .css files

Properly aligning sub-divs within a parent div using CSS

Having trouble with Javascript in getting one-page scroll navigation to work?

Problem arises with table nth-child selector following the addition of grid-gap

Struggling to properly center the footer on my Django template

The vertical drop-down menu is displaying and functioning incorrectly

Show the center portion of an image without needing to know the size, both horizontally and vertically aligned

Excess space creating horizontal and vertical scrolling issues on an HTML webpage

Easiest method to change cursor to 'wait' and then return all elements to their original state

There is excessive space beneath the text

Combining two divs to share the same linear gradient and shadow effect