Rounded corner Boxes in CSS

[digitalimages]

I have been working on a custom 404 page for my site which would be a consistant style similar to the rest of my site. I can do this but then I started playing with using CSS for creating a box with rounded corners like here:
http://digitalimages.x10hosting.com/new404.htm
but as you can see one corner is not in the right place and also I'm not sure how to move the box to the center of the page. :dunno:
The CSS for the box is below: (not my code)
Suggestions for getting that floating corner in the right position and for centering the entire box would be appreciated.
Thanks,
wp

.dialog {

margin:0px auto;
min-width:8em;
max-width:640px;
color:#fff;
z-index:1;
margin-left:12px;
margin-bottom:0.5em;
}

.dialog .content,
.dialog .t,
.dialog .b,
.dialog .b div {
background:transparent url(dialog2-blue-800x1600.png) no-repeat top right;
_background-image:url(dialog2-blue.gif);
}

.dialog .content {
position:relative;
zoom:1;
_overflow-y:hidden;
padding:10px 12px 10px 10px;
}

.dialog .t {
/* top+left vertical slice */
position:absolute;
left:0px;
top:0px;
width:12px; /* top slice width */
margin-left:-12px;
height:100%;
_height:1600px; /* arbitrary long height, IE 6 */
background-position:top left;
}

.dialog .b {

position:relative;
width:100%;
}

.dialog .b,
.dialog .b div {
height:30px;
font-size:1px;
}

.dialog .b {
background-position:bottom right;
}

.dialog .b div {
position:relative;
width:12px;
margin-left:-12px;
background-position:bottom left;
}

.dialog .hd,
.dialog .bd,
.dialog .ft {
position:relative;
}

.dialog .wrapper {

position:static;
max-height:1000px;
overflow:auto;
}

.dialog h1,
.dialog p {
margin:0px;
padding:0.5em 0px 0.5em 0px;
}

.dialog h1 {
padding-bottom:0px;
text-align: center;
}



a:link { color: #ffffff; text-decoration: none; }

a:visited { color: #ffffff; text-decoration: none; }

a:active { color: #808080; text-decoration: none; }

a:hover {
color: #000000;
text-decoration: none;
font-family: Arial;
font-size: 15px;

 

[mfurqanabid]

Use the following code in CSS

.element {
border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
}

 

[Anna]

that is not supported by older browser though, but it is the easiest way to make rounded corners.

 

[freecrm]

I have to admit, after about 1/2 hour trying to understand the mixed up html and alternative css, I am at a loss!

Also where is his element class????:dunno:

to get your object to center, you would usually set margins as follows:

.dialog{
margin: 10px auto 10px auto;
width: 600px; /*or whatever*/
}

I'm fascinated to see how the images in your css are used for this so I'll be keeping a close eye on this thread.

I can do rounded corners - but not like this!

 

[misson]

It's the align="center" on a containing <td> that's causing the corner to center. I hope you're in the process of replacing the tables with semantic HTML and CSS. After that, you can center the rounded rectangle.

A problem like this is a great subject for a minimal test case, which will help you narrow down on the problem. You can also use Firebug to easily alter the document structure and styling in an attempt to fix the layout.

 

[Teensweb]

Can you post the html too?

 

[digitalimages]

Thanks for the replies and yes I am aware that the code is a mess. I will attempt to correct this if I ever use this. I was just trying to get this to work and view corectly at least in Firefox.
http://digitalimages.x10hosting.com/new404x.htm
this is the revised version...which seems to have things in place. On a larger 22" screen the box is still on the left side of the screen but on a 17" it is close to the middle.
For teensweb just do a right click on the page and view the source code form there or go to view and select "page source" in Firefox or "source" in IE
wp

 

[freecrm]

I've had a quick look at your revised page (IE7) and the box is about 10-20 px from the right... In addition, the bacground to your corners are white! arrgh.

FF is working fine and centered (1024x768)

Chrome is also working well.

I have noticed that all versions, when re-sizing the window, have a fixed left margin, so however you alter this value, it will never be right for all browsers, which is why I suggested the margin: auto technique.

By the way, if you want to test your site on multiple browsers, check out browsershots.org

 

[mfurqanabid]

YOu can also make a round corners for old browsers line ie6 using javascript libraries

View: http://www.phatfusion.net/roundedcorners/index.htm

 

[digitalimages]

I fixed the margins:auto and at least it displays ok in Firefox. Still IE7 is a mess.

http://digitalimages.x10hosting.com/new404.htm

 

[garrettroyce]

IE has some weird quirks. For example, in Mozilla, if you were to incorrectly not clear a floating <div>, it will float over the edge of its container. IE assumes that you made a mistake and adjust the size of the container to fit the <div> Mozilla also is known to not work well with 'absolute' positioning.

Your 404 page looks better than the rest of my site combined.