Firefox struggles to properly position tables that exceed a width of 767 pixels when using Bootstrap

I have designed a basic website featuring a Bootstrap navbar with tabs. Each tab displays a table. You can view the layout here.

Everything functions correctly in Chrome 45 and IE 11 on Windows 8.1.

However, when using Firefox, the tables are positioned to the right of the navbar when the window width exceeds 767px.

<div id="content">
<ul class="nav nav-pills nav-tabs nav-justified navbar-header">
    <li class="active"> <a href="#">Tab 1</a>
    </li>
    <li> <a href="#">Tab 2 </a>
    </li>
</ul>
<div>
    <h1>test</h1>
    <table class="table table-bordered table-striped table-responsive" id="azubiTable">
        <thead>
            <tr id="head">
                <th>1st col</th>
                <th>2nd col</th>
                <th>3rd col</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1.1</td>
                <td>2.1</td>
                <td>3.1</td>
            </tr>
            <tr>
                <td>1.2</td>
                <td>2.2</td>
                <td>3.2</td>
            </tr>
        </tbody>
    </table>
</div>

cssfirefoxtwitter-bootstrap-3

Answer №1

In my opinion, the problem lies in float clearing not functioning properly in Firefox.

By including clear:both to the div containing the table, it resolves the issue in Firefox.

Answer №2

Insert nav and table within the col-*-12 element as shown below:

<div id="content">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <nav>
                <ul class="nav nav-pills nav-tabs nav-justified navbar-header">
                    <li class="active"> <a href="#">Tab 1</a>

                    </li>
                    <li> <a href="#">Tab 2 </a>

                    </li>
                </ul>
            </nav>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <table class="table table-bordered table-striped table-responsive" id="azubiTable">
                <thead>
                    <tr id="head">
                        <th>1st column</th>
                        <th>2nd column</th>
                        <th>3rd column</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1.1</td>
                        <td>2.1</td>
                        <td>3.1</td>
                    </tr>
                    <tr>
                        <td>1.2</td>
                        <td>2.2</td>
                        <td>3.2</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

View Fiddle

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

Adjusting image size to fit divs depending on orientation

I am currently working on a project where I need images to fill a div while still maintaining their aspect ratio. To achieve this, I am utilizing jQuery to determine if the images are portrait or landscape, and adjusting the width or height accordingly. H ...

javascriptjqueryhtmlcss

The combination of DOMDocument and DOMXPath is a powerful duo

I am currently working on converting CSS to inline using DOMDocument and DOMXPath. However, I'm encountering an issue where the HTML I provide is not being recognized as valid XML. Is there a way for me to configure these functions to ignore unknown ...

phpcssregexphpquery

Bootstrap5.2 is not functioning properly on mobile devices

While Bootstrap functions well on a PC and even in the mobile view on a PC, it seems to be malfunctioning when accessed on a phone directly. The bootstrap navbar and buttons are unresponsive on mobile devices. Check out how it looks on a PC: https://i.ss ...

htmlcssbootstrap-5

An image tag acts in a similar way to a div element

I'm a bit confused about how the picture tag works in relation to an img tag when its parent has 'display: flex' applied. When I set width: 50% on the img tag, it doesn't make the image 50% of the div but rather 50% of the picture eleme ...

htmlcss

Having issues with implementing the Bootstrap form-check-inline feature

I have been attempting to utilize the form-check-inline feature from Bootstrap Forms without success, as it seems to be stacking checkboxes vertically instead of inline: https://i.sstatic.net/paLTC.png This is the code snippet I am working with: <h1& ...

htmlcssbootstrap-4

What should be done if an image is not wide enough to stretch it to match the width of the window?

When the image is not full screen, it looks fine but when it's viewed in full screen, there's a white area on the right side which is likely due to the image not being large enough. Is there a way to automatically stretch the image so that its wi ...

javascripthtmlcssimagenext.js

Attempting to position a centrally aligned div block containing images towards the left side

