Pencils Down » CSS

Help for Web Programmers at the Mercy of Designer Fonts

admin — Fri, 27 Jan 2012 13:43:51 +0000

Working with a client where the designer they hired produced a nice looking design. However, even though promising to just use standard fonts there are a couple of very conspicuous parts of the design that use non-standard fonts. Sound familiar?

Google to the rescue! (I don’t know how they control what people spend time/money developing) I saw a reference to Google Fonts in a HN post the other day. What’s that?

Google Web Fonts provides high-quality web fonts that you can include in your pages using the Google Web Fonts API.

Just like everything else you can use google for, (especially CDN access to includes and the like) you can make reference to some non-standard font in the Google font set and then use it pretty much like any other font in CSS (have to quote the font name versus plain text(=standard font)). Again, with their simple example:

Making the Web Beautiful!

So, next time you are graced with a design present you can just smile.

Finally, Rounded Tabs Without Using Images

admin — Fri, 13 Jan 2012 14:00:37 +0000

Someone smart figured out a way to get rounded corner tabs in HTML/CSS without using any images at css-tricks.com. You can see an example at http://css-tricks.com/examples/RoundOutTabs2/.

Here is an image of the sample (note, the round outs at the bottom of the selected tab):

Browser Addin to Tell You What Font is in Use

admin — Mon, 31 Oct 2011 12:55:29 +0000

http://www.chengyinliu.com/whatfont.html

Simple: point and click

Surprise: IE does a better job at CSS than FF

admin — Thu, 04 Sep 2008 12:34:32 +0000

I have been struggling on a Joomla site that started out with the quaint idea of table-less design. If you read any of the jibberish out there the current web development thinking is that tables are passe’ and css-only layout is the way to go.

Great idea. Let me know when you find a browser that does anything consistently.

Surprisingly, I have been finding that IE does a better job at layout than FF. I guess this makes sense as IE accounts for all kinds of developer hacks whereas FF and the like take the high road: if you don’t follow the rules I quit. However, the result is that IE appears to layout ‘better’ than FF. So, taking a noble approach really doesn’t work. Yet another surprise, huh?

Some of the simple things that can be done easily with a table layout but can be done painfully using css: virtually any vertical spacing, being exact about width, ditto height. These are not unusual features of a web page. I think it’s great that the W3 committees get together and design really interesting features, but give me something that works, today.