Sl0G Posted May 22, 2011 Share Posted May 22, 2011 The following code will create a border around an image in most browsers. However it refuses to work under IE. IE seems to be adding the border around the image and then adds the padding instead of the other way around. I was hoping someone knew a solution to this problem and how I would get it to function correctly in IE6+.Do not look at the border radius. I am aware that IE does not support it and I doubt there is any method to get around that one using ms filters. img {width:50%;height: 50%; padding:5px; border:1px solid #021a40; border-radius: 5px; -moz-border-radius: 5px; /* Firefox 3.6 and earlier */ background-color:#fff;} Link to comment Share on other sites More sharing options...
Ingolme Posted May 22, 2011 Share Posted May 22, 2011 Are you using a correct doctype declaration on your site? Link to comment Share on other sites More sharing options...
Sl0G Posted May 22, 2011 Author Share Posted May 22, 2011 Are you using a correct doctype declaration on your site?I am using <!DOCTYPE html> the HTML5 DOCTYPE. Link to comment Share on other sites More sharing options...
Ingolme Posted May 22, 2011 Share Posted May 22, 2011 Hmm, maybe Internet Explorer 6 is just not good at putting padding and margins on images.Internet Explorer 7 and 8 shouldn't have a problem with it. Link to comment Share on other sites More sharing options...
Sl0G Posted May 22, 2011 Author Share Posted May 22, 2011 Hmm, maybe Internet Explorer 6 is just not good at putting padding and margins on images.Internet Explorer 7 and 8 shouldn't have a problem with it.All IE versions refuse to put the border around the image. Link to comment Share on other sites More sharing options...
Ingolme Posted May 22, 2011 Share Posted May 22, 2011 I'm going to have to test that myself. I'll come back with the results. Link to comment Share on other sites More sharing options...
Ingolme Posted May 22, 2011 Share Posted May 22, 2011 Here's my test code, it's working properly in IE8 and IE7: <!DOCTYPE html><html><head><title></title><style type="text/css">img {width:50%;height: 50%; padding:5px; border:1px solid #021a40; border-radius: 5px; -moz-border-radius: 5px; /* Firefox 3.6 and earlier */ background-color:#fff;}</style></head><body><div style="width: 200px;height: 100px;"> <img src="http://forums.sega.com/images/statusicon/forum_new-48.png" alt=""></div></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted May 22, 2011 Share Posted May 22, 2011 I've just tested ingolme code, and it looks exactly the same in IE6 (IE6 browser itself, and IE6 in IEtester) to 9, as it does in firefox without rounded corners? the only difference is the png transparency issue in IE6, which shows as blue tinted background. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.