Grow your CSS skills. Land your dream job.

box with rounded corners has gaps in IE

  • # April 21, 2010 at 7:33 am

    I’m trying to create a form box with rounded corners. It has to have rounded corners in all browsers so I’m using images at the top and bottom of the form but in ie7 (maybe in other versions of ie as well) the images have gaps and are not sitting flush to the form content. I’ve removed all borders, padding and margins so I’m really confused as to why there is a gap.

    Link to the proper page is here http://www.green-sun.co.uk/contact.html
    (its the form at the bottom left of the page)

    I’ve also created a second version http://www.green-sun.co.uk/contact-test.html
    that just has that box on the page, which only seems to have a gap on the top image for some reason.
    Any help much appreciated

    # April 21, 2010 at 7:41 am

    Create an IE 7 specific stylesheet and play around with the margins or check out http://css-plus.com/2010/03/ie-and-rounded-corners/

    # April 25, 2010 at 3:24 am

    the link has an error 404…

    but try using position:relative;
    then the position of the img use bottom:5px; or whatever the position of the top and bottom img of the rounded edge corners

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".