CODEWITHSUNDEEP
csshtml
Alexandr Kurilin
Alexandr Kurilin

Reputation: 7845

div size inconsistent between chrome and firefox

I'm running into an interesting issue in the way a DIV with text occupies space in Firefox and Chrome. I have a bar chart that expands horizontally, each bar is made of a vertical bar and a title underneath.

<div class="verticalChart">
  <div class="singleBar">
    <div class="bar"><!-- contents set by javascript, equal size for all bars--></div>
    <div class="title">What is a fraction</div>
  </div>
  <div class="singleBar">
    <div class="bar"></div>
    <div class="title">Unit Fractions on Number Line</div>
  </div>
[...] <!-- more bars -->
</div>

I have the following CSS applied to the titles below each of the bars to make sure that their bottom is at the same y coordinate. I allow the text to occupy at most 3 lines after which it overflows beyond the visible box:

.verticalChart .singleBar .title {
  font-size: 10px;
  line-height: 1.0em;
  min-height: 3.0em;
  max-height: 3.0em;
  overflow: hidden;
  margin-top: 5px;
  text-align: center;
  white-space: normal;
}

I basically need the height of the title block to be always the same, or the bars will be misaligned. What's interesting is that this seems to work just fine in Firefox:

firefox

but is a no-go on Chrome:

chrome

My suspicion, based on fiddling with the numbers, is that min-height in Firefox acts differently from min-height in Chrome:

What exactly is going on here? Am I perhaps achieving the "min-height" effect of the title block the wrong way? Is there a more cross-browser-friendly approach?

Many thanks!

Edit:

JSFiddle as per popular demand: http://jsfiddle.net/YJHrY/4/

Upvotes: 4

Views: 1596

Answers (1)

Ricardo Casta&#241;eda
Ricardo Casta&#241;eda

Reputation: 5812

As I supposed, you are using a display property with a value of inline-block, those by default are aligned to bottom.
http://jsfiddle.net/YJHrY/5/

Add a vertical-align: top to your .verticalChart .singleBar 

.verticalChart .singleBar {
    /* FrontRow Edits */
    width: 4.4%;
    display: inline-block;
    margin:0 1% 0% 1%;
    float: none;
    vertical-align: top;
}

Upvotes: 2

Related Questions