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: [email protected] > > 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] *******************************************************************
