Solved

Problem With Nav Bar in IE11

Posted on 2013-12-31
17
933 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
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 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

770 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