CSS Issue with IE 11

  • Resolved rwfelty

    (@rwfelty)


    7 years, 1 month ago

    I made a minor change to my MyKnowledgeBase search bar in CSS and now the search form does not vertical align top in IE with the menu links, looks fine in Chrome and FireFox. Any help sorting this out would be appreciated.

    You can see it at; https://www.waitinginoklahoma.org

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Guido

    (@guido07111975)

    Hi,

    I notice you’ve added a menu in the search bar with CSS class searchbar.

    Remove the H3 title underneath it because you don’t use it:

    
<h3 class="searchbar-title"><?php echo $search_title; ?></h3>

    Add this CSS on the custom CSS page or in theme stylesheet:

    
.searchbar {width:49%; float:left;}

    (you’ve used display: inline-block but this isn’t enough)

    Guido

    Thread Starter rwfelty

    (@rwfelty)

    Thanks Guido!

    It was the H3 piece, but I added the other for good measure.

    I really appreciate your help!

    Rick

    Theme Author Guido

    (@guido07111975)

    Hi Rick,

    Great!

    To make the menu look a little bit nicer, please consider adding this:

    
.searchbar ul {margin:5px 0 0;}
.searchbar ul li {margin:0 20px 0 0;}

    And for mobile screen:

    
@media screen and (max-width:767px) { 
  .searchbar {width:100%; clear:both; text-align:center;}
  .searchbar ul {margin:0 0 5px;}
  .searchbar ul li {margin:0 10px;}
}

    Guido

    ps. to avoid confusion you could also rename the .searchbar into .searchbar-menu ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS Issue with IE 11’ is closed to new replies.