News

  • Feb
  • 28
  • 2011

CSS Tip #3 Form Alignment

When attempting to align form input and button elements you can get a hodgepodge of results across browsers. Here is a trick to get things aligned:

input, button {
vertical-align: middle;
}

You can also restyle the borders, margin and padding to make completely customized appearance of fields and buttons. Just remember, button can be styled across all browsers to appear the same while an input of submit type cannot and will be subject to each browsers gui, most noticeably is Apple’s Safari.

  • Jul
  • 20
  • 2010

Merge Facebook Event and Group

So you are the Admin of a Facebook Group and an Admin of a Facebook Event and you would like to merge the two so the Group is the Host of your Event? Sounds simple, but is it?

According to Facebook logic it is of grave importance which is created first, and if you made the event first you’re out of luck.

I wonder if they also think the Chicken came before the Egg?

Facebook FAQ erroneously suggests:

In order for an event to appear in the Events section of a group’s page, you need to set the group as host of the event from the Edit Event page. In order to do this, you will need to be the admin of both the group and the event.

When you go to edit the event, you’ll find there isn’t a place to select your group as the host. Now what? … Facebook’s Blackhole Customer Service? Good Luck.

The answer is so simple you may kick yourself for not trying it sooner.

Read the full entry »

  • Jun
  • 28
  • 2010

CSS Tip #2 Replace Text with Image

The most common use of this technique is to replace an h1 title of a page with a graphical header. This is done so the markup is still an h1 tag with text and it is only visually changed to an image with css. By maintaining the structured text improves SEO and makes for a nice text only print option. Another common use is to turn a regular text hyperlink into a graphical button complete with mouseover effects without affecting the code behind the link itself.


h1 {
width: 760px;
height: 150px;
text-indent: -9999px;
overflow: hidden;
background: transparent url(header.jpg) top left no-repeat;
}

The text indent effectively overflows the text outside the visible range, and overflow hidden ensures when you select the h1 you don’t get the selection trail that extends to the hidden text.

Now if you want you can also do the same thing but instead of setting the background, width and height on the h1 itself, setting it on a hyperlink inside the h1 allows the background image to become a link. This is also how you would go about making a hyperlink into a graphic button.