Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help with CSS rounded corner in IE6

    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!

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Just as a stop gap you may find something here to help.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder medigerati's Avatar
    Join Date
    Jul 2005
    Location
    San Antonio, Tx
    Posts
    163
    Thanks
    0
    Thanked 7 Times in 7 Posts
    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:

    Code:
    .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!
    If you need a little more help, I'm available as a Website designer in San Antonio
    ----------
    If I've helped, please check out my friend's nature photography and let me know if you like anything.

  • Users who have thanked medigerati for this post:

    asammons (07-11-2008)

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    22
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow. Perfect. I've never used background position 100%.

    Thanks so much for the help and the compliment!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •