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.
Well I have kind of solved the problem. The header now just has text in it and has no top border, nor does it have any curved corners. The problem is still there but I am evading it. I have used a background image instead of the header image.
I will mark this as an answer – even though it does not actually resolve the issue. It has been reported on Google Chrome though.