Rounding off the top corners of my layout boxes

[mighty midget]

Hi,

I have been looking into this for a while now and im not sure where to start i was just wondering how to go about rounding off the top corners of my layout boxes etc... I have read a few threads but not sure what to do exactly.

[RescoCCC]

You will need to create a new image for use on your sideboxes. The image being used is called tile_back.gif. It is also being used for your EZ-Pages header. So, you will need to create an image of a different name and edit your stylesheet to reflect that name:

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #FFA3A2;
background-image: url (../images/tile_back.gif);
padding: 0.5em 0.2em;
background-repeat: repeat-x;
}

You would make the image 150px wide and upload it to your template images folder. You would also need to remove background-repeat: repeat-x;

To make rounded corners on images, I use this site:

http://www.roundpic.com

[RescoCCC]

You can see rounded images I created at that site here:

http://www.oozix.com/store3

[gjh42]

Since this is purely a styling issue and not related to useability, you can make a simple addition to your stylesheet that will round the sidebox corners on all modern browsers (even IE9:). (Older browsers will just show square corners.)


.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #FFA3A2;
background-image: url (../images/tile_back.gif);
padding: 0.5em 0.2em;
background-repeat: repeat-x;
border-radius: 7px 7px 0 0;
}

This will round the top left and top right corners with a 7px radius. Adjust to taste.

[RescoCCC]

Since this is purely a styling issue and not related to useability, you can make a simple addition to your stylesheet that will round the sidebox corners on all modern browsers. (Older browsers will just show square corners.)


.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #FFA3A2;
background-image: url (../images/tile_back.gif);
padding: 0.5em 0.2em;
background-repeat: repeat-x;
border-radius: 7px 7px 0 0;
}

This will round the top left and top right corners with a 7px radius. Adjust to taste.

That won't work in IE8. Needs a little help from a small script. There are a couple different ones out there. I use PIE.htc. Would look like this:

behavior: url (PIE.htc);

PS: I learned something new, though. I didn't know border radius worked on images. Would have saved me a lot of time!

[gjh42]

It works on background images - not sure about foreground images. It might depend on whether the image is the element being rounded, or is contained inside a wrapper that is rounded. In the latter case it doesn't really work right.

I did say all "modern" browsers:) If IE8 or earlier support for this appearance feature is important, then you do need special treatment for IE.

[RescoCCC]

Yeah, I'm not sure if any version of IE can ever be considered "modern".

[mighty midget]

Hi,

have tried it and its close to being right. the 150px is not quite wide enough and i keep getting a repeat pattern in the main center boxes . Also my search box is a seperate image as it got edited so will have to do that seperately. Any more advice would be great. Have reset to its original for now though.

[gjh42]

If you're going to use a rounded image, you need to make it the same width as your sideboxes display, and separate the stylesheet rules to have different backgrounds for sideboxes and centerboxes.

Did you try the border-radius declaration?

[RescoCCC]

Okay, I just tested it in IE8. It doesn't work. It does work when using PIE.htc, but it needs position relative added. Like this:

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-color: #xxxxxx;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
border-radius: 7px 7px 0 0;
behavior: url (PIE.htc);
position: relative; }

You also need to edit this and remove the top border:

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #xxxxxx;
border-bottom: 5px solid #xxxxx;
margin-top: 1.5em;
}