2

I have a button and it renders weird in Firefox (I'm testing various versions, but I've see it in all of it). For more details, I use Normalize.css.

After several tests, the only difference between the PC with the issue and the PC with the correct behaviour is the graphic card.

Also, the issue differs depending the page you're seeing (the button is in various pages).

Here you can see a few screenshots in different PCs: enter image description here

I have made a testcase in jsFiddle: http://jsfiddle.net/5R2NL/1/

Here's the HTML:

<div class="botonVerdeenlace">
    <a title="Title" href="#">I feel like a button</a>
</div>

And the relevant CSS:

body{font-size:68.75%}

.botonVerdeenlace {
    background: url("http://i.imgur.com/lk4ZJxQ.png") no-repeat scroll left center rgba(0, 0, 0, 0);
    display: inline-block;
    font-weight: normal;
    margin: 0;
    padding: 8px 2px 7px 29px;
}


.botonVerdeenlace a, .botonVerdeenlace a:visited {
    background: url("http://i.imgur.com/2IgIR37.png") no-repeat scroll right center rgba(0, 0, 0, 0);
    border: medium none;
    color: #FFFFFF !important;
    font-family: Arial,sans-serif;
    font-size: 1.1em;
    font-weight: normal;
    margin: 0;
    padding: 8px 1em 7px 7px;
    text-align: center;
    text-decoration: none;
}
  • What is causing that issue? It's certanly the video-card?
  • Is there any way to fix this issue without screw the design for other users?

EDIT: I try the suggestion from Nico O, and the hardware acceleration doesn't seems to have any influence in the rendering.

EDIT2: Use css3 is not an option, because there are A LOT of buttons in the web. If this is the only solution the client will prefer to leave it "bad".

Arkana
  • 2,831
  • 20
  • 35
  • 1
    Interesting. I can not really explain it. But I'd investigate in the direction of hardware acceleration. I've disabled it in my FF and the button looks still ok. But maybe it's one thing you can test. – Nico O Feb 21 '14 at 10:45
  • on the other hand. If you want to get rid of the problem now you can rebuild the button with CSS3. Or at least try to add the border (which seems to be the biggest problem) with CSS and not in the two images. – Nico O Feb 21 '14 at 10:49
  • Rebuild the button with css3 it's the best way. But the client wants support in IE7 and want to conserve the round corners at all ¬¬ I have tried to educate him, but with no success... – Arkana Feb 21 '14 at 11:04
  • 1
    I will give a more helpfull comment when i thought of one ;D but atm, i can not belive he want IE7. WinXP and therefore IE7 are dead in 46 days. – Nico O Feb 21 '14 at 11:09
  • It seems that the PCs with Intel video card doesn't have hardware acceleration or don't know where is it (it's a integrated card in a laptop). – Arkana Feb 21 '14 at 11:09
  • Personally, I'm with you, if I could choose I don't give a pixel for the user who already have IE7. – Arkana Feb 21 '14 at 11:12
  • try to open he firefox settings on the laptop. in the last tap (extended options?) In the Box "Browsing" should be a checkbox for hardware acceleration. You could try to de/activate it and see if the results are different. – Nico O Feb 21 '14 at 11:25
  • I'd just file a bug against Firefox, you probably will get more satisfactory answers there. – Markus Unterwaditzer Feb 21 '14 at 11:54

1 Answers1

0

Maybe it's "Hardware Acceleration (GPU Rendering)" fault. You can disable this on options and test again but you are better served using CSS3.

But my client wants IE7: declare on CSS your normal button that works on IE7 than make a media query that works for any resolution with your CSS3 button, that way the button still nice on IE7 and works pretty well on firefox.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Frank Vieira
  • 45
  • 1
  • 6
  • Sorry, Hardware acceleration don't make any difference. I know the issue dissappear with css3 but that's not an option for now. – Arkana Feb 21 '14 at 11:53
  • Why not an option ? You can use CSS3 to solve your Firefox problems and keep IE intact. Also, i'm quite sure if you play around with css like resizing the button or applying some rules you can solve this even with CSS2. – Frank Vieira Feb 21 '14 at 12:12
  • Is not an option because there are a lot of buttons in the website. The client don't want to pay so much develop hours, you know... – Arkana Feb 21 '14 at 12:17