CODEWITHSUNDEEP
htmlcsssafari
Jake
Jake

Reputation: 107

Safari renders inlines as blocks with :before and :after pseudo elements as display:table-row

I'm testing on Safari 5.1.7 (on Windows), and surprisingly I don't get the same problem in Chrome. Also works with FF19 and IE9.

I am trying to align two pieces of text above and below a word inside a <span>. It works, but as soon as my <span> contains other inline elements, they break up on separate lines.

Here's the code:

.c { display: inline-table; vertical-align: middle; }
.c:before { content: 'above'; display: table-header-group; }
.c:after { content: 'below'; display: table-footer-group; }

Works fine: <span class="c">word</span>, renders as
above
word
below

Doesn't work: <span class="c"><b>word1</b><b>word2</b></span>, renders as
above
word1
word2
below

instead of (as in all other browsers):
above
word1word2
below

Here is a demo: http://jsfiddle.net/3LuHx/11/

I have tried

but all with the same result.

It does work if I wrap the <b>'s in yet another <span> and set that to display:table-row, but since the :before and :after in the first place made my DOM scripting so much easier, I would rather not introduce any new elements.

Did anyone have this problem before and come up with a fix?

Upvotes: 1

Views: 1758

Answers (2)

chitzui
chitzui

Reputation: 4098

I just fixed this by adding float: left to the elements. Hope that helps!

Upvotes: 0

Jake
Jake

Reputation: 107

Well, I ended up inserting an extra span with display: table-row -- seems to be the only fix for this.

Upvotes: 1

Related Questions