WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Social icons not displaying correctly in IE (20 posts)

  1. soulslayer
    Member
    Posted 7 months ago #

    Check here to see what's displaying in IE

    https://dl.dropboxusercontent.com/u/1882794/header.png

    Social icons are displaying one per line, I need them side by side. What can I do to resolve this?

  2. harmonyinfotech
    Member
    Posted 7 months ago #

    Without seeing the site/code, it won't be easy to find what is the exactly problem.

  3. soulslayer
    Member
    Posted 7 months ago #

    It's in a hidden mode right now. What code would you need to view? It's not visible by the public yet, but I can copy and paste any code that might need to be edited.

  4. harmonyinfotech
    Member
    Posted 7 months ago #

    If you can enable it temporarily to be publicly viewable then it will be easier to debug.

  5. soulslayer
    Member
    Posted 7 months ago #

    Would it be possible to have it viewable for just a period of time so someone could take a look, and then I could switch it back?

  6. harmonyinfotech
    Member
    Posted 7 months ago #

    Sure you can enable it for 30 minutes which should be enough to check out the site and debug it if the issue is simple.

  7. soulslayer
    Member
    Posted 7 months ago #

    Done

    It's http://www.howiedunnit.com/

    Problem is only seen in IE

    I will re-enable the private status at 5pm EST. Thanks!

  8. harmonyinfotech
    Member
    Posted 7 months ago #

    What is the plugin you are using for it?

  9. soulslayer
    Member
    Posted 7 months ago #

    Plugin for what? Blocking the site from view? It's called "Coming soon"

  10. harmonyinfotech
    Member
    Posted 7 months ago #

    No, the plugin to show the social media icons.

  11. soulslayer
    Member
    Posted 7 months ago #

    its not a plugin...it's the social links inside the customizr theme settings.

  12. harmonyinfotech
    Member
    Posted 7 months ago #

    Ok, in that case you may need to edit the header.php file. See if you can find the line with this code

    <div class="social-block span5">

    Try removing the span5.

  13. soulslayer
    Member
    Posted 7 months ago #

    There is no span5 inside header.php

  14. soulslayer
    Member
    Posted 7 months ago #

    I had to add some custom css for other things...could that be it?

    .navbar-inner .social-block {
    padding: 0px 550px;
    margin: 10px 0px;}

    .row-fluid .span9 {
    width: 73.359%;"}
    .navbar .navbar-inner {
    z-index: 200;
    margin: 34px 5px 10px;
    border: 0px none;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
    padding-left: 5px;
    padding-bottom: 40px;}

    .format-icon:before {
    display: none;
    }
    .entry-summary.format-icon:before,
    .entry-content.format-icon:before,
    article.page .format-icon:before,
    article.format-standard .format-icon:before,
    article.format-gallery .format-icon:before,
    article.format-aside .format-icon:before,
    article.format-chat .format-icon:before,
    article.format-audio .format-icon:before,
    article.format-video .format-icon:before,
    article.format-status .format-icon:before,
    article.format-quote .format-icon:before,
    article.error-404 .format-icon:before,
    article.format-image .format-icon:before,
    article.format-link .format-icon:before {
    display: none;
    }

    ul, ol, dl {
    margin: 0;
    padding:0 0 1em 15em;
    }

  15. harmonyinfotech
    Member
    Posted 7 months ago #

    padding: 0px 550px;

    The value 550px for left and right padding is too high. Try reducing it.

  16. soulslayer
    Member
    Posted 7 months ago #

    That number is actually not affecting it in IE at all. Changing that only moves the icons left and right...it does not alter them being vertically aligned...which is the problem.

  17. ElectricFeet
    Member
    Posted 7 months ago #

    I'm not at my desk right now, so cannot debug it, but @harmonyinfotech is right, the 550px padding is almost certainly your problem (and even if it isn't THE problem, it's certainly A problem). The padding should normally be in single digits. 550px will send it half way across a large-ish screen.

    The icons ar probably so padded-out that they are wrapping onto the next line. (i presume when you say it makes no difference you're changing it up and down slightly, when it needs changing radically.)

    As I say, this is speculation, as I'm not able to verify it online.

    You should also remove the row-fluid span9 rule. Apart from having a syntax error in there, the spans are defined for the underlying twitter bootstrap; redefining them will have knock-on unintended effects all over the site/theme.

  18. soulslayer
    Member
    Posted 6 months ago #

    But where do you remove the span9 rule?

    And I've tried removing all the css surrounding the padding...its still not showing correctly inside IE. Its fine in all browsers except IE.

  19. harmonyinfotech
    Member
    Posted 6 months ago #

    What is the css you have kept currently?

  20. ElectricFeet
    Member
    Posted 6 months ago #

    The row-fluid span9 rule that you should remove is the second rule in the custom css that you posted above.

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.