views:

64

answers:

2

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.

A: 

You might be talking about this: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed

if not, possible to show an example?

pleunv
I have put it on my Dads website - but please note that it does not occur on this domain (i.e. dont go looking for it to look at the source code) - it is on a local website. http://www.heritageartpapers.com/images/chrome-long-border.png
ClarkeyBoy
It just occurred to me what it may be - it may be if I am setting the border to some other radius before setting it to the radius it should display, so its setting the border twice and just not clearing the first border... will just have a look.
ClarkeyBoy
ok it isnt that - however if I move the headerImg down 10px (by applying padding-top: 10px to div.header) then the long border stops showing and the ends of the top border of div.header appear out of line with the sides. If I apply padding-top: 20px to div.header then the border appears perfectly each time. I just dont get this...
ClarkeyBoy
Have posted the code on my Dads website - http://www.heritageartpapers.com/border-bug.html... it occurs there too. You may have to refresh the page a few times for it to occur as it doesnt occur every time.
ClarkeyBoy
A: 

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.

ClarkeyBoy