I am using standers tables in my containers css file (dont shoot Lee).  I have a customer that want rounded corners. I broke the look she wants into a lefttop, righttop, leftbottom, rightbottom, horizontal, side image.

My problem is how to place them using the css file. If I use the background-image, background-poistion, background-repeat commands, they only work for the first image. 

I searched on Internet and found answers but quite frankly didnt understand them.  I tried cutting and pasting the answers into my css dnn file, and it didnt understand them either

All help appreciated.

Thank you
Mark

Hello,

Basically you need to find tags where you can specify a CSS class and then create a background image for that tag. So for instance you may first of all have a div tag where you can specify a background image for the top left corner, inside the div tag may be a H2 tag where you can specify a background image for the top right corner, you then have the main content, and then below this you will need two other tags for your bottom left and bottom right background images.

Does this make sense?

Thanks,

Can you give me an example?

body {
font:normal 76% georgia,helvetica,verdana,tahoma,arial,"sans serif";
}

.header_class{
/* thisi should be the area that has the action buttons */
}

/* this is the container wrapper, it contains the default color for the print*/
.dialog {
width:100%;
margin:0px auto;
min-width:20em;
color:#000;
}

.dialog .hd .c,
.dialog .ft .c {
font-size:1px; /* ensure minimum height */
height:13px;
}

.dialog .ft .c {
height:14px;
}

.dialog .hd {
background:transparent url(tlor.gif) no-repeat 0px 0px;
}

.dialog .hd .c {
background:transparent url(tror.gif) no-repeat right 0px;
}

/* These handle the sides of the container */
.dialog .bd {
background:transparent url(mror.gif) repeat-y 0px 0px;
}

.dialog .bd .c {
background:transparent url(mor.gif) repeat-y right 0px;
}

/* this is the content area of the container */
.dialog .bd .c .s {
margin:0px 2px 0px 2px;
background:#fff ;
padding:1em;
}

/* Bottom of the container */
.dialog .ft {
background:transparent url(blor.gif) no-repeat 0px 0px;
}

.dialog .ft .c {
background:transparent url(bror.gif) no-repeat right 0px;
}

.act_but
{
background-color:white;
}
/* content-specific */

.dialog h1 {
/* header */
font-size:2em;
margin:0px;
padding:0px;
margin-top:-0.6em;
}

.dialog p {
margin:0.5em 0px 0px 0px;
padding:0px;
font:0.95em/1.5em arial,tahoma,"sans serif";
}

html>body .dialog pre {
font-size:1.1em;
}

http://www.chickensplus.com/ Why am I getting such different result depending if you are using Firefox or IE, and does anyone know how I can fix it.

The first is Html the second is the css. view site to see results.

ok,  it looks as though the problem is caused because your pages are using quirks mode rather than standards compliance mode, ie: you need to enable XHTML transitional mode DOC Type.

This prevents ie from using the old box model problem, have a read of this article for info on the box model:
http://www.communitymx.com/content/...53B6F20B41

and have a look at:
How to select DOC TYPES in DotNetNuke 4.4

Quirks, Standard Compliance modes and Doc Types

Thanks,

these articles may provide some inspiration:
http://www.alistapart.com/articles/...omcorners/

http://www.vertexwerks.com/tests/sidebox/

http://www.modxcms.com/simple-round...boxes.html