rounded corners screwed up on zoom

[vitalic]

anyone have any ideas?

hxxp://i28.tinypic.com/o6ef0o.png

when using the default browser zoom in firefox the corner images enlarge by a greater magnitude than the rest of the border (3px solid) which basically means they look awful.

has anyone come across this before and any way to make it grow proportionally?

[Paul O'B]

Hi,

I'm guessing what you are seeing is a rounding error when the page is zoomed and 1px of the background shows through. I wouldn't think that there is much you can do about that and without seeing what method you are using for the corners it would be hard to make a suggestion. Are you absolutely placing them into position? If so they may be better of in nested containers instead.

If that's the only issue you get on zoom then I wouldn't think it was worth the effort tracking it down or changing the layout a sits only a minor presentational defect.

[vitalic]

Yep, it's uber simple, four divs absolutely positioned over the underlying div. Nested containers would be overkill given that the affect is only needed for Javascript users, the corner divs are inserted client-side and then absolutely positioned into place, I guess the best solution in my case would be a non-image based JS approach but not sure it's worth the time investment.

[Paul O'B]

No it's probably too much effort to change but absolute images will always get misplaced by the odd pixel due to rounding errors when zoomed etc.

As an aside IE6 and 7 are bad at normal page size and always get the absolute right and bottom positions incorrect by 1px when the distance travelled is an odd number of pixels .

[vitalic]

I didn't know that, there is actually a similar visual defect on IE6, at normal page size on the bottom left and right corners, guess that explains it!

I hate having to explain to people why something can't be fixed, or isn't worth the effort to fix.

[Paul O'B]

Yes, I documented it here some years ago.

http://www.pmob.co.uk/temp/onepxgap.htm

Eric has a partial solution here.

[vitalic]

That fix worked a treat on the IE defect

[allofcraigs]

i cant wait until css3 and html5 become widespread standards

[raena]

Have you seen this one:

http://www.css3.info/a-border-radius-solution/

... in which the author uses images for IE, and border-radius or moz-border-radius for Firefox or Safari? This example is fixed width, but the principle is still the same -- you just make the positioned divs invisible, throw in your border-radius for well behaved browsers, then use some conditional comments to reveal the divs only in IE. Or I guess you could use JS to insert the styles, since you're using JS to insert the divs anyway.

[Paul O'B]

Have you seen this one:

http://www.css3.info/a-border-radius-solution/

... in which the author uses images for IE, and border-radius or moz-border-radius for Firefox or Safari? This example is fixed width, but the principle is still the same -- you just make the positioned divs invisible, throw in your border-radius for well behaved browsers, then use some conditional comments to reveal the divs only in IE. Or I guess you could use JS to insert the styles, since you're using JS to insert the divs anyway.

That should solve the OP's zoom problem in Firefox

[raena]

That should solve the OP's zoom problem in Firefox

Yup, I suspect that + your IE odd number fix should get some nice results for almost everyone.

[brothercake]

i cant wait until css3 and html5 become widespread standards

You'll be waiting a long time :P