OK, after some work on this and thanks to help given, I'm now very close to where I want to be with this.
In Safari, Chrome an Firefox, the corners are perfect - thanks Jeff!
In IE, the right-top and right-bottom are now in place. BUT the left-top and left-bottom are foxing me. I can't seem to get them to shift any further to the left than what you see here -
www.brummiesfans.com/photos/I've rationalised the CSS now to read:
.navbar {
background-color: #ffdd00;
background-image: url("images/bg_navbar.gif");
padding: 0px 0px 0px 17px;
margin:0px 10px 0px 10px;
border-radius: 5px;
-moz-border-radius: 5px;
}
.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
margin: 0 0px;
}
span.corners-top {
background-image: url("images/corners_left.png");
background-position: 0 0;
margin: 0 0;
}
span.corners-top span {
background-image: url("images/corners_right.png");
background-position: 99% 0;
}
span.corners-bottom {
background-image: url("images/corners_left.png");
background-position: 0 100%;
margin: 0 -5px;
clear: both;
}
span.corners-bottom span {
background-image: url("images/corners_right.png");
background-position: 99% 100%;
}
I can shift the to-left and bottom-left corner graphics to the right by altering the span.corners-top background-position, from "0 0" to "anything positive 0" (Likewise with span.corners-bottom) HOWEVER as soon as I introduce a negative value in there, thinking that the graphic will move to the left from where it currently is, it seems to move up rather than left. I don't know why.
If anyone can solve this puzzle and let me know how to get the two final corner pieces slotted into their right places I'd be very grateful
Thanks again
Martin