an Li element is out of the div in firefox but iside the div in chrome?

Question

in the below page you will find an element

 <li role="presentation">
  <a href="#ragab" aria-controls="ragab" role="tab" data-toggle="tab">
   <img class="img-thumbnail" src="photos/clients/ragab.jpg" />

is out of the Row in firefox but inside the row in chrome ??

any idea why?

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

Your <li> elements are display: table-cell (from Bootstrap).
Your <img> elements are max-width: 100% (from your style.css).
The w3.org spec states that max-width does not apply to inline elements, so you will get inconsistent behavior across browsers. See this answer: Why do Firefox and Opera ignore max-width inside of display: table-cell?
You can put width: 100% instead.

edited May 23 '17 at 12:29

Community

1
1

answered Aug 26 '15 at 12:24

Attila Szasz

3,033
3
25
39

THANK YOU so much it worked and i'm trying to read more to fully understand it – Mohamed Abdelmohsen Aug 26 '15 at 13:04

an Li element is out of the div in firefox but iside the div in chrome?

1 Answers1