Viewing Thread:
"Rounded Corners."

Nearly got them.

Apart from bloody Opera.

Can anyone help. The bottom right in opera is about 5 pixels out, inwards.

[URL]http://img242.echo.cx/img242/9839/corner9ei.jpg[/URL]

Also, any tidying up tips would be appreciated. I'm *sure* I shouldn't need all those html>body's.

-=-=-=-=-
#menuarea {
background: transparent;
float: left;
width: 200px;
margin: 0 0 5px 5px;
}
#menuarea .menu {
border: 1px solid #444;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px 15px 5px 15px;
background: #ddd;
}
html>body #menuarea .menu{
margin-bottom: 0px;
}

#menuarea .menu .menuheader{
float: left;
background: transparent url("../i/tl.gif") no-repeat top left;
margin-left: -8px;
margin-top: -6px;
height: 9px;
width: 9px;
}

html>body #menuarea .menu .menuheader{
margin-left: -16px;
}

#menuarea .menu .tr{
float: right;
margin-right: -8px;
margin-top: -6px;
background: transparent url("../i/tr.gif") no-repeat top left;
height: 9px;
width: 9px;
}

html>body #menuarea .menu .tr{
margin-right: -16px;
}

#menuarea .menu .menufooter{
float: left;
margin-left: -8px;
margin-top: -3px;
background: transparent url("../i/bl.gif") no-repeat top left;
height: 9px;
width: 9px;
}
html>body #menuarea .menu .menufooter{
margin-left: -16px;
}

#menuarea .menu .br{
float: right;
margin-top: -3px;
background: transparent url("../i/br.gif") no-repeat top left;
height: 9px;
width: 9px;
margin-right: -8px;
}
html>body #menuarea .menu .br{
margin-right: -16px;

HTML
-=-=-

Tyla wrote:
> This is the one I'm currently using:
>
> http://www.redmelon.net/tstme/4corners/

THAT's exactly what I was trying to do! :D

I got those list apart ones working, but ended up with a 2500px top left gif. It doesn't really like online dynamic generation of pages too, as sometimes corners would appear in strange places. Lemme have a look at the redmelon one.

[edit] Cha Ching. That's the boyo. Cheers for that link. Looking nice.

Pandaemonium wrote:
> Tyla wrote:
> [URL]http://www.alistapart.com/articles/customcorners/[/URL]
>
> [URL]http://www.alistapart.com/articles/customcorners2/[/URL]
>
> I was trying to avoid the style breaking if content is greater than
> the length of the side images used. Cheers anyway.

Either of those examples prevent this from happening. I've used them all over the place to total success in all browsers especially having to account for font resizing for accessibility.

It's getting the combination of background images and divs correct.

This is the one I'm currently using:

http://www.redmelon.net/tstme/4corners/

Tyla wrote:
> [URL]http://www.alistapart.com/articles/customcorners/[/URL]
>
> [URL]http://www.alistapart.com/articles/customcorners2/[/URL]

I was trying to avoid the style breaking if content is greater than the length of the side images used. Cheers anyway.

[URL]http://www.alistapart.com/articles/customcorners/[/URL]

[URL]http://www.alistapart.com/articles/customcorners2/[/URL]

Nearly got them.

Apart from bloody Opera.

Can anyone help. The bottom right in opera is about 5 pixels out, inwards.

[URL]http://img242.echo.cx/img242/9839/corner9ei.jpg[/URL]

Also, any tidying up tips would be appreciated. I'm *sure* I shouldn't need all those html>body's.

-=-=-=-=-
#menuarea {
background: transparent;
float: left;
width: 200px;
margin: 0 0 5px 5px;
}
#menuarea .menu {
border: 1px solid #444;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px 15px 5px 15px;
background: #ddd;
}
html>body #menuarea .menu{
margin-bottom: 0px;
}

#menuarea .menu .menuheader{
float: left;
background: transparent url("../i/tl.gif") no-repeat top left;
margin-left: -8px;
margin-top: -6px;
height: 9px;
width: 9px;
}

html>body #menuarea .menu .menuheader{
margin-left: -16px;
}

#menuarea .menu .tr{
float: right;
margin-right: -8px;
margin-top: -6px;
background: transparent url("../i/tr.gif") no-repeat top left;
height: 9px;
width: 9px;
}

html>body #menuarea .menu .tr{
margin-right: -16px;
}

#menuarea .menu .menufooter{
float: left;
margin-left: -8px;
margin-top: -3px;
background: transparent url("../i/bl.gif") no-repeat top left;
height: 9px;
width: 9px;
}
html>body #menuarea .menu .menufooter{
margin-left: -16px;
}

#menuarea .menu .br{
float: right;
margin-top: -3px;
background: transparent url("../i/br.gif") no-repeat top left;
height: 9px;
width: 9px;
margin-right: -8px;
}
html>body #menuarea .menu .br{
margin-right: -16px;

HTML
-=-=-