CODEWITHSUNDEEP
htmlcss
grimmus
grimmus

Reputation: 513

Inline divs width issue

I am trying to get a layout like below and need to work with a html structure that cannot be modified.

enter image description here

The fiddle below works fine in non IE browsers but IE 9 and 10 are stretching 100% for each button.

I am using display:table and table-cell. I think the 100% width on each button is causing the issue but cannot find another solution that streches the buttons evenly, aligns the text and hovers properly.

I cannot change the html structure.

http://jsfiddle.net/9seuhjmt/ 

  .c-control-latch-buttons.tri-option-latch-buttons span.c-label {
      display: table-cell;
      width: 100%;
  }

I have a feeling i'm over complicating things so any tips much appreciated.

Upvotes: 1

Views: 57

Answers (1)

lu-bhz
lu-bhz

Reputation: 191

is this what you're looking for?

http://jsfiddle.net/9seuhjmt/19/

it's behaving the same in my IE 9 and Chrome now.

I changed the table-cell to 1/3-ish of the area (34 to avoid a dark border when hoovering):

.c-control-latch-buttons.tri-option-latch-buttons span.c-label {
  display: table-cell;
  width: 34%;

IE wasn't accommodating all cells with 100% width. But when changing to 34% it was displaying the -moz-linear-gradient background colours (grey). The hover on IE was problematic due to the fallback background and found on the original css. I removed those and it's working here. If you can keep plain colours then removing these styles could be the solution.

IE 9.0.8 printscreen

Upvotes: 1

Related Questions