CODEWITHSUNDEEP
htmlcssinternet-explorer-10
Ferrell427
Ferrell427

Reputation: 17

Incompatibility issues with Internet Explorer 10

I finished making my very first website, it's for a club at my school: http://suar.orgsync.com/org/aimuncc

The website displays perfectly in Chrome 33, but on IE10 the logo has a border and is misplaced and social media links in the toolbar have borders around them that I didn't intend. CSS for the logo:

#logo
{
    float: left;
    position: fixed;
    height: 50px;
    margin-top: 1%;
    margin-left: 1%;
    z-index: 5;
}
.soc_links
{
    float: right;
    margin-top: 20px;
    margin-right: 5px;
    z-index: 5;
}
#soc_net
{
    display: inline-block;
    height: 25px;
    z-index: 5;
}

.nav_bar
{
    position: fixed;
    display: block;
    margin-top: -8px;
    right: -8px;
    width: 101%;
    min-width: 60%
    height: 80px;
    max-height: 80px;
    border-bottom: 5px solid #66AA33;
    background-color: #FFFFFF;
    z-index: 5;
}

HTML for logo and social links: http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

<div class= "nav_bar">
    <a href= "[[page:home]]" title= "AIM | Home"><img id= "logo" src= "https://d1q9wbuypc40mm.cloudfront.net/xy332ag7s8dv0d0.jpg"/></a><!--add a link to home-->
    <ul class="nav_container"
        <li id= "nav_links"><a href= "[[page:home]]">HOME</a></li>
        <li id= "nav_links"><a href= "[[page:Executives]]">EXECUTIVE BOARD</a></li>
        <li id= "nav_links"><a href= "[[page:News]]">NEWS</a></li>
        <li id= "nav_links"><a href= "[[page:Calendar]]">CALENDAR</a></li>
        <li id= "nav_links"><a href= "[[page:Getinvolved]]">GET INVOLVED</a></li>
        </ul>
    <div class="soc_links">
    <ul>
        <li id= "nav_links"><a href= "https://www.facebook.com/aimuncc" title= "Like AIM on Facebook!" target="_blank"><img id= "soc_net" id="facebook" src= "https://d1q9wbuypc40mm.cloudfront.net/8bni8ebstpojwes.png"/></a></li>
        <li id= "nav_links"><a href= "https://www.linkedin.com/groups/Advancing-Innovative-Minds-8104445/about" title= "Join AIM on LinkedIn!" target="_blank"><img id= "soc_net" id="linkedin" src= "https://d1q9wbuypc40mm.cloudfront.net/ughjm7k8coiskx9.png"/></a></li>
        <li id= "nav_links"><a href= "https://twitter.com/AimUncc" title= "Follow AIM on Twitter!" target="_blank"><img id= "soc_net" id="twitter" src= "https://d1q9wbuypc40mm.cloudfront.net/b6wp6r8eps2ukhe.png"/></a></li>
        <li id= "nav_links"><a href= "http://instagram.com/uncc_aim" title= "Follow AIM on Instagram!" target="_blank"><img id= "soc_net"  id="instagram"src= "https://d1q9wbuypc40mm.cloudfront.net/okujfqu9nlkly5p.png"/></a></li>
    </ul>
    </div>
</div>

Please let me know if you need more info Thanks in Advance!

Upvotes: 0

Views: 72

Answers (2)

visigoth
visigoth

Reputation: 208

Add border: 0 and text-decoration: none to the logo and social media links.

Upvotes: 0

David
David

Reputation: 4873

For the border issue, add this to your style sheet:

img {border:0;}

For the logo issue, IE is actually doing it right IMO. Remove the position fixed from the logo, and then make the padding on the navigation smaller to where you want it to be. I'm guessing you want no left margin, but that's up to you.

Upvotes: 1

Related Questions