Forum Moderators: not2easy
****CSS RULES***
#image-wrapper {
background: url(images/shadow1.gif) no-repeat bottom right;
float: left;
margin: 10px 0 0 10px;
}
#image-wrapper img {
margin: -5px 5px 5px -5px;
background-color: #fff;
padding: 4px;
border: 1px solid #a9a9a9;
}
**THE HTML THAT THE ABOVE CSS IS APPLIED TO**
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Shadow 1</title>
<link rel="stylesheet" type="text/css" href="shadow1css.css"/>
<head>
<body>
<div id="image-wrapper"><img src="images/owen1.jpg" width="300" height="300" alt="Hargreaves"/>
</div>
</body>
</head>
All of which works fine in modern standards compliant browsers. However according to the book two more rules are required to the #image-wrapper img selector for it to work in IE6. Which is very true. With these rules added the CSS now should look like this:
#image-wrapper img {
margin: -5px 5px 5px -5px;
position: relative; /*NEW RULE ADDED*/
display: block; /*NEW RULE ADDED*/
background-color: #fff;
padding: 4px;
border: 1px solid #a9a9a9;
}
What the book doesn't explain is what these two rules are actually doing to IE6 to make it work.
Can anyone help?
without display: block; the image is an inline element and as such is formatted like text so it will have a gap below it which is the space that text would require for the descenders of letters like p, j, q etc.. the usual fix for this is to set the vertical alignment to bottom or to make the image into a block level element, and in this situation the block image is fine as it enables the image wrapper to hug the image which is what you need. Also in this situation the vertical alignment fix doesn't suit because it doesn't work with position: relative;
not sure about position: relative; I can't remember why it's needed, it's possibly the use of negative margins, without it does the image "crop" at the top and left? - if so that's why it's there to help IE get it's stacking order sorted out. It's just clarifying that the image is to display relative to/offset from the wrapper
FYI, IE7 needs display: block, but not the relative positioning, though it doesn't do any harm it being there.
Suzy
yes the image does crop top left.
Thanks for the explanation.
Really helps to know why things work as opposed to just knowing they do.
Erdy.
