...

View Full Version : Help with CSS rounded corner in IE6



asammons
07-11-2008, 10: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!

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

Frank

asammons
07-11-2008, 11: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?

medigerati
07-11-2008, 11: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!

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

Thanks so much for the help and the compliment!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum