Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

IE 7+8: round edges result in 2 borders #222

Closed
teschmitz opened this Issue Jun 16, 2012 · 1 comment

Comments

Projects
None yet
2 participants

I am applying rounded corners and a 1px border to a link - see CSS below.

PIE translates this correctly for IE6. On IE7 and IE8 I get two borders, however: one rectangular border and another following the rounded edges where I should just get the latter.

On a test page http://my.mutterings.co.uk/ie-test I use a red border to visualize the problem.

Please, note that on other, non-IE browsers the links have a negative left margin so they overlap.

I am viewing the IE rendering on http://netrenderer.com. I don't think this duplicate border issue is a netrenderer problem though as it consistently shows correct results for IE6.

category a.link-category

{
color: #ffffff;
background: #0a7abf;
border-radius: 0.8em;
border: 1px solid #17384c !important;
padding: 0.15em 0.8em;
}

Owner

lojjic commented Jun 16, 2012

You cannot use !important for your border style, because that prevents PIE from hiding it.

@lojjic lojjic closed this Jun 16, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment