WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Functions.php not running properly in IE (12 posts)

  1. sbgloss
    Member
    Posted 9 months ago #

    My site is http://thedebutanteball.com

    Okay, so I have the common problem where my nav menu (which has images and text below) shows up just fine in all other browsers except IE. I tested it on IE10.

    I have narrowed down the problem to my Functions php file. I have a function written there that allows me to add text below the images in my nav bar. This is the code I have in my function.php:

    <?php
    function md_nmi_custom_content( $content, $item_id, $original_content ) {
      $content = $content . '<br /><span class="page-title">' . $original_content . '</span>';
    
      return $content;
    }
    add_filter( 'nmi_menu_item_content', 'md_nmi_custom_content', 10, 3 );

    I have checked my site at http://validator.w3.org/ and everything is coming out A-OK without any errors. So why is the nav bar showing up all misaligned in IE?

    My theme is a child theme based on Pachyderm. The images in the nav bar were put there with a plug-in called Nav Menu Images, which works just fine in IE as long as I don't have the function.php code above in there. But if I take out that code, then I can't put any text below the images. I am pulling my hair out over this.

  2. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    What is your site URL?

  3. sbgloss
    Member
    Posted 9 months ago #

    Sorry, just edited to include more info (accidentally hit "post" too soon). The site URL is http://thedebutanteball.com

  4. Travis
    Member
    Posted 9 months ago #

    Your navigation actually shows up differently on every IE version: http://www.browserstack.com/screenshots/95e1a9b8d7be0fb3d5263df8d0b6f90bee0cb34b

    The first thing I notice wrong is you're using a span tag for your page-titles. The <span> tag is an inline element and inline elements are meant to be used in paragraphs, content etc. Try using a div instead so that it is a block element.

    I set your span tag to display:block and it fixed some of the issues... But you should be using a div instead.

  5. sbgloss
    Member
    Posted 9 months ago #

    Travis, wow, the problem in IE is worse than I thought! I tried changing span to div, but that didn't fix the problem. But I literally just swapped out the word "span" where it appears in the code above and replaced it with "div" so I'm sure there are some extra steps I am missing.

  6. Travis
    Member
    Posted 9 months ago #

    Try adding this to your CSS

    .navigation-main li {
    width: 110px;
    }
  7. sbgloss
    Member
    Posted 9 months ago #

    Travis, thank you so very much for your help. I added that line of code to CSS and now the site is showing up a lot better in all versions of IE except for "Windows 7 ie 10," which still shows the nav bar looking all willy-nilly. And that just happens to be the version of IE I have at work, so I know I will obsess over this until it looks better in ie 10 as well. Blasted IE! I'm going to play around with the width of ".navigation-main li" to see if that helps, since it looks like IE 10 might be adding some extra padding around menu items.

    http://www.browserstack.com/screenshots/9a215021b11e95dc73a161dca45e62be1d9f1e3a

  8. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

  9. sbgloss
    Member
    Posted 9 months ago #

    Will do, thanks, WPyogi. I changed the width on ".navigation-main li" to 105px and already it is looking better across all versions.

    One more question: any idea how to center the menu items across the nav bar without messing up the whole scheme we just came up with? Right now the menu items seem to be aligning left.

  10. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    Try adding this to your CSS:

    .menu-2014-nav-bar-container {
        display: table;
        margin: 0 auto;
    }
  11. sbgloss
    Member
    Posted 9 months ago #

    That did it! Thank you so much for your help, WPyogi and Travis. You saved me from throwing something at my dinosaur PC at work.

    And if you ever need help with anything, I'm not terribly great on the tech side of things (as you can see), but I'm good at getting information out there, so if you ever have anything you need shared widely, give me a holler. Much obliged.

  12. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    You're welcome and thanks for your offer :)! Beautiful site too!

Reply

You must log in to post.

About this Topic