The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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
    (its the form at the bottom left of the page)

    I’ve also created a second version
    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

    This reply has been reported for inappropriate content.

    Create an IE 7 specific stylesheet and play around with the margins or check out

    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed