The joys of Vertical-Align using inline-block

February 26th, 2010

I am being sarcastic.   As designs are getting more complex and more and more developers are ditching IE6… we are finding new problems using these new styles.

Specifically, we need a way to make different elements (all with different margins and line-heights and font-sizes) to be able to line up on a base line.   Vertical Align does a good job of this, in most cases.. but also brings new problems with some CSS3 styling.

CSS buttons:  it’s now possible to create beautiful buttons without restoring to images.   Using border-radius, text-shadow, background gradients etc.   we can do so much with modern browsers and still have the buttons degrade gracefully.

However

Vertical align is now confused.    Using vertical-align:baseline will line up all text wonderfully, even images line up with the text.   But what about css buttons?   Well, it works ‘not-so’ wonderfully.

Check my lab page for the results.

Want to see what it looks like in a modern browser?  here is a screenshot.

Screenshot of the results of vertical-align:baseline;

vertical-align:baseline; does exactly as you would expect, but that becomes problematic because we dont want a css button to align from it’s text; we want it to align to the bottom of the button.

Solution:

Well, I dont have one yet.  I am looking into it.. and will post it as soon as I find one.   Sorry.

If you have a solution..  please leave your comments.

Using Regex in Textmate to convert HTML comments to Ruby comments

December 17th, 2009

To cut down on space, I felt it would be easy enough to convert HTML comments to Ruby comments, so I looked for a way to do this site-wide.

Using the Regex option in textmate’s “find in project” utility will get you the results you need.

Using a simple RegEx…

<!--(.*)-->

and then using the replace

<%#$1%>

Will convert ALL HTML comments to ruby comments.

Warning..  if you have ruby inside an HTML comment, this could prove disasterous..  ie.

<!--<a href="<%= variable_name %>">a link</a>-->

Or, if you use comment shorthand. (so I like to call it.)

<!--a href="blah.html">a link</a-->

Oh!  and uh.. don’t forget to check the option for Regular expressions..  or else it wont work at all.   hah!

IE8 rendering modes… useful when things go wrong in IE8.

December 11th, 2009

There are two different modes for IE8 rendering of a page..

They now have a X-UA compatibility meta tag that allows you to change the mode on a per-page basis.

NOTE: it’s also important to note that this tag only works as long as it comes BEFORE the
link and script tags in your page/header

1. IE7 mode.
<meta http-equiv=”X-UA-Compatible” content=”IE=7″ />
This means that all the IE7 hacks and quirks will be available in ie8.

2. IE8 strict mode
<meta http-equiv="X-UA-Compatible" content="IE=8" />
This renders using the IE8 engine. This is the mode you should use unless there is no way around the issue you are having with your page. And where possible, only use this on the one page that needs it. Again, downgrading to IE7 mode means that users will be using IE7 and it's quirks. (slower javascript engine, layout quirks etc.)

Testing for elements is good, but watch out for prototype.

November 3rd, 2009

So using css selectors is fairly easy in Prototype:

finding and element with ID:

$('name_of_id')

finding an element(s) with other selectors: (I am only using one example)

$$('.className')

Now before looking for an element, it’s always good to test whether it exists first.

So lets test for the element, and if it’s there… hide it.

if ( $('name_of_id') ) {
$('name_of_id').hide();
};

Important notice:

Keep in mind that using the prototype Utility methods $() and $$() automatically extends the DOM element it’s calling.
What does that mean?
It means that there are many prototype methods added to the DOM element.
so you can do this:

$('name_of_id').hide();

but try doing that here:

document.getElementByID('name_of_id').hide();

because the DOM element is not extended with prototype methods.

Testing for elements before using

So using the single dollar sign selector will look like this:

if ( $('name_of_id') ) {
$('name_of_id').hide();
};

However!
The above code is testing whether an object exists, but using the double dollar will fail.

Instead use this:

if ( $$('.className').length > 0 ) {
$$('.className').hide();
};

Why?  Because using the double dollar selector automatically creates an array.   Therefore, testing for $$(”) will always return true.  That’s bad.

This is why using the length property will return an array.  Even if there is no element in the DOM.

ie.  $$('.noClass') == []