Internet explorer compatiblity issue

Question

My website is working well on other browser while on Internet explore it's images appear with black box outside it, and also contents are distorted. Can any one suggest me any option to solve this compatibility issue.

www.natureconnect.in

Please open above website in different browser and IE to test the issue.

Banner logo css code

#maneWrap, #overflowFix{width:100%; height:100%; float:left;      position:relative; left:0%;} 
#overflowFix{overflow-x:hidden;} 
#hearderWrap{ position:fixed; width:100%; height:100px; text-align:center; float:left; background:#448f00; top:0px; left:0px; z-index:1000;}  
#logo{ margin:0 auto; margin-top:14px; cursor:pointer;} 
#social-icon{ position:absolute; top:0px; right:0px; height:100%;}
#social-icon a{position:relative; float:left; display:block; padding:40px 40px; border:1px solid #448f00; border-left-color:#66d700; border-top:0px; border-bottom:0px;} 
#slides{ width:100%; height:100%; float:left; clear:both;} 
#slides img{ width:100%;} 
#social-icon a span{position:absolute; width:100%; height:5px; left:0px; bottom:0px;} 
#social-icon a:hover{ border-color:#66d700; background:#4fa302;}        
#social-icon a:hover span{background:#66d700;} 
#maneWrap{margin-top:100px;}

banner logo html code

<div id="logo"><a href="index.html"><img src="images/logo.jpg" /></a></div>
                <div id="social-icon">
                    <a href="https://www.facebook.com/NatureConnectOutdoorsPvtLtd" target="_blank"><img src="images/facebook.png" alt="Facebook" /><span></span></a>
                    <a href="https://twitter.com/natureconnectin" target="_blank" class="twitter"><img src="images/twitter.png"  alt="Twitter"/><span></span></a>
                    <a href="http://pinterest.com/natureconnect/" target="_blank"><img src="images/Pinterest.png" alt="Pinterest" /><span></span></a>
                </div>

score 0 · Answer 1 · answered Apr 03 '15 at 07:16

0

You had given hyperlink to images, have you tried applied border:0px for the images?

answered Apr 03 '15 at 07:16

Ujwala Panchbhai

72
4

tried, but have no effect. original code i have pasted above. – ghoomigo developer Apr 03 '15 at 07:25
have implemented but still result is same. do you think js or html is responsible for that or only css issue is there. – ghoomigo developer Apr 03 '15 at 07:37

score 0 · Accepted Answer · edited May 23 '17 at 12:28

0

I believe it's a default border that Internet Explorer puts around an anchor tag.

<a> <img src="logo.png" /> </a>

Try something like this:

a img{ border: 0; }

it removes all borders from images with anchor tags. Or this: a .className{ border: 0; }

To remove all borders from images with anchor tags and the class name className.

This question was also asked here on Stackoverflow

And here on Stackoverflow

edited May 23 '17 at 12:28

Community

1
1

answered Apr 03 '15 at 07:52

Menno van der Krift

303
1
3
15

Thankyou, border removed , but still images are appearing unmannered here and there on IE – ghoomigo developer Apr 03 '15 at 08:34

Internet explorer compatiblity issue

2 Answers2