When cod­ing web pages, a com­mon prob­lem is align­ing (link) text ver­ti­cally, often in rela­tion to an icon. This is eas­ily accom­plished by set­ting height and line-height equal and by adding padding for the icon which is set as the background-image cen­tered vertically.

<style>
a {
  background:url('16x16icon.png') no-repeat left center;
  display:block;
  height:16px;
  line-height:16px;
  padding-left:20px;
}
</style>
<a href="#">Link Text</a>

But what if the link text needs to span more than one line for the given width? What if the icon is taller than the text height?

(more…)

I read an arti­cle titled, “Mod­ern CSS Typog­ra­phy and Font Styling Exam­ples”, and though mis­takes and omis­sions weren’t major, I felt com­pelled to com­ment on them. My com­ment got so long, I fig­ured a quick blog post would be bet­ter than a long-winded comment.

(more…)

I finally got around to spin­ning off MyGoogle­Cal as a sep­a­rate web­site. I opted to rename the script to RESTYLEgc to avoid step­ping on Google’s toes. It was some­thing that’s been ges­tat­ing over the past year. I com­pleted the site over the hol­i­day week­end since I had the time avail­able. The new site is at www.restylegc.com. I’m also host­ing the script at Google Code, and I even added a Google Group to facil­i­tate dis­cus­sions. After see­ing the com­ments top 100, I real­ize a blog really isn’t suit­able for lengthy dis­cus­sions. Hope­fully, the forum and wiki fea­tures will be bet­ter for the end-user.

I updated MyGoogleCal4 with a small bug­fix this week­end as well. That will be the last update. Future devel­op­ment will con­tinue with RESTYLEgc. Since the code was orig­i­nally pub­lic domain, I opted to go with an MIT open source license. I also got the code in a Sub­ver­sion repos­i­tory which I should’ve done a long time ago. With the Issues tab at Google Code, I can bet­ter track and encour­age bug reports and fea­ture requests.

The code is still free, but paid sup­port is avail­able. I’ve also got some other ideas of where I want to take the site. So stay tuned!

Get­ting CSS rules to work across all browsers is a con­tin­u­ous fight. Thank­fully, there are workarounds and DHTML meth­ods to cor­rect many of these prob­lems, and if those fail, reluc­tantly there are hacks avail­able. Unfor­tu­nately, it seems I’ve run into a dif­fer­ence of opin­ion between the browsers, most likely as a result of the W3 Con­sor­tium fail­ing (yet again) to be explicit with their stan­dards. The prob­lem is the dif­fer­ence between the way Fire­fox and Opera inter­pret the “word-spacing” CSS prop­erty ver­sus the way Safari and IE inter­pret the prop­erty. More specif­i­cally each browser treats the non-breaking space dif­fer­ently. FF/Opera both respect the non-breaking space and Safari/IE both ignore the space. For exam­ple, if the text is “first foo bar last”, FF/Opera would like:

first        foo bar       last

whereas in Safari/IE the text would appear like:

first        foo        bar        last

Per­son­ally, I agree with the FF/Opera devel­op­ers and feel that the non-breaking space should be respected since I’m explic­itly telling the browser that words to either side of the non-breaking space should be treated as a unit. So now I’m going to have to put each phrase in some sort of HTML block and depend on a com­bi­na­tion of padding and mar­gins to accom­plish the same effect in order for it to be cross-browser compatible.