Background Offset on Small Elements
I have an element which is as follows:
<div style='...'>!</div>
I want it to be 10x x 10px with the text centered.
I can use CSS to do this, and it works fine in all the browsers.
When I use PIE though, it seems to create the background at an offset of 2px or so.
I cannot easily add padding or anything like that, since it will affect the size of the div.
I believe that adding a wrapper element position:relative helped, but I don't want to have to do that....
Try viewing this in IE:
Code:
<head>
<style>
.a {
color: white;
width: 10px;
height: 10px;
font-size: 8px;
display: inline-block;
border: 0;
text-align: center;
padding: 0;
margin: 0;
background: #F62013;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F62013), to(#801B19));
background: -moz-linear-gradient(#F62013, #801B19);
-pie-background: linear-gradient(#F62013, #801B19);
behavior: url(/PIE.htc);
}
</style>
</head>
<body>
<a class='a' style="">!</a>
</body>
If you comment out the -pie-background attribute, the box will shift up and to the left about 2px. So the VML background is just offset...
Any thoughts? I'm looking into it a bit now...
Thanks,
Cary
Forums
