Solved

Problem With Nav Bar in IE11

Posted on 2013-12-31
17
889 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
  • 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
 
LVL 8

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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 9

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 9

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 9

Expert Comment

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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

920 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now