Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Problem With Nav Bar in IE11

Posted on 2013-12-31
17
Medium Priority
?
1,181 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
URL rewriting in AWS CloudFront

A quick how-to guide to implement with a Lambda function!

 
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 2000 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

Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

Question has a verified solution.

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

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.
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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…

715 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