Nothing wrong with it to my knowledge. I find semantic wise, both are
invalid, this is no fault of the designer, its a limitation to do with CSS.
I have never really used the div method.
On Oct 30, 2007 11:39 PM, akella <[EMAIL PROTECTED]> wrote:
> 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]
> *******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
*******************************************************************
