Issue with the style of the inline menu is not functioning properly in IE11

My menu with inline block links is working perfectly in all browsers except for IE11.

In Chrome, it looks like this:

https://i.sstatic.net/78EcQ.png

In IE11, it looks like this:

https://i.sstatic.net/HbPBt.png

Here is the CSS code snippet:

.rlist--inline {
    list-style: none;
    padding: 0;
    margin: 0;
}
.rlist--inline li{
  display:inline-block;
  padding:10px;
  border:1px solid black;
}

.dropdown__menu li{
  padding:5px;
}

/* Rest of the CSS code remains the same */

Any suggestions on how to fix it in IE11? I have already tried using clearfix and setting right: -100%, but the issue still persists. Any help would be greatly appreciated!

Answer №1

First and foremost, there seems to be an issue in your HTML code with a double quote present here

<a title="Current Issue"">

Additionally, it appears that when you set the display property to flex in a row in Internet Explorer, it does not correctly calculate the new width and maintains the previous width from when the flex box was a column. If you are looking to style submenu items in red, you can directly apply red color and shadow to your list items as shown below:

.rlist--inline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rlist--inline li {
  display: inline-block;
  padding: 10px;
  border: 1px solid black;
}

.dropdown__menu li {
  padding: 5px;
}

.dropdown__menu a {
  white-space: nowrap;
  padding: 12px 20px 8px;
}

* {
  box-sizing: border-box;
}

.dropdown:hover>.dropdown__menu {
  display: flex;
  /* background: #ed1c24; */
  left: -100%;
}

.dropdown {
  display: inline-block;
  position: relative;
  background: red;
}

.dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  font-size: 14px;
  text-align: left;
}


 ul.rlist > li {
  background: #ed1c24;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
<ul class="rlist--inline">
  <li class="menu-item"><a><span>Topics</span></a></li>
  <li class="dropdown menu-parent">
    <a title="Journal" class="dropdown__toggle">
      <span>Journal</span>
    </a>
    <ul class="rlist dropdown__menu">
      <li>
        <a title="Current Issue">
          <span>Current Issue</span>
        </a>
      </li>
      <li>
        <a>
          <span>Archive</span>
        </a>
      </li>
      <li>
        <a>
          <span>Article Series</span>
        </a>
      </li>
    </ul>
  </li>
</ul>

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

One of the unique CSS properties found in the NextJS setup is the default 'zoom' property set to

Even though I already found a solution to the problem, I can't help but wonder what the author meant by it. Hopefully, my solution can help others who may encounter the same issue. After installing the latest NextJS version 13.2.4 on my computer, I e ...

Mobile phone experiencing issues with background loop video playback

<video autoplay muted loop id="videobg"> <source src="bgvideo/bgvideo.mp4" type="video/mp4"> </video> I have a background video on my website that works perfectly on desktop but not on iPhone. You can c ...

The dropdown feature in AngularJS experiencing sporadic malfunctions on Google Chrome

HTML: <select id="bId" ng-options="b as b.name for b in books" ng-model="selectedBook" ng-change='onBookChange()'> </select> The issue: The options are not always displaying and the selected option is not visible. List ...

Using HTML5 date input on an android browser

As I develop a web page catering to Android users, I have incorporated a date form control for users to input dates. However, I have noticed that on most devices, the native date selector does not pop up. Interestingly, on certain Samsung devices like the ...

The local HTTP server is having trouble establishing a connection with the Firebase user

Utilizing Visual Studio Code editor and a node js HTTP server, I have developed a simple login page and created a user in firebase. However, I encountered an issue with logging in using the username. The code for the webpage was written in HTML and bootstr ...

Creating a personalized grid display

I've been trying to achieve the following output with my code, but so far nothing has worked. Can someone help me identify what I may be doing wrong? I'm new to this, so any guidance would be greatly appreciated. (Please ignore the 'undefine ...

Steps to remove a scrollbar from a fullscreen slider

Can anyone provide code examples on how to disable the scroll bar on a full screen slider? I want to have a scroll down button on each slider that, when clicked, will show the scrollbar only below the slider. I don't want the scrollbar to be visible ...

Unusual shift in the modal's behavior occurs when the parent component's style.transform is applied

I have encountered an unusual issue with a modal's appearance and functionality. The modal is designed to enlarge images sent in a chat, with the chat upload preview div serving as the parent element and the modal as the child element. This strange be ...

Having trouble getting the Bootstrap toggle checkbox to function properly within Angular 2 components?

Working on an Angular 2 project with Bootstrap, I recently tried to integrate a bootstrap-toggle checkbox into the UI. Despite following the instructions from this site, the checkbox was displayed as a normal checkbox instead of toggled. The Index.html cod ...

Challenges with organizing content using spans in Bootstrap 3

Looking for some help with TB3 here. I've created a jsFiddle to showcase my attempt at building a small minitron, which is essentially a mini jumbotron. https://i.sstatic.net/VxruB.png The idea is to have each 'minitron' contained within a ...

Stopping halfway through a jQuery toggle width animation to close again

Perhaps the question may be a bit unclear, but allow me to provide an example. When repeatedly clicking the button that toggles the width, the div continues to animate long after the button press, which is not visually appealing. My desired outcome is for ...

Discovering the following element containing an ID attribute with jQuery

Upon clicking a link, my goal is to locate the subsequent <section> with an ID attribute and retrieve its ID. In the provided code snippet and JavaScript function, the expected outcome upon clicking the link is for "section_3" to be logged in the co ...

Is it feasible to access reference images contained within a zip/tar file using html/javascript with the help of a library?

Although this question may appear similar to others, there is a key distinction that sets it apart. In search of request efficiency rather than space efficiency, lazy loading could be the solution. However, in situations where content needs to be quickly ...

scraping mixed content from an HTML span using Selenium and XPath

Currently, I am attempting to extract information from a span element that contains various content. <span id="span-id"> <!--starts with some whitespace--> <b>bold title</b> <br/> text here that I want to grab.... < ...

Implementing dynamic database content into a Wow Slider on a jQuery Mobile platform

I am currently using static data in a slider with wow slider jquery mobile. However, I would like to retrieve data from a database and display it in the slider. Can someone provide suggestions on how to do this? Thank you. <script type="text/javascri ...

Designed radio buttons failing to activate when focused using a keyboard

I'm facing an issue with radio input buttons that I've dynamically added to a div using jQuery. They function properly when clicked with a mouse, but do not get activated when using the keyboard tab-focus state. NOTE: To style the radio buttons ...

CSS :empty selector failing to target elements

I have a situation where I utilized the :empty selector within the .error class. However, I'm encountering an issue where even if there is no content inside the div with the error class, the error class does not get removed entirely. Upon examination ...

Ways to increase the font size of the text within the button for forum actions

<form action="https://www.kroger.com/account/communityrewards/" > <input type="submit" value="Go to Krogers" style="height: 50px; width: 150px;" /> </form> I'm interested in learning how to increase the font size of the form action ...

Unusual alterations to HTML and CSS to meet specific needs

Struggling with bringing my website ideas to life! My header contains a navigation bar, followed by a centered chat box within a fixed <section>. Want the left and right side of the chat box to be content areas that scroll in sync while the chat box ...

Is the availability of XMLHttpRequest constant?

When using XMLHttpRequest to retrieve data from the server with Javascript, is it necessary to include conditional checks for the specific browser being used? Is the code snippet below considered standard practice when working with XMLHttpRequest? if (w ...