Leave comments with its corresponding rule when posible

[axelcostaspena]

I know it can be hard to decide to which rule referes a comment sometimes, but if the rules are each in one different line, it's obvious.

So when reordering this:

#secciones-img-list li {
    position: relative;
    display: inline-block;
    font-size: 0; /* NOTE this hides white space between nodes */
    overflow-y: hidden;
    margin: 0 4px 4px 0;
    width: 152px;
    border: #ddd solid 4px;
    max-height: 152px;
    vertical-align: top;
    *display: inline; /* HACK IE7 only */
    *zoom: 1; /* HACK IE7 only */
}

i get comments out of position:

#secciones-img-list li {
    position: relative;
    display: inline-block;
    *display: inline; /* NOTE this hides white space between nodes */
    overflow-y: hidden;
    margin: 0 4px 4px 0;
    max-height: 152px;
    width: 152px;
    border: #ddd solid 4px;
    vertical-align: top;
    font-size: 0; /* HACK IE7 only */
    *zoom: 1; /* HACK IE7 only */
}

After breaking comments in a stylesheet on a project from a workmate, I can't keep using plugin while this isn't fixed :(

Best regards.

[miripiruni]

Hi @axlgithub

First of all: why are you using "star hack" instead of using separate files for IE7 and other browsers? It may look like this:

some.ie7.css

#secciones-img-list li {
    *display: inline; /* HACK IE7 only */
    *zoom: 1; /* HACK IE7 only */
}

some.css

#secciones-img-list li {
    position: relative;
    display: inline-block;
    font-size: 0; /* NOTE this hides white space between nodes */
    overflow-y: hidden;
    margin: 0 4px 4px 0;
    width: 152px;
    border: #ddd solid 4px;
    max-height: 152px;
    vertical-align: top;
}

Second: You can try CSScomb v. 2.13 online or WebStorm plugin wrap (avaliable at site). There is not this bug.

[anton-rudeshko]

Thanks for report!

[axelcostaspena]

@miripiruni I'm mantaining old ugly websites, as you can expect, I deal daily with bad coding practices, much worse than borwser CSS hacks.. hahah