1

As I've seen, I can create several rows in only one container. The problem comes with IE when not all elements have the same height. The following example shows a 3x3 grid in IE8. Notice the 4th element appears after the 5th.

http://tinypic.com/r/f27iur/5

Fortunately I can solve that with a simple "clear:both" in the first element of each row...

<div class="container">
    <div class="item">one (Lorem ipsum dolor sit amet, consectetur adipisicing elit.)</div>
    <div class="item">two</div>
    <div class="item">three</div>
    <div class="item">four</div>
    <div class="item">five</div>
    <div class="item">six</div>
</div>

…

@include border-box-sizing;

.container {
    background: #f00;
    @include container;
}

.item {
    background:#ccc;
    @include span-columns(1,3);
    &:nth-child(3n) {  @include omega; }
    &:nth-child(3n+4) { clear: both; }
}

This works on IE8, but in IE7 the elements of the second row appear aligned at the top and I don't know how to solve this.

http://tinypic.com/r/2mfybmb/5

alex
  • 11
  • 3
  • pics don't help so much. to see what's going on In IE8, could you use something loke : liveweave.com , or produce a codepen (both are free and can be used anonimously) – G-Cyrillus Jun 18 '13 at 23:58
  • 1
    IE7 doesn't support the `:nth-child` selector, nor does it support the box-sizing property. – cimmanon Jun 19 '13 at 00:27
  • I've produced a codepen [link](http://cdpn.io/knBax) already compiled from SCSS to CSS. I've uploaded another screenshot [link](http://tinypic.com/r/dh5t7b/5) and the original entire code too [link](http://snk.to/f-ctcsd88p). I avoided the `:nth-child` selector and removed the `box-sizing` property because is not important for this problem. Thanks. – alex Jun 19 '13 at 11:04
  • Actually, you can make IE 7 support nth-child. The solution for that is described in this answer, please have a look and vote: http://stackoverflow.com/a/16732064/901944 – Andrey Mikhaylov - lolmaus Jun 19 '13 at 10:20
  • Thanks lolmaus, but I think that is not the trouble. Please read my comment below the question. – alex Jun 19 '13 at 11:12
  • Please use http://sassbin.com to provide SASS code of what you're trying to do. – Andrey Mikhaylov - lolmaus Jun 19 '13 at 12:17
  • And don't forget to write a follow-up comment below, so that i don't miss your update. – Andrey Mikhaylov - lolmaus Jun 19 '13 at 12:18
  • Here you are. [link](http://sassbin.com/gist/5816005/) – alex Jun 19 '13 at 17:16

0 Answers0