I'm having an issue with aligning multiple images on my webpage. I want them to be left justified when the page is resized, while still keeping the div block centered. Currently, they are all being centered: See below: Here is the HTML and CSS code ...

htmlcss

Using various span elements with distinct alignment within an h1 tag in Bootstrap 5

How can I nest three span tags inside an h1 tag, aligning them differently? The first on the left, the second in the center, and the third on the right. Can this be achieved using Bootstrap or does it require custom CSS? ...

htmlcssbootstrap-5

jQuery cannot access a hidden CSS property

I'm working on a form for my new project and have assigned the same class to all input fields. In my CSS file, I've set the text to be capitalized and it displays correctly. However, when I use jQuery's .val() to get the value of the field, ...

javascriptjqueryhtmlcss

What are some ways to remove scroll bars from an iframe?

I'm having trouble with scroll bars appearing in my iframe when inside a fancy box. I have tried everything to remove them without success. For example, you can view the issue here: http://jsfiddle.net/t4j3C/ No matter what I try, nothing seems to w ...

jquerycsshtmliframe

Tips for deciding on the appropriate CSS for an Angular 6 navbar component

I am currently working on an angular 6 application where users are assigned different roles that require distinct styling. Role 1 uses Stylesheet 1, while Role 2 uses Stylesheet 2. The Navbar component is a crucial part of the overall layout structure of ...

cssangularstylingangular-router

Design question: how can we create a layout where the Header, Content, and Footer all have expanding background colors but still maintain centered content?

In my layout, I wanted everything to be centered using the "margin=0 auto" technique. However, I also needed the header and footer to expand to both sides when the browser window is enlarged. The challenge was that if I centered everything, the black backg ...

csslayoutcolorsbackground

Arrangement of images in an array

Here's the scenario I'm facing. https://i.stack.imgur.com/FbAfw.jpg So, I have an array of images that I want to use to create a gallery with a specific layout. I've tried using grid and playing around with :nth-child(even) and :nth-child( ...

javascriptphpcssarraysforeach

Firefox is blazing its own trail by rising to the top while other browsers are

Have you ever noticed that when an image becomes too large, Firefox pushes them up while other browsers push them down (which is what I prefer)? The first scenario demonstrates how Firefox handles it, the second scenario shows how other browsers handle it ...

htmlcssfirefox

Fixing issues with internal web page connections (#x) present in the HTML code (href="#x" id="x")

Can anyone come up with a brilliant solution as to why my internal links are not functioning properly on a webpage? I've coded the HTML with the usual <a href="#link"><button>Some Text</button></a> .... bunch of content .... & ...

htmlcss

CSS Problem: Background Color Not Showing Up in Table Rows

Check out my fiddle below: https://jsfiddle.net/teo7auv3/ I'm facing a challenge where I want to change the background color of the entire table row (TR) to red when there are validation errors. The problem seems to be related to this code snippet: ...

csscolorsbackgroundcss-tables

Choose a Range of DOM Elements

My challenge is to select a range of DOM elements, starting from element until element. This can be done in jQuery like this: (Source) $('#id').nextUntil('#id2').andSelf().add('#id2') I want to achieve the same using JavaScr ...

javascripthtmlcss

Creating a Cross-Fade Effect in easySlider 1.7 using the Jquery Plugin

Want to achieve a cross-fade effect in easySlider 1.7 Jquery Plugin? Check out this tutorial Easy Slider 1.7 for guidance. Appreciate any help, thanks! ...

jquerycssjquery-pluginseasyslider

Create waypoints on multiple elements

I am working on implementing a unique feature using a div tag with the class "dipper." <div class = "dipper"> <p>Peekaboo</p> </div> As part of this implementation, I have included a script that triggers the display of the "dipper ...

javascriptjquerycssjquery-waypoints

How to centralize a div using jQuery when its width is not known

I have a fixed position div that I want to center in my browser window. Although it can be done with CSS, the issue is that I am dynamically changing the element's width multiple times (due to loading content via ajax), which means the width changes ...

jquerycsshtmlcenter