“Medium’s layout broken in IE again”

I don’t yet know why, but I somehow managed to fix it.


“Whoops.”


Today I found Medium’s UI redesigned.

Medium’s redesign as of Nov 26, screenshot on IE11.

But something went wrong.

Notice the sidebar. The layout is broken — the ranking indicator is now collapsed.

Hell yes, inspect element. The list item which includes the ranking indicator and the content has a

display: table;

in its CSS, while inside it, both the button intended to be a circle and the div used to place the content have their display to be

table-cell

. Now what’s up? The expected effect should be like (screenshot on Firefox):

The expected result. Screenshot on Firefox Nightly 36.

It is perfect — it’s just not that case in IE. Now I’m trying to fix it temporarily.

First things first. Below are two lines from the style of the button containing the ranking number on the left.

.list--withIcon .button--circle {
margin-right: 15px;
width: 40px;
}

Change the width to min-width, and something would happen:

Now the width becomes exactly what is expected — 40px. But why should elements with a display of table-cell have margins? I am not clear. In my opinion, an element whose display is table-cell should occupy the height of its nearest parent element whose display is table-row, or table regardless of its height, until its height exceeds that of the parent. Its margins should be ignored.

Margins of table-cells, if necessary, should be achieved using border-spacing, or other workarounds.

Now remove the list-itemInfo’s padding-bottom and border-bottom, and the left button will be a circle, for the list item’s remaining height doesn’t reach beyond 40px.

Padding removed.

Perfect circle. But we need a margin between the circle and the content. Add

padding-left: 15px

to

.list--withIcon .list-itemInfo

. Perfect padding-left. The problem now becomes restoring the padding and border as seen in Firefox.

Padding left added.

Right click the “Styles” tab and select “New rule”. And we’ll style the :after pseudo element of .list-item.

.list-item:after {
display: table-caption;
content:"";
padding-bottom: 18px;
border-bottom: 1px solid rgba(0,0,0,.05);
margin-left: 55px;
}

But notice that its display is table-caption, and in fact, that it is placed at the top of the list-item:

After its padding-top, it is the :after element and the list-item’s own border-top.
“Yet it looks fine, only due to the luck being damn too good.”

Almost done.

Now the padding and border on the first item should be removed.

li:not(.list-item) + .list-item:after {
content: none;
}

Fixed. Compare before and after.

Left: border before the first item. Right: border removed before the first item.

The last thing needed is to restore the vertical align on IE. Add a simple line of

vertical-align: middle;

to the existing

.list--withIcon .button--circle

declaration.

It’s done.

Done the hell.


Browser compatibility yet to be tested.

Show your support

Clapping shows how much you appreciated Joan Xie’s story.