Solved

Problem With Nav Bar in IE11

Posted on 2013-12-31
17
997 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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
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

Industry Leaders: 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!

Question has a verified solution.

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

Suggested Solutions

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

679 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