May be i'm missing something, but what's wrong with wrapping divs?
Much more stable approach...
smth like this:
<div class="wr1"><div class="wr2"><div class="wr3"><div class="wr4">
[content]
</div></div></div></div>
.wr1{background:url(corner-top-left.png)}
...
On 10/30/07, James Jeffery <[EMAIL PROTECTED]> wrote:
> You can try it out for yourself by changing the images to a solid color
> and change the font-size in the body to 1em and test in IE5.5.
>
> See what you come up with.
>
> On Oct 30, 2007 4:46 PM, James Jeffery <[EMAIL PROTECTED]> wrote:
> > I was having a slight issue using <span> tags, the problem with IE5.x.
> > I fixed it and
> > it now displays perfect. I had a problem that when text was made larger in
> > IE5.x
> > the 2 corner images to the right would shift one pixel to the left and
> > it displayed messy.
> >
> > If i add font-size: 0.9em to the body it fixes it, if i add font-size:
> > 1em the problem is
> > still there. Not sure why this happens, but would love to know. It is
> > fixed by the way,
> > im just curious:
> >
> > ------------------------------------------------------------------------
> >
> > <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
> > "http://w3.org/TR/html4/strict.dtd";>
> > <html lang="en-GB">
> > <head>
> >
> > <title>Rounded Corners Test</title>
> >
> > <style type="text/css" media="all">
> >
> > html * {margin:0; padding:0;}
> >
> > body {padding: 1em; font-size: .9em}
> >
> > #news {
> > position: relative;
> > background: black;
> > width: 15em;
> > color: white;
> > padding: 1em;}
> >
> > #news span {
> > width: 9px; height: 9px;
> > position: absolute;}
> > #topLeft {
> > background: url("images/topLeft.gif") top left
> > no-repeat;
> > left: 0; top: 0;}
> > #topRight {
> > background: url("images/topRight.gif") top right
> > no-repeat;
> > right: 0; top: 0;}
> > #bottomLeft {
> > background: url("images/bottomLeft.gif") bottom
> > left no-repeat;
> > left: 0; bottom: 0;}
> > #bottomRight {
> > background: url("images/bottomRight.gif") bottom
> > right no-repeat;
> > right: 0; bottom: 0;}
> >
> > </style>
> >
> > </head>
> >
> > <body>
> >
> > <div id="news">
> >
> > <span id="topLeft"></span>
> > <span id="topRight"></span>
> >
> > <p>This is an example of a rounded corners Div that allows
> > for expansion</p>
> > <p>This is an example of a rounded corners Div that allows
> > for expansion</p>
> > <p>This is an example of a rounded corners Div that allows
> > for expansion</p>
> > <p>This is an example of a rounded corners Div that allows
> > for expansion</p>
> >
> > <span id="bottomLeft"></span>
> > <span id="bottomRight"></span>
> >
> > </div>
> >
> > </body>
> > </html>
> >
> >
> > On Oct 30, 2007 4:18 PM, Mohamed Jama <[EMAIL PROTECTED]> wrote:
> > > Depending on the background, if the corners blue and the background is
> > > white then there is no problem a normal gif would do best but if the
> > > background is gradient or patterned then maybe in Photoshop when saving
> > > for web make sure its gif and set the matte option to a color close
> > > enough to the background color.
> > >
> > > Or I just use PNG with absolute transparency, I know IE6 doesn't support
> > > it but with the PNGFIX JavaScript it should work just fine.
> > >
> > > M. Jama
> > >
> > > big:interactive
> > > 91 Princedale Road
> > > Holland Park
> > > London W11 4NS
> > > Email: [EMAIL PROTECTED]
> > > Direct: +44 (0)20 7313 2262
> > > www.biggroup.co.uk
> > >
> > >
> > > -----Original Message-----
> > > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
> > > On Behalf Of James Jeffery
> > > Sent: 30 October 2007 15:53
> > > To: wsg@webstandardsgroup.org
> > > Subject: [WSG] Rounded Courners .... Your Take
> > >
> > > What methods do you find best when creating rounded corners and
> > > which methods are the most supported?
> > >
> > > I have been using span tags and absolute positioning. I have also
> > > recently started to use the sliding doors method because you can
> > > achive nice rounded boxes with some nice effects, even better if
> > > you use PNG's.
> > >
> > > Using the span method i did find a bug in IE 6, the 2 corner span's
> > > wouldn't sit flush with the bottom of the containing div, although it
> > > displayed fine in every other browser i tested it on and they could
> > > be resized fine. It was odd though, because IE 5.x display them
> > > perfect, was just IE 6.
> > >
> > > Lets have your beloved methods then guys.
> > >
> > > James
> > >
> > >
> > > *******************************************************************
> > > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> > > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> > > Help: [EMAIL PROTECTED]
> > > *******************************************************************
> > >
> > >
> > >
> > >
> > > *******************************************************************
> > > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> > > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> > > Help: [EMAIL PROTECTED]
> > > *******************************************************************
> > >
> > >
> >
>
>
> *******************************************************************
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> *******************************************************************
>
>
--
С уважением,
Юрий "akella" Артюх
http://cssing.org.ua
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
