Solved

Problem With Nav Bar in IE11

Posted on 2013-12-31
17
1,030 Views
Last Modified: 2014-01-05
Hi, the last item drops down in my nav bar here, to make a second line.

Should be all on one line.

http://dyi.li/44H
IE11.png
0
Comment
Question by:Computer Guy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
  • 3
  • +1
17 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39748427
Simple solution would be to add a new class

li.last {
margin-left:0
}

Doesn't seem to have any bearing of the look
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 39748470
Hi, I added that and it does not work.



/* IE11 Fix */
li.last {
margin-left:0
}

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39748520
Seems to be a font size issue. And since you do not specify any width for the LI you have your problem
You can either do it this way, making sure this is after you stylesheet

<!--[if IE]>
<style>
#menu > li {
         margin-left:0
}
</style>
<![endif]-->

Or since your site is a static width then specify the width's on the LI's
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Expert Comment

by:Brandon Lyon
ID: 39748712
Assuming you're referring to the top-right two links, if their container is floated you'll want to specify a width for the container. If you don't then they could wrap since auto may only calculate based on the width of the largest individual item.
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 39748951
Hi, I tried that code. Still nothing.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39748979
I should know better, conditional statements are dropped !

Amend
#menu > li {
    margin-left: 5px;
    padding-top: 10px;
}

to
#menu > li {
    margin-left: 5px\;
    padding-top: 10px;
}
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 39749002
Check that again, it altered the font code. and it looks smaller and not aligned to middle.

Thanks!
0
 
LVL 58

Expert Comment

by:Gary
ID: 39749030
Hmmmm, I don't think its gonna work in IE11

Here's another hack

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#menu > li {
    margin-left: 5px;
    padding-top: 10px;
}
}


You will still need the other IE conditional statement for <=IE9
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 39749127
Which one?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39749150
<!--[if IE]>
<style>
#menu > li {
         margin-left:0
}
</style>
<![endif]-->
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 39749167
The IE 11 problem is still happening.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39749171
margin-left needs to be 0 not 4px
0
 
LVL 10

Accepted Solution

by:
Ishaan Rawat earned 500 total points
ID: 39749461
fixed that...

change your li style to ...
or add the following in the bottom of your stylesheet...

#menu li{
display: inline-block;
float:none !important;
padding-bottom: 10px;
position: relative;

Open in new window


and change...

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
#menu > li {
    margin-left: 0px !important;
    padding-top: 10px;
}
}

Open in new window

0
 
LVL 3

Author Comment

by:Computer Guy
ID: 39749547
Hi! Thanks!

I actually did this
/*@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {*/
#menu > li {
    margin-left: 0px !important;
    padding-top: 10px;
}
/*}*/

Open in new window


I found when I had the @ media screen line non commented, I had issues in Chrome and in Firefox with the height of the navigation bar cut in half or so. Just want to make sure doing that is Ok? It looks goodf in IE 11, Chrome and Firefox.
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39749980
As your wish :D
0
 
LVL 3

Author Comment

by:Computer Guy
ID: 39750158
What is the @media line do?
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39750954
nothing as such ..!!
Just targeting the IE browsers..!!
Glad it worked..!!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Editing .asp website 5 30
Div not showing up 6 32
modify font on ninja form 1 25
formatting issues with wordpress site...verbondtraining.com 15 16
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to dynamically set the form action using jQuery.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question