Vertical-align interferes with superscript

Homepage Forums Pro Support Forum Blackoot Pro Blackoot Pro Bug Reports Vertical-align interferes with superscript

Vertical-align interferes with superscript

This topic contains 10 replies, has 2 voices, and was last updated by  Cheyenne 1 year, 5 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #18161
    Vertical-align interferes with superscript

    Cheyenne
    Participant

    Hi Iceable,

    I promise, this is the last post for today. 🙂

    I noticed recently that when I try to use superscript in my content, it doesn’t seem to work. <sup> renders with the text aligned with the “bottom” of the text in the same line.

    I’m fairly certain the culprit has to do with the following CSS in the theme:

    a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
        vertical-align: 0px;
    }

    If I “Inspect Element” on the text I had coded to be superscript and then uncheck this part of the CSS, the text pops up like it should (though the alignment is still wonky; the link portion is even higher than the non-linked portion. Plus, all the non-superscript body text also jumps around, as do many other elements of the theme). This vertical-align CSS also interferes with some other page design things I have tried to do (don’t have any examples handy though). Overriding the problem with my own custom CSS has proven to be difficult to the point where I’ve now given up. 🙁

    I also noticed you have some separate CSS for sup but it appears to be overridden by the other CSS I pasted above (which also has a sup reference in it).

    I’m not sure why you are vertical-aligning so many things to 0px but given the behavior, surely this is a bug?

    You can see this best here: http://www.ilfcorp.com/intaki/tidbits/

    Also see attached. 🙂 Thanks!

    • This topic was modified 1 year, 6 months ago by  Cheyenne. Reason: Typo
    Attachments:
    You must be logged in to view attached files.
    #18169
    Reply to: Vertical-align interferes with superscript

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hi,

    This vertical-align: 0px is indeed what prevent the sup tags from being displayed as expected, but it seems to come from your Custom CSS

    Please review your custom CSS (Appearance > Theme Options > Main Settings > custom CSS) and make sure to remove the “sup” tag from the list of selectors for this CSS statement and it should fix it.

    Once you get this fixed, you may want to add this bit to Custom CSS, it should play even better since you are using links inside the sup tags:

    sup a { vertical-align: baseline; }

    #18173
    Reply to: Vertical-align interferes with superscript

    Cheyenne
    Participant

    Hmm. I’m going to have to look at this again because that code didn’t come from me; I never write CSS that way with so many tags lumped together like that.

    I’ll get back to you!

    #18212
    Reply to: Vertical-align interferes with superscript

    Cheyenne
    Participant

    I thought about this over the course of the day and I realize I got myself confused and so totally screwed up explaining the bug. My bad, sorry!

    And, maybe this isn’t a bug. It might be a support request. I’m not sure. :p

    So, let’s backtrack. The CSS I posted is yours (sort of) but you are right that it is currently in my custom CSS. I copied it from blackoot.min.css:

    a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video
    {margin:0;padding:0;border:0;font:inherit;vertical-align:top}

    A similar block of CSS also exists in blackoot.dev.css.

    I was trying to override what your CSS was doing with vertical-align:top being applied to so many tags. I now remember that changing it to 0px was a “stop-gap” solution that solved one problem I had but introduced others, like with sup.

    …and I would go into more specific detail but have now discovered that something has tripped my host’s firewall into blocking my IP address. I can’t get at any of my websites. Arg. (This is the second time this has happened in the last three weeks and it’s super frustrating.)

    Not very helpful for you on this topic right now but in any case, I can now recall thinking to myself that if I could just get rid of the vertical-align property in its entirety from your CSS that it would have made what I was trying to do a lot easier, rather than me trying to brute force override it for each unique use case I ran into.

    #18213
    Reply to: Vertical-align interferes with superscript

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Ah yes, this is indeed in the theme’s CSS (at the very beginning in our modified version of E. Meyers’ CSS reset), and now I understand what you were trying to do with this Custom CSS you added.

    I suggest you change this part of your Custom CSS to vertical-align: baseline (instead of 0px, as “baseline” is the actual the default value), and just remove the sup tag from the list.
    Doing so will effectively cancel this part of the theme’s CSS you want to get rid of, while keeping just the sup tag aligned to the top as it should be.

    So you have this in your custom CSS:

    a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
        vertical-align: 0px;
    }

    Change it to:

    a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
        vertical-align: baseline;
    }

    Of course, once your hosting issues are sorted – unfortunately I cannot help with this!

    I will also look into this specific part of of the theme’s CSS more closely, to see if maybe it could be changed to baseline instead. Now that you mention it, I’m actually not quite sure that “vertical-align: top” is the best option for all of these tags, so thanks for the heads up!
    This will probably require some testing though to make sure it doesn’t cause a chain reaction and breaks other things throughout the entire styling!

    #18215
    Reply to: Vertical-align interferes with superscript

    Cheyenne
    Participant

    Thanks Iceable. I’m pretty sure I tried that already and it didn’t work for what I was trying to do at the time, but there were so many things I tried it’s hard to know now. 🙂

    Once my host fixes the firewall issue I can test again!

    #18268
    Reply to: Vertical-align interferes with superscript

    Cheyenne
    Participant

    Welp. I can’t figure this out now. 🙂 Serves me right for not saying anything about it at the time when it was fresh.

    I nixed the CSS from my custom sheet that I had taken from your files, and replaced it with sup a { vertical-align: baseline; } as you suggested, which fixed the alignment problem with the superscript text. Thanks!

    But the other alignment problem I had encountered that “vertical-align: 0px” had been put in to solve didn’t reoccur so I’m stumped. Oh well. If it’s all working well and none of my pages are broken then I’m happy. 🙂

    If I run into it again I’ll be sure to swing by right away. :p Thanks Iceable.

    #18272
    Reply to: Vertical-align interferes with superscript

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Maybe this was connected to a minor glitch that was fixed in a recent update, or related to a plugin you no longer use?
    Anyway if everything works fine now there’s no reason to worry too much 🙂
    And of course, feel free to hit me up if anything seems to go sideways!

    #18517
    Reply to: Vertical-align interferes with superscript

    Cheyenne
    Participant

    Alas, I found it.

    Please go here: http://incyanity.net/beginner-crochet-tips/

    Scroll all the way down to the section titled “9. Invisible Color Changes” and look at the italic text under step 2. The word “next” in my browser (FF 48.0.2) is not aligned properly to the rest of the text in that same line. It looks almost like it’s trying to be superscript but when you inspect the element you’ll see the word is just coded with em.

    This misalignment also occurs on the italic text in step 6, but strangely enough, not in step 11, nor with italic text elsewhere in this post. The only difference I can see between steps 2 and 6 versus 11 is that “next” appears on the first line of text in 2 and 6 whereas in 11 it’s several lines down.

    If I disable vertical-align: top in the browser Inspector, all of the text on the page shifts slightly and the instances of “next” that were misaligned before are now aligned properly.

    Seeing this triggered my memory regarding what the very first issue was that I encountered with this that then led me down the road of trying to override the vertical-align CSS: on ilfcorp.com, I had noticed that text formatted as links was aligned upwards like the “next” text in the post linked above. So then I went and put in vertical-align: 0px in my CSS to fix that, but that broke sup and some other things, and here we are. The link issue on ilfcorp.com seems to have resolved itself somehow but it seems this vertical-align: top coding is still slightly problematic elsewhere.

    Hope this helps!

    #18525
    Reply to: Vertical-align interferes with superscript

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Now that’s pretty interesting!

    I had a look and I confirm I can see the same thing in Firefox (everything looks fine in Chrome however).
    I had a close look at it and I think I can even tell why it doesn’t look the same whether it is on the first line (step 2) and several lines down (step 11):

    It is not only the “vertical-align: top”, but also this interacts with the “line-height: 130%” applied to the li elements these em’s are wrapped in.

    If you disable this line-height statement for li’s, then it doesn’t make much of a difference overall, but it does fix the misalignment of the em’s.

    So there you have it, a CSS snippet for an instant fix on your site:

    li { line-height: initial; }

    And a big thank you for spotting this pretty odd glitch!
    Now this also goes to the future updates’ todo list, we’ll review the usefulness of the li’s line-height and consider reverting the default vertical-align to “baseline” and review everything that needs to be adjusted from there to avoid further glitches!

    #18535
    Reply to: Vertical-align interferes with superscript

    Cheyenne
    Participant

    Thank you! And, you’re welcome! 🙂

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Vertical-align interferes with superscript’ is closed to new replies.


PayPal Verified
Secured by PayPal
Secure Credit Card payments powered by Stripe
SiteLock