"Yet another of 'those' threads"
Yep!
In a quickie... here's my document structure:
<ol class="list-tiles"> <li><a href="#"><img src="image.png" alt="" title="" /></a></li> </ol>
The <li> Element is repeated by the server. And Image.png has index-like transparency.
And the appropriate CSS (for IE... Standards Compliant browsers get a different CSS file)
.list-tiles {
border: 1px solid yellow;
margin: 0;
padding: 0;
list-style: none;
}
.list-tiles li {
margin: 0;
padding: 0;
display: inline; }
.list-tiles li a {
padding: 1px; margin: 0;
border: none;
}
.list-tiles li a:hover {
padding: 0;
border: 1px solid green;
}
.list-tiles li a img {
margin: 0;
padding: 7px;
margin: auto;
border: none;
width: 100px;
height: 100px;
background: no-repeat center center;
}(the borders are there for edge finding, except for the a:hover, which is my desired effect)
I'm using the Sleight JavaScript to get IE6 to render the PNG files, but there's a problem
...IE ignores the padding and margins oe the img and its container, the AlphaImageLoader only supports scaling the image to fit the dimensions of the img element... which makes the image element bigger than the 114px specified.
"crop" places the image in the top left hand corner, as does "image", thus ignoring the "center center" rule I've defined for the background.
Does anyone have any suggestions? ****************************************************** The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************
