dynagirl

Facebook CSS workaround number infinity | 9:11 am | 16 June 2010

If you’ve ever had to deal with any development for Facebook, you’ll remember that they strip out browser hacks from your CSS–fun for you, when the client OMG needs something to work in IE6. They also strip out the more forward-y browser-specific styles, while using them liberally themselves.

Their CSS, which was putting an unfortunate border on our buttons:

uiButton,
.uiButtonSuppressed:hover,
.uiButtonSuppressed:active,
.uiButtonSuppressed:focus { -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); }

Here’s how to get around that:

.uiButton:after {
content: "OMGFACEBOOKIHATEYOU";
display: block;
color: #fff;
margin-top: 44px; /* height of your button */
border-top: 1px solid #fff; }

Ta-da.

comments are closed

Site design and content c.1997-2009