img padding is not working on ie7

Discussion in 'CSS' started by raredev, Jun 16, 2007.

0
  1. #1
    i wonder why the padding doesnt work to give space between border and image on ie7. it works fine on firefox though.
    did someone had any experience with this? if so, would you please share it.
    thank you

    
<html>
<head>
    <title></title>
<style type="text/css" media="screen">
	img.frontend_image {
	    border: 1px solid #ccc;
		padding: 4px;
	}
    a:hover img.frontend_image {
		background: #ddd;
		border-color: #ddd;
    }
</style>
</head>
<body>
    <a href="#"><img src="http://ams01.umicache.com/p/virb.com/crop_90x90/PageImage-123361-586874.jpg" class="frontend_image" alt=""></a>
</body>
</html>
    HTML:
     
    raredev, Jun 16, 2007 IP
  2. leede

    leede Guest

    Messages:
    3,381
    Likes Received:
    128
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I have come across this one, bugs inside the border and padding stuffs in IE7.
    Finally I redesign and avoid such troublesome parts!!!!
    It's a waste of time....
     
    leede, Jun 16, 2007 IP
  3. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    437
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Use a proper and complete DOCTYPE declaration, then wrap your link around a DIV (since inline elements cannot be direct children of the BODY), and then set your anchor and image to block via CSS and assign widths and heights to them in your stylesheet.
     
    Dan Schulz, Jun 16, 2007 IP
  4. raredev

    raredev Peon

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    it works when i desperately integrate it with my script template which have validated structure, especially DOCTYPE you've mentioned. thanks a lot :D:D:D

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    HTML:
     
    raredev, Jun 17, 2007 IP