Button Built in CSS showing different font color in FF and Webkit

I'm quite confused by this one. I've build a "read more" button using mostly CSS (following this tutorial). Everything is working well, but the text is showing as white in Firefox but light blue in webkit (safari, chrome).

Here's the CSS:

.showcase-readmore { float:right; color:#ffffff; font:2em Futura, ‘Century Gothic’, AppleGothic, sans-serif; padding:14px; background:url(images/overlay.png) repeat-x center #0033cc; border:1px solid #0033cc; background-color:rgba(0,51,204,1); -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; border-bottom:1px solid #0033cc; -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); } .showcase-readmore:hover{background-color:rgba(0,51,204,0.6);} .showcase-readmore:active{position:relative;top:2px;}

and the HTML:

<a class="showcase-readmore" href="services">Read More</a>

This is how I see it in FF:

Button Built in CSS showing different font color in FF and Webkit

and Chrome:

Button Built in CSS showing different font color in FF and Webkit

with FF being the desired behavior. My only guess is that the transparency is somehow causing the white font to be opaque and blending with the blue background?

I'm stumped!


For me the text is white in both Firefox and Chrome, so I'm pretty sure there is some issue with another part of the CSS: the pseudo selectors on the link element.

Because you're styling a link here, the issue may be that a:visited overrules .showcase-readmore. To fix this, try to add the selectors to your button style:

.showcase-readmore:link, .showcase-readmore:visited {
/* ... */

Category:css Time:2010-11-04 Views:0

Related post

  • What's the best way to design a custom button that changes font color/size when selected? 2009-12-09

    I want to design a custom component that extends Button that will have two new styles: selectedColor and selectedFontSize. These will allow the button to have a different text label color and font size when the button is selected. (When I say 'select

  • Hovering over CSS transition in Safari lightens certain font color 2011-10-30

    In my CSS I defined a transition for a class. For some reason, when I hover over the class with the transition, the transition-duration for some reason alters the font color elsewhere (form placeholders and certain links). (This happens only in Safar

  • How can I turn the page's font color to green when a button is clicked 2012-03-06

    For example, this is my html code: ​<p style="color:blue">​I'm Blue</p> <p id="p_red">I'm Red​</p> <p>​I'm default, black</p> <input type="button" id="btn" value="Set color" /> css: ​#p_red{ color: red; }​ I'

  • Facebook Like Button - change font color? 2010-04-26

    Is it possible to change the color of text in a Facebook like button? Besides selecting a different color scheme, I don't see a way to adjust the font... --------------Solutions------------- Facebook has not released this feature yet. However, you ma

  • How can I create button using pure CSS which involves linear gradients and background color 2010-10-22

    How can I create button using pure CSS with a sold background color and on top of that and an oval shape gradient in the center of it. I don't want to use any external images.Here is the sample button. In this example background is solid black and th

  • UINavigationBar: buttons font color 2010-11-27

    I have UINavigationBar and i've changed background color for all back buttons with @implementation UINavigationBar (UINavigationMyToolbar) - (void) drawRect:(CGRect)rect { self.tintColor = <UIColor>; } But I couldn't find the answer how to chan

  • setting font color of button using XML and Java Swing Synth LaF 2011-05-31

    I'm using the Java Swing Synth Look and Feel. I'm able to specify the style of several components. Nonetheless, I'm not able to set the font color of a button for the default state. Text of buttons is always displayed in black, but when focusing/sele

  • IE8: CSS opacity filter results font color to become the same as the background div's background color 2011-08-30

    I've encountered a very strange bug: there's a div (#inner) placed inside an other (#container). If I give opacity to the inner element in IE8, the font color of the inner div (#inner) will become the same as the background-color of the outer (#conta

  • Font color not as per styling specified in css for textarea and select boxes 2011-11-08

    I'm trying to style a webform in my webpage, and the form has couple of textboxes, textarea and a select dropdown. I'm having hard time styling the text area and select dropdown; textboxes are looking as expected. For the textarea box, i used css lik

  • How to change the font-color on outlook by css? 2011-11-18

    Why my font color is set to white on outlook, even if I got CSS to overwrite it? With any other email reader (gmail, hotmail, etc), my font-color is ok! Anyone got a solution? --------------Solutions------------- Outlook uses the MS-word engine for r

  • Borders applying font color in CSS 2012-02-16

    As CSS beginner I noticed that if you do not declare border color in a shorthand form, but before that you declare font color, that color will apply to the former as well e.g. #crazyElement {color:red; border:1px solid;} both will be red. Moreover, i

  • jWYSIWYG set font color button 2012-03-22

    I am using jQuery WYSIWYG (https://github.com/akzhan/jwysiwyg) I realize that jwysiwyg now includes a color pallete that allows you to color text. But, what I want to do, is to have a custom button OUTSIDE of the editor that applies the color. Is the

  • How to modify FileField "browse" button attributes (font, color, size, etc) 2012-04-30

    I want to change the size, font color and font size of the default "Browse" button of the FileField. The below code is not working: class SubmitForm(forms.Form): uploadedfile = forms.FileField(required=True, label='File to upload:') def __init__(self

  • Office button is blank, grey, no color; I can not color cells or change font color 2013-04-01

    Working in excel, I notice that I can not change the font color to anything except black. Nor can I change cell color. Cell will remain white no matter what fill color I select. I notice too that Office button on the upper right is grey color only. A

  • Can I change default color of font color button? 2014-11-14

    The ribbon has a font color button, which when I start MS Word 2010 defaults to red. Is there any way to have that default to a different color of my choosing? --------------Solutions------------- I did find a work-around: Open an instance of Word at

  • CSS Font Color Mis-interpretation by IE8, but not IE7 or IE9 2012-01-25

    I'm having an issue with a WordPress theme project I'm working on (the theme is based on the Roots Theme for WordPress). I'm having trouble controlling the font color of the main navigation sub-menus: but only in IE8. The font appears to be the same

  • How to implement this button in HTML / CSS? 2011-06-03

    This is a button that has been originally implemented and styled in Silverlight. How to implement this button in HTML/CSS? Note the different gradients in the border and the button background and also the rounder corners in the border. The border wid

  • Facebook like: font color 2011-09-12

    I using the like button found on the following page: http://developers.facebook.com/docs/reference/plugins/like/ Is there any way to change font color to white as black doesn't show up on my background. thank you! --------------Solutions-------------

  • Preserving mixed font color when global search and replace 2012-04-08

    Greetings. I have a question. I am QA engineer and we are using Excel 2007 and have about 250 cells in Column F that contain multiple colors. For example cell F77 contains: + 500 ded EHC cexp 25-07-07 (in RED color) + 200 ded nPDD cexp 27-07-07 (in G

Copyright (C) pcaskme.com, All Rights Reserved.

processed in 0.912 (s). 13 q(s)