CSS border on outside of div - other border on the inside

[mattgaunt]

Hey everyone

Im again trying to get a frame with curved edges but using Google Web Toolkit to make it dynamically resize but the main container in the middle puts it's border on the outside of the div rather than the center.

Does anyone have any clues as to why this is happening? I'm hoping it just a slight hick-up in the CSS on my part. Anyway its uploaded here

http://www.matchboxcalendar.com/dev/MatchBox.html

any suggestions would be greatly appreciated

Gaunt

 

[davetherave2]

well from a quick look it seems that for two of the corners you have not set them to have a curved image in the corner.

I use something similar on my site and here is the css I use:

.DatesLabelBottomRight 
{
	background: url(Images/bottomrightLightBlue.gif)  100% 100% no-repeat;
}

.DatesLabelBottomLeft 
{
	width:400px;
	background: url(Images/bottomleftLightBlue.gif) 0 100% no-repeat #006F53;
}


.DatesLabelTopLeft 
{
	background: url(Images/topleftLightBlue.gif) 0 0 no-repeat;
	
}
.DatesLabelTopRight 
{
	background: url(Images/toprightLightBlue.gif) 100% 0 no-repeat;
	
}

and this is how they are positioned on the screen:

<div class="DatesLabelBottomLeft">
                    <div class="DatesLabelBottomRight">
                        <div class="DatesLabelTopLeft">
                            <div class="DatesLabelTopRight">
                                <div class="Dateslabel">
                                      <!-- Date time aspx controls are loaded in here -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

hope this helps.

 

[mattgaunt]

Cheers for the reply

I was trying to only have 2 corners and 2 straight edges - I'm a weird designer

Anyway i managed to re-do the code in GWT and its working although I have to set the height in CSS to 6px for the top right and bottom left div's to cancel out the 4px border.

is this just some CSS bug?? cos if i set the height to 10px for the div and have a 4px border, then the 10px x 10px images dont sit flush with the other borders

Gaunt

Edit : Soz realised i didnt say anything but thank you for the reply davetherave2 - greatly appreciated

 

[davetherave2]

not a problem.

In addition I have found this site quite useful and informative for all things css related

http://bonrouge.com/~home

I am still relatively new to all things web so it has helped me out with a few things and I have noticed my site development times reducing as I use to spend days trying to the styling correct.