2

Here, I am using latest bootstrap v3.2.0

When I have call display: table-cell; CSS in div block. So, Will not work max-width: 100%; CSS for inside image of it div block in Firefox. It is working fine in Other browser.

Demo: http://jsfiddle.net/Q7742/2/embedded/result/

Here is my HTML

<div class="container">
<div class="table-container">
<div class="col-table-cell col-lg-4"><img src="//farm1.staticflickr.com/22/28331349_fd0fbadbbd_z.jpg?zz=1"></div>
<div class="col-table-cell col-lg-5">B</div>
<div class="col-table-cell col-lg-3">C</div>
</div>
</div>

CSS

.col-table-cell.col-lg-5 {
    background: #ddffdd;
}
.col-table-cell.col-lg-3 {
    background: #ffffdd;
}

img {
    display: block;
    height: auto;
    max-width: 100%;    
}

@media (min-width: 1200px) {
.table-container {
        display: table;
        width: 100%;
    }

    .table-container .col-table-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }
}
HDP
  • 4,005
  • 2
  • 36
  • 58
  • This might be the same issue, like this one: http://stackoverflow.com/questions/2923710/why-do-firefox-and-opera-ignore-max-width-inside-of-display-table-cell – Trader Aug 06 '14 at 11:31
  • The problem is that the table cells have no widths defined, so the img should be 100% of, what? – Mr Lister Aug 06 '14 at 11:33
  • @MrLister Here, i have using bootstrap v3.2.0 so, there already width define in percentage. – HDP Aug 06 '14 at 11:39

2 Answers2

4

Your table needs to be fixed for it to work in firefox:

Updated Fiddle:

http://jsfiddle.net/Q7742/6/embedded/result/

@media (min-width: 1200px) {
    .table-container {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    .table-container .col-table-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }
}
Stephan Wagner
  • 990
  • 1
  • 8
  • 17
0

Remove float: none; that is like below one.

.table-container .col-table-cell {
    display: table-cell;
    vertical-align: middle;
}
amarnath
  • 785
  • 3
  • 19
  • 23
  • if, I will remove `float: none;` So, content is not vertical middle. I work with this- http://stackoverflow.com/questions/25140284/vertical-align-middle-content-with-bootstrap-3/25140454#25140454 – HDP Aug 06 '14 at 11:43