I have created a round-corner box by laying rounded corner images over each corner. White space in the images cover the square corners, leaving only the rounded ones.
How well it works depends on the content. Depending on the content, the corners at the bottom occasionally are positioned 1 pixel too high and they fail to cover the original squared border.
All is fine in firefox. Just IE is the problem.
Here's a link:
http://www.aocd00.dsl.pipex.com/files/cart.html
You as you can see in IE you can see the bottom edge of the original corner.
The margin of the center element is set to 6px. Any even number means the corner isn't positioned far enough down, and the border shows. Use any odd number and it looks OK. What is going on?
Code:
- Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
#CartOverview {
width:150px;
color: #800080;
font: normal bold 10pt Verdana;
text-align:center;
background-color:White;
border: solid 1px gray;
position: relative;
padding: 0 3px;
}
#CartContent {
width:150px;
font: normal 8pt Verdana;
color: #555555;
display:block;
border: solid 1px gray;
background-color: white;
padding: 0 3px;
position:relative;
}
.CartDetail {
width:150px;
font: bold 8pt Verdana;
font-size: x-small;
color: #555555;
text-align:left;
padding-bottom: 5px;
}
.CartDetail a{
color: black;
}
.CartPrice {
font: bold 10pt Verdana;
color: #800080;
text-align: center;
background-color: white;
border-top: solid 1px gray;
border-bottom: solid 1px gray;
}
.CartOverview a:hover {
color: orange;
text-decoration: none;
display:block;
border-top: solid 1px #547A98;
background-color: WHITE;
}
#cartCornerTL
{
position: absolute;
top: -1px;
left: -1px;
}
#cartCornerTR
{
position: absolute;
top: -1px;
right: -1px;
}
#cartCornerBL
{
position: absolute;
bottom: -1px;
left: -1px;
vertical-align:bottom;
}
#cartCornerBR
{
position: absolute;
bottom: -1px;
right: -1px;
}
</style>
<body>
<div id="CartOverview"><img src="images/cornertl.gif" id="cartCornerTL" >Shopping Cart<img src="images/cornertr.gif" id="cartCornerTR"></div>
<div id="CartContent">
<div class="CartDetail">Insect Assassin 20 watt Fly Killer x 1
<br>@ £49.35<span style="font-size: xx-small;"> + VAT</span>
</div>
<div class="CartDetail">Combination Heater 12N x 1
<br>@ £252.84<span style="font-size: xx-small;"> + VAT</span>
</div>
<div class="CartPrice"> Subtotal = £302.19<br><span style="font-size: xx-small;">+ VAT</span></div>
<div style="padding:0 5px; font-weight:bold; color:red; text-align:center;">Delivery: FREE</div>
<div style="font-size: x-small; padding: 0 5px; text-align:center;">(To UK Mainland)</div>
<center style="margin-top:6px">
<form style="margin:0; display:inline" name="clear" method="post"><input type="submit" value="Clear"></form>
 
<form style="margin:0; display:inline" name="checkout" method="post"><input type="submit" value="Checkout"></form>
</center>
<img src="images/cornerbl.gif" id="cartCornerBL" >
<img src="images/cornerbr.gif" id="cartCornerBR">
</div>
</body>
</html>
Rounded corners 1 pixel out in IE
Jan 17th, 2006, 13:59
Similar Threads
