CODEWITHSUNDEEP
javascripthtmlcss
Shumail
Shumail

Reputation: 3143

Strange behavior - <li> menu item moving to next line in Internet Explorer, good on other browsers

I have a simple ul/li navigation menu in my wordpress site. It looks good on Chrome, Firefox but when website opened in Internet Explorer, it behaves strangely and pushes the "Blog" menu item on next line where as it's fine and on same line on other browsers.

Link: http://construction.windoverdevelopment.xyz/construction/

I understand that this is not an upto mark question but please support with this issue - I haven't been able to resolve it. Thanks in advance

Screenshot 1: (in Chrome - whole menu in same line)

enter image description here

Screenshot 2: (in IE - BLOG is moved on next line) BLOG is moved on next line

The css for navigation is:

.main-navigation {
    background: rgba(0, 70, 127, 0.95);
    margin: 0;
    padding: 0;
    -webkit-box-shadow: 0 17px 14px -8px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0 17px 14px -8px rgba(0, 0, 0, 0.75);
    box-shadow: 0 17px 14px -8px rgba(0, 0, 0, 0.75);
    /*

border-top: 2px solid #fff;

border-bottom: 2px solid #fff;

*/
}
.main-navigation li {
    margin: 0;
    padding: 5px 0;
    font-size: 16px;
}
.main-navigation li:last-child {
    position: absolute;
    top: 95px;
    right: 30px;
    background-color: rgba(255, 255, 255, 0.75);
}
#menu-main-menu>li.menu-item:last-child>a {
    color: #00447C;
    font-family:"Open Sans", Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-transform: none;
    padding-top: 10px;
}
.main-navigation li ul li {
    padding: 0;
}
.main-navigation li ul li:last-child {
    position: relative;
    top: 0;
    right: 0;
    background-color: transparent;
}
.main-navigation li > a {
    display: block;
    padding: 0 35px;
}

Upvotes: 1

Views: 251

Answers (3)

Ozan Deniz
Ozan Deniz

Reputation: 1087

I think sum of child controllers width exceeds the parent div container width. You can optimize padding value for IE browser. But better way is that remove the rule that works different in IE and Chrome.

In style.css; (line: 535)

.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
     font-family: "adrianna-condensed-demibold",sans-serif;
     font-style: normal;
     font-weight: 600;
     border: none;
     display: none;
     padding: 3px 0 2px;
     text-align: center; /*This one is problematic*/
     width: 100%;
}

text-align: center; rule works different in IE and Chrome you can adjust this rule.

Upvotes: 1

Ondřej Kratochvíl
Ondřej Kratochvíl

Reputation: 21

You can try this only for IE, for specific version use some CSS hack.

.main-navigation li > a {

  padding-right: 34px;

}

Upvotes: 0

eyegropram
eyegropram

Reputation: 672

The rule:

/*media all*/
.main-navigation li > a {
    display: block;
    padding: 0 35px;
}

looks to be causing your issue, adjust the right padding for that last element.

A css reset would likely have helped to resolve this, but it can be a PITA to deal with adding one late in the game.

Upvotes: 0

Related Questions