Home/ Questions/Q 7798519
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T00:02:07+00:00

http://jsfiddle.net/KKL5G/ Please take a look at the above html and css for the buttons.

  • 0

http://jsfiddle.net/KKL5G/

Please take a look at the above html and css for the buttons.

The span that is used to show the right part of the button shifts 1px downwards on these browsers. Works correctly as expected on Firefox.

Windows: IE8, Opera, Safari
Mac: FF, Safari, Opera, Chrome

UPDATE 1] The bug is visible even in Firefox 11.0 windows randomly while changing the height of the window.

To reproduce it go to the jsfiddle link mentioned above and try to resize the result’s frame.. you might see the span flickering…
[Edit 2: Actually i was resizing the firebug panel in windows firefox when i noticed the jumping span in the right side of the button, earlier i thought it worked fine in firefox.]

I have also tried an all inline elements example.
http://jsfiddle.net/sbWCD/

P.S. The this simple image is just a placeholder for some more complex design, am not looking for a CSS3 solution..

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your code is way too complicated for what you want to achieve.
    Here’s a cleaned up version http://jsfiddle.net/KKL5G/4/
    It should work cross-browser.

    Using border-radius, it’s easy to make boxes with rounded corners and there is no need for a background-image.

    • 0