View Full Version : Help with CSS rounded corner in IE6

07-11-2008, 09:41 PM
I'm working on a site with rounder corners. The corners look good in Firefox, but of course IE6 is giving me issues. The lower left and right corners are not positioning correctly. Anyone have any ideas on how to get these to work?

Link: http://www.tincanstudios.com/pilgrimage/

CSS: http://www.tincanstudios.com/pilgrimage/styles.css

The container in question is <div class="round-box">

Thanks in advance!

07-11-2008, 10:10 PM
Just as a stop gap you may find something here (http://exitfegs.co.uk/RndCorn.html) to help.


07-11-2008, 10:23 PM
What a nice list of resources. Thanks Frank.

I would love to figure out why this isn't working using the code I already have, as I feel it's mostly bullet proof. Any ideas?

07-11-2008, 10:34 PM
Looks like IE6 is adding extra padding to those corner divs. You can see this in action by putting a background color on each corner div.

There are two ways to fix this. Either place "font-size: 0px;" in your code for the two divs, or set the background position to 100&#37; 0. Below is example CSS with both fixes:

.round-box .bl { width: 8px; height: 8px; background: url(images/bl.jpg) no-repeat 0 100%; position: absolute; bottom: 0px; left: 0px; font-size: 0px; }

On a side note, I like the design, very pleasant!

07-11-2008, 10:52 PM
Wow. Perfect. I've never used background position 100%.

Thanks so much for the help and the compliment!