Soft hyphen causing a blank line before the widget #64

Closed
Rowno opened this Issue Apr 8, 2012 · 9 comments

4 participants

@Rowno

I don't know if this is intentional, but there's a ­ at the start of the API html output. This is causing an unnecessary blank line to appear before the widget in my page layout.

@paulirish
H5BP member

that's http://www.thecssninja.com/javascript/noscope in action.. for the $shy;

but

there is no reason it should add a new line. :/

@Rowno

You can see it happening on this page in IE <=9. http://rowno.github.com/architect/

If you remove the soft hyphen using the developer tools, you'll notice that the extra line disappears.

@Rowno

Would it be possible to just move the <style> tag to after all the other html? According to this thread on MSDN it solves the problem as well.

@paulirish
H5BP member

cc @ryanseddon you heard of this?

@ryanseddon

Well a soft hyphen in theory will do a line break where needed but will remain invisible otherwise, it just happens that IE treats the following div as a continuation of the text and then says well there's not enough room for both so I'll break here.

However this can easily be fixed by setting the .caniuse div to be display: inline-block and setting width: 100%. Or we can fix this right in the API by not even including the soft hyphen but by making the html come before the style. That will work the same as a soft hyphen.

@paulirish
H5BP member

Cool. I'll do the latter.

Thanks Ryan

@drublic drublic closed this in ce1a548 Apr 10, 2012
@drublic
H5BP member

I've changed the order of HTML and CSS in the API's output. The &shy; is no longer part of it.

I've tested this in IE7, 8 and 9. Works for me with the tests in tests/test.html. Could you please try and test this again? Thanks.

@paulirish
H5BP member

Thank you Hans!

@Rowno

It's working fine for me as well. :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment