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] *******************************************************************
