html - Elements overlap in Internet Explorer -

I have created an HTML page. This page is working fine in Google Chrome and Firefox, but Internet Explorer generates some problems. Used to be. This is what I am getting in Chrome and Firefox

< P> But in Internet Explorer I'm getting this:

Here's my HTML and CSS code

  & lt; Div class = "login" & gt; & Lt; Div class = "jo-del clearfix" & gt; & Lt; Div class = "hide-on-sm" & gt; & Lt; H2 & gt; GRATIS THUISBEZORGD! & Lt; / H2 & gt; & Lt; / Div & gt; & Lt; Nav id = "primary_nav_wrap" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; IMG src = "IMGS / Euro 1 page" /> & Lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; IMG src = "IMGS / EUURO" /> & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; IMG src = "IMGS / EUURO" /> & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; IMG src = "IMGS / EUURO" /> & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li style = "margin-top: -3px;" & Gt; & Lt; A href = "#" & gt; & Lt; Img src = "imgs / flag1.png" /> gt; & Lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; Img src = "img / flagpng" /> & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; Img src = "img / flagpng" /> & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; & Lt; Img src = "img / flagpng" /> & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt; & Lt; / Div & gt; & Lt; Div class = "account" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; INLOGGEN & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; | & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; REGISTREREN & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; | & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Minus account & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

The CSS code is

  .hide-on-sm img {float: left; } .Jo-Del {display: block; Text align: right; } .Jo-Del IMG {float: left; Margin-top: 12px; Margin-left: 0 pixels; }. Jo-Dell H2 {color: # 858085; Swim left; Font-family: "calibrium", non-serif; Font-size: 15px; Font weight: 700; Margin-left: 47px; Margin-top: 13px; Text-transform: uppercase; }  

(may not be suitable for work.)

Please take a look and tell me the solution

This has been done. I came to know that I was actually a font that was not loaded in IE. Now its loading and works fine! Thanks