Hey,
I have a relatively positioned div within a centred div of width 50%... I mean the outer one is set to width: 50% and margin-left/right: auto. I then have another div with class headerContainer and another one with class header. There is an image with class headerImg within the header div.
It would seem that, when a curved border of 30px is set on the header div and the headerImg img tag, a slight overlap of the border appears on either side... I really dont know how to describe it... Basically, in Google Chrome, the 30px curved border appears perfectly, but sometimes (about 2 out of 3 or 3 out of 4 times) it appears perfectly but the border, where it hits the rightmost and leftmost points, also extends by a few pixels. There is a slight slant at the very tip of either end, but other than that the extra border will be straight. If it were possible to upload image on here then I would show you - but it isnt so I cant without signing up to some image hosting site...
Basically what I want to know is if this happens for anyone else... I know it is only a tiny thing - but I like my sites to be pixel-perfect, not for the odd pixel to be out of place here and there - that just looks bad.
Anyway my source code is as follows (I have simplified it as much as possible...):
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0px;
padding: 0px;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
/*background-color: #E7D2B8;*/
background-color: #eeeeff;
color: #863F2B;
}
.page-container {
position: relative;
width: 60%;
margin-left: auto;
margin-right: auto;
}
.headerContainer {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
position: relative;
clear: right;
}
div.header {
border-top: 2px solid #2e699b;
border-left: 2px solid #2e699b;
border-right: 2px solid #2e699b;
-moz-border-radius-topleft: 30px;
-webkit-border-top-left-radius: 30px;
border-top-left-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
border-top-right-radius: 30px;
}
img.headerImg {
width: 100%;
-moz-border-radius-topleft: 30px;
-webkit-border-top-left-radius: 30px;
border-top-left-radius: 30px;
-moz-border-radius-topright: 30px;
-webkit-border-top-right-radius: 30px;
border-top-right-radius: 30px;
}
form {
position: relative;
width: 100%;
height: 100%;
}
<body>
<form method="post">
<div class="page-container">
<div class="headerContainer">
<div class="header">
<img class="headerImg" alt="Header image" src="/Images/header1.png" />
</div>
<div class="clear"></div>
</div>
</div>
</form>
</body>
Any help would be greatly appreciated.
Regards,
Richard
PS I will see what I can do about uploading an image later, if it is still a problem.