Is your CSS file functioning properly in Chrome but not in Internet Explorer?

I recently developed a custom SAP Portal Component that includes a JSP file with Javascript. This component is placed on a SAP Portal page alongside another iView, which contains multiple headers and text within an iframe. My objective is to dynamically generate a table of contents using Javascript, style it with the provided CSS code, and integrate it into the iframe. The Javascript functions smoothly across all browsers, successfully creating the table of contents. However, I have encountered an issue where the styling only renders correctly in Chrome; when viewed in IE, the CSS does not apply.

#contentsdiv{
border: 1px solid #CCC;
display: inline-block;
*zoom: 1;
*display: inline;
padding: 5px 5px;
}


#contentstitle{
display: inline-block;
*zoom: 1;
*display: inline;
padding: 0px 0px 2px 0px;
}

#expandButton{
display: inline-block;
*zoom: 1;
*display: inline;
font-size:14px;
padding: 0px 0px 2px 2px;
text-decoration: none;
}

#expandButton:hover {
 cursor:pointer;
 text-decoration: underline;
}

#listdiv > ul{
padding-left:0px;
list-style-type: none;
padding-bottom:2px;
}

#listdiv > ul > li > ul, #listdiv > ul > li > ul >li >ul{ 
list-style-type: none;
padding-bottom:2px;
}

#listdiv > ul > li > a{
text-decoration:none;
font-size:14px;
}

#listdiv > ul > li > ul > li > a{
text-decoration:none;
font-size:14px;
}

#listdiv > ul > li > ul > li > ul > li > a{
text-decoration:none;
font-size:14px;
}

#listdiv > ul > li > a:hover , #listdiv > ul > li > ul > li > a:hover , #listdiv > ul > li > ul > li > ul > li > a:hover{
 text-decoration: underline;
}

Do you have any suggestions or solutions for this issue?

Answer №1

    <html>
      <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>My Web Page</title>
      </head>
      <body>
        <p>Content goes here.</p>
      </body>
    </html>

Make sure to include the meta tag in your html code and remove all instances of * symbols, as they are not supported by IE.

Answer №2

Consider eliminating the asterisks before your attributes.

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

Building a multi-form application with HTML5 validation and Vue.js

I am working on a vue.js form that consists of multiple steps and requires HTML5 validation to be simplified. Here is a snippet of the code: <template> <div> <div v-if="activeForm === 1"> <h2> ...

"Effortlessly transform a JSON string into a JSON Object with JavaScript - here's how

When I serialize my object using the ASP.net JavaScriptSerializer class and return it to the client side, how can I deserialize the string in JavaScript? ...

Save the text found within an element to Appim wd.js

I am a beginner with Appium and I am currently exploring the workshop Git project, which utilizes wd.js and Grunt. From my research in the documentation and forums, I have learned that there are two methods for accessing the text of native elements within ...

An issue occurred when retrieving the input value during a (change) event within a nested *ngFor loop in Angular

Within my table, I have implemented a nested loop using the *ngFor directive: <tbody> <tr *ngFor="let dept of salesTarget; let i = index"> <td>{{dept.dept}}</td> <td *ngFor="let month of monthList; ...

Only view one LookAt from the kml file

I'm encountering an issue while trying to parse a kml file using jquery. I want to extract the field "lookAt" only once from the xml data. Below is a snippet of my code: ... $(xml).find( "LookAt" ).each(function(){ if(!indic ...

Alter attribute with an impact

I am looking for a solution to switch the image source using attr, while also incorporating a fade effect in the process. I have attempted to implement one of the suggestions from another post, but it is not producing the desired outcome. Current Appearan ...

Executing code after sending an HTTP response in Next.js: A comprehensive guide

Executing code after sending an HTTP response in Express can be done like this: res.send() await someAsyncFunction() // assuming this function takes a significant amount of time In the case of Next.js, testing locally shows that the above code behaves sim ...

The Express router is failing to recognize the mongoose model

Currently, I am developing a node.js application and encountering an issue where I receive a reference error stating that Post is not defined every time I run this specific code. Interestingly, when I move the post route from submit.js to app.js, the code ...

The hyperlink tag doesn't respond to clicks in Safari, yet functions properly in all other web browsers

I'm encountering an issue with my header drop-down menu in Safari—it works perfectly in Chrome, but when I try to open the drop-down menu in Safari, it's unresponsive. Clicking on it does nothing, preventing me from accessing other drop-downs. ...

What is the best way to display a loading screen while simultaneously making calls to multiple APIs?

I'm currently working with Angular 8 to develop an application that retrieves responses from various APIs for users. The application is designed to simultaneously call multiple APIs and I require a loading indicator that stops once each API delivers a ...

Add transparency to a component using CSS

I am currently facing an issue with a div element called signup-box. I have applied an opacity value of 0.65 to it, but unfortunately, this is affecting everything within the div as well. This means that my white text is no longer visible as white and th ...

Possible revision: "Methods for updating Bootstrap language settings?"

Currently, I am working on a project using ASP.NET Core in combination with Bootstrap. Recently, I successfully integrated localization support by following the guidance provided in this documentation. However, I encountered an issue where the Bootstrap fr ...

Is a fixed div located inside a fluid grid container?

Having developed a website with a fluid 12 column grid, I am looking to lock the position of a div in the right hand column once it reaches the top of the page (using something like StickyJs or a similar tool). However, when the fixed position is applied, ...

Razzle fails to initiate the server

After creating my React project with Razzle.js and downloading it from a repository, I encountered an issue when trying to run it. Upon running yarn start, the screen gets stuck at a message saying the source is compiled and server is running on localhost: ...

The technique of using Javascript x to escape characters is

I've come across a handful of other software programs that feature a similar construct: let str = '\x32\x20\x60\x78\x6e\x7a\x9c\x89'; As I experimented with the sequence of numbers and letters within ...

Using the responsive design mode may not accurately reflect the mobile user experience

Recently, I've been working on designing a new cover for my book using HTML and CSS. After completing the design, I previewed it in Responsive Design mode on both Firefox and Google Chrome. However, when I tried to view the website on my phone (a Gala ...

Error: The document is unable to detect any input values

I've been struggling with this issue for quite some time now and I can't seem to figure it out, no matter how hard I try. It seems that my input field is not capturing the value entered by the user for some unknown reason. Let me share the code ...

The use of event.returnValue is outdated and no longer supported. It is recommended to use the standard event.preventDefault() method instead. You may encounter

Hey there :) Currently, I am utilizing JQuery 1.9.1.js to search records using JSON. I am able to retrieve the search list locally, but when attempting to publish it on Windows Server 2008 and IIS 7, I face issues as it throws an error stating "event.ret ...

Unable to execute JavaScript function by clicking

I've tried everything, but I can't seem to change the button text when selecting an item in the "Requirements" dropdown. You can view the issue on this site. Located at the bottom of the page is the "Requirements" dropdown. Each item has an oncl ...

Tips for embedding multiple video players on a single HTML page

I'm currently experiencing an issue with the YouTube API. I am in the process of developing a website where I want a video to automatically play when I open its corresponding image. The code I used initially worked successfully: <script> // 2. ...