IE compatibility with Bootstrap justified navigation behavior

While examining the example on http://getbootstrap.com/examples/justified-nav/, I noticed a discrepancy between how IE 11 and Chrome/Webkit/Firefox render the width of the li elements. In IE, the widths are justified and equal (around 190px), whereas in other browsers they vary (e.g. first li 175px, second li 192px, etc.).

I am working on a project where this consistency is crucial. Does anyone have any ideas on achieving the same behavior in IE as in Chrome/Webkit/Firefox?

EDIT: It seems to be dependent on the width of the inner a element.

csstwitter-bootstrap

Answer №1

To ensure each cell (li element) has equal width, you need to set the parent element to display:table and table-layout:fixed. Additionally, the list elements should have their width set to 100%.

Include or modify the following CSS declarations:

.nav-justified {
  display: table;
  table-layout: fixed;
}

.nav-justified > li {
  width: 100%;
}

Update: Implementation Example Included

.nav-justified {
    /* New styles */
    display: table;
    table-layout: fixed;
}

/* Specificity increased for demo purposes with !important */
nav .nav-justified > li {
    /* New styles */
    width: 100% !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
  <ul class="nav nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Downloads</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

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

Troubleshooting Problem with Centering Rows in Bootstrap

I am utilizing the most recent version of Bootstrap 3 to design a website for a friend, but I am encountering a challenge with centering elements on the page. Typically, I would use the following code: .center{ width: 90%; margin: 0 auto; } Howev ...

jqueryhtmlcsstwitter-bootstrap-3spacing

Display XML elements on hover with a Bootstrap tooltip

I am attempting to showcase an XML snippet in my title attribute, similar to the example below. I understand that removing data-html="true" or changing it to false will resolve the issue. However, I also require a label in my title resembling the <stro ...

jqueryhtmlcsstwitter-bootstrap-3twitter-bootstrap-tooltip

Prevent scrolling while popup is open

I found a helpful tutorial online for creating a jQuery popup (). However, due to my limited understanding of jQuery, I'm having trouble getting it to meet my needs. The issues I'm facing are: I need to prevent the webpage from scrolling when ...

javascriptjqueryhtmlcss

The HTML pattern [A-Za-z] specifies that the entered name must adhere to the required format, such as inputting "john"

<div class="title details"> <label for="idtitle" class="label">Title</label> <input type="text" placeholder="Title" id="idtitle" pattern="[A-Za-z]" required> </div> Link to Firefox screenshot ...

javascripthtmlcss

Designing an adaptive div for textual content without relying on Bootstrap

I am working on creating a responsive div that includes an image, text, and spacing between the divs. Initially, I had divs with spacing and text but they did not resize properly when more text was added. I am aiming to achieve a layout similar to this: ht ...

css

Center align three spans with different heights within a div

When faced with this particular set of HTML: <div class="wrapper"> <span class="left"></span> <span class="middle"></span> <span class="right"></span> </div> The .left and .right elements have fixed heights ...

csshtmlvertical-alignment

The chosen color for the link button in CSS

PHP CODE : $getOID=$_GET["id"]; for($i=$getOID-($getOID-1); $i<=5;$i++){ echo '<a class="current" href="postlogin.php?id='.$i.'">'.$i.'</a>'; } CSS STYLING FOR BUTTONS : .pagging { height:20px; ...

cssbuttonhyperlinkselected

Leverage the power of CSS and jQuery's calc function within your React.js

Currently, I am facing a situation where I require the div to have a dynamic width in my React JS code. To achieve this, I tried using divStyle = {width: calc(100% - 276px)}, but unfortunately, it resulted in an error stating that calc is not a function. ...

javascriptcssreactjs

Each time a nested collapse occurs, it triggers its parent collapse

I have come across some similar answers, but they all pertain to accordions, which I am not utilizing in this case. In my code, I have nested collapse items. You can view the code snippet here on CodePen $('#collapseOutter').on('show.bs. ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

Innovative and responsive web design strategies

Although I have a solid understanding of html, css, and JavaScript, I struggle with combining these skills effectively. My expertise lies in developing native apps for Android, where I focus on creating dynamic layouts using relative positions and sizes li ...

javascriptandroidhtmlcssresponsive-design

Bootstrap 4 Multilevel Navbar with Bootswatch design positioned on the right side

How can I modify a multilevel Navbar in Bootswatch 4 (Bootstrap 4) to make the Submenus pop open to the left side? The "dropdown-menu-right" class doesn't achieve the desired result. Can someone provide guidance on how the CSS / Javascript should be a ...

javascriptcsstwitter-bootstrapbootstrap-4bootswatch

How can I modify the color of a hover button?

How can I change the color of a link on hover? The code I tried is not working properly. Below is the CSS snippet I have already added: a:hover {color: red;} ...

htmlcss

Struggling to effectively align the footer div in a responsive design

Check out this GitHub link to access the HTML file and CSS: https://github.com/xenophenes/pgopen-splash2016 I'm facing an issue with the footer text alignment. Despite my efforts, I can't seem to center it properly as it keeps appearing slightly ...

htmlcss

What is the best way to maximize an image's height evenly outside of its full-width container?

Is it possible to extend an image beyond its parent container on both the top and bottom while maintaining responsiveness and containing remaining content within the parent? I've managed to achieve this effect on the top but struggle with the bottom. ...

htmlimagecss

unable to choose an option if more than one radio button is being used

I am having trouble with two radio buttons that are supposed to select the gender of an applicant and the gender of the applicant's child. Both buttons are not functioning properly. Can someone assist me with this issue? Here is the code I am using: ...

htmlcss

What are alternative methods to prevent a div from expanding in width from the right side other than using position absolute?

Looking to create a div element that only expands from the left side as content is added? <div id="sent_message" style='background-color: #2b89cc; color: white; font-family: Arial,Helvetica, sans-serif; margin-top: 10px; display: ...

javascripthtmlcss

Solution: Resolve clientY scrolling issue within an HTML document

I am facing an issue with the positioning of my context menu. When I right-click and scroll down, the menu does not maintain its regular position. Instead of appearing to the right of the mouse cursor when stationary, it moves below the cursor based on how ...

javascripthtmlcssbootstrap-5

The banner appears unusually compact when viewed on mobile devices

It's about time for me to delve into the intricacies of responsive and adaptive design, but I'm hoping there's a straightforward solution to tackle this issue. Here is my desktop web page as displayed in my browser: https://i.stack.imgur.c ...

htmlcssresponsive-designadaptive-design

Excessive content in Bootstrap Table

I am currently facing an issue with two tables placed side by side using the Bootstrap grid system. While the tables are dynamic and visually appealing, I encounter a problem when adding lengthy strings dynamically. The overflow of text within the table ca ...

htmlcsshtml-tableoverflowbootstrap-4

Incorrect formatting of HTML emails in Outlook

I crafted an html e-mail using the code below: <!DOCTYPE html> <html style="margin:0px;padding:0px;"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> </head> <body style="mar ...

htmlcssemailoutlookhtml-email