6

I ran into one IE-specific problem that I just can't wrap my head around.

The following HTML and CSS can be seen live in this pen.

:: HTML

<div id="container">
    <div class="dummy">Dummy</div>
    <nav>
        <div id="right">
            <ul>
                <li>Lorem ipsum <img src="http://placehold.it/80x40"> dolor sit amet.</li>
                <li>Anal natrach, ut vas petat, <img src="http://placehold.it/80x40"> doriel dienve.</li>
            </ul>
            <div class="dummy">Dummy</div>
            <div class="dummy">Dummy</div>
        </div>
    </nav>
</div>

:: CSS

/* RESET */
* { margin: 0; padding: 0; vertical-align: top; }
ul { list-style: none; }

/* MARKUP */
#container {
    line-height: 0;
    font-size: 0rem;
    text-align: justify;
    text-justify: distribute-all-lines;
}

#container:after {
    content: '';
    display: inline-block;
    width: 100%;
}

#container > * {
    display: inline-block;
    line-height: 1;
    font-size: 1rem;
    text-align: left;
    text-justify: none; /* does not work */
}

#container nav {
    text-align: right;
}

#right > * {
    display: inline-block;
}

/* COLORS & STUFF */
#container { padding: 10px;  background: #cfc; }
.dummy { padding: 10px; background: #ffc; }
#container nav { padding: 10px; background: #ccf; }
ul { padding: 10px; background: #fcc; }

So, what's the Problem?

The content of the green div is justified, while each child of the very div in turn is given text-align: left;. Those children are: the left dummy div and the bluish nav.

The nav contains a list (red), and two dummies. For the red list's items the text-align is set to right - and there's lies the problem (or at least, there you can see it).

The first image is shifted to the left (and thus overlays/hides some piece of the text). The second image (and thus the whole second list item) is fine. This, however, changes, when changing the text. It seems as if only the image of the longest (meaning widest) item stays where it should be - all other images (if you were to create some more items) are shifted - depending on the list item's width, that is.

Now, why is that so - and how can I fix it?

The following things I found out so far:

  • When setting the li { text-align: left; } the image stays fine in between the two text portions - but I don't get right alignment, of course.
  • When removing text-justify from the #container the image stays fine as well.
  • Setting text-justify either to auto or to none does not seem to work...

Once again: this is just regarding Internet Explorer (9+).

// EDIT
In order to avoid your time being spent on something I'm not interested in, I'll post something more on what I'd like to have.

The final code must

  • keep the current/desired functionality (i.e., justified alignment);
  • work in all major browsers (current version and at least one before that).

The final code must not

  • contain floats;
  • contain absolute/relative positions.

// EDIT
Here is a screenshot of the desired result (Firefox), and one of what I get in IE...

justify-bug

tfrommen
  • 177
  • 2
  • 16
  • I do not have IE, so I should probably shut up.. but back-in-the-days I fought with IE and the weirdest things. This is far out; do not get your hopes up, but some IEhassle solved with margin:0, padding: 0 and float (even if you override it). Since I cannot test it... well. Twopence. – benteh Aug 07 '13 at 17:57
  • **Did you try `zoom: 1;`?** It triggers the [`hasLayout`](http://www.satzansatz.de/cssd/onhavinglayout.html) in IE and fixes most of the CSS specific problems in IE. – Markus Hofmann Aug 08 '13 at 13:08
  • 1
    @MarkusHofmann Yes, I did - without luck. But thanks for the tipp, and the (looong) article. I haven't seen such an amount read on hacky IE-stuff, ever. ;) – tfrommen Aug 08 '13 at 13:22
  • 1
    True. Imagine all the time developers spent on **hacking** IE. A new browser that actually **works** (in regards to IE's bloated amount of _mistakes_) could have been built. – Markus Hofmann Aug 08 '13 at 13:30
  • @tf I'm seeing the same result in IE and could not know the problem, could you insert a picture? – Bhojendra Rauniyar Aug 15 '13 at 05:33
  • @MarkusHofmann: `hasLayout` is only an issue in IE7 and lower. This question is about IE9+. – thirtydot Aug 15 '13 at 15:25
  • @C-Link I just updated the question and included a screenshot (Firefox and IE). – tfrommen Aug 15 '13 at 15:38

2 Answers2

5

Change your text-justify to distribute (Tested in IE10, IE9, Chrome, FF):

text-justify: distribute;

Check out the codepen to see it in action.

Lost Left Stack
  • 1,812
  • 11
  • 14
  • Well, as I wrote, I'm asking this specifically for Internet Explorer. I'm aware of this being an IE-only property - and that's the problem, since this **does not work for IE** (at least not as expected). – tfrommen Aug 08 '13 at 13:25
  • 1
    What is your desired result? Which browser is displaying how you want it to look? – Lost Left Stack Aug 08 '13 at 14:04
  • I just updated the CSS (added the `:after` pseudo-element) to show the desired behavior/layout in almost any other browser than IE. So what is the desired result? Some text on the left, the image, some text on the right - and all of that right-aligned. – tfrommen Aug 10 '13 at 18:02
  • updated the answer above to include new CSS, which I got to work in IE9. – Lost Left Stack Aug 10 '13 at 19:29
  • Thanks for your efforts. However, this is circumventing the problem, since I do want to keep the functionality (meaning: justified alignment). In this simple example you can, of course, get the same appearance by floating one element and aligning the other. That's not what I was hoping for, though. I'll update my question and add a little on that... – tfrommen Aug 11 '13 at 09:16
  • 1
    if it produces the exact results you're looking for, isn't that the answer? You can't do the layout you want, with the methods you're trying, in IE. – Lost Left Stack Aug 11 '13 at 12:42
  • Sorry in advance, I don't mean to be rude or unthankful. This is, however, **not** the answer. As you can imagine, the example is a rather simplified image of the real application. I'm using the built-in functionality that comes with justified alignment to have a nice multi-row fixed-with layout. And all is working finde - until I ran into this problem, that seems to be the result of `text-align: right;` on the _inside_, and `text-align: justified;` and/or `text-justify: disitribute-all-lines;` on the _outside_. It's just not done with some relative and absolute positioning - and it can't. – tfrommen Aug 15 '13 at 15:43
  • **Yes!** This seems to work as intended - and hoped for. Thanks a lot! – tfrommen Aug 15 '13 at 19:15
0

Did you try by setting like this? 

li img{display: inline-block; margin: 0 5px;} /*you could set margin: 1px; only*/

your code pen

Bhojendra Rauniyar
  • 73,156
  • 29
  • 131
  • 187