I discovered a method for achieving equal height columns that I can’t help but share. This technique involves the use of position: absolute with top and bottom set to zero. What makes this method unique is that it allows you to have equal height columns inside of a container, regardless of the height or position of the container.
I setup a demo on jsfiddle: http://jsfiddle.net/clintmckoy/C6z6M/
I’m making the switch from px’s to em’s in my CSS and I ran across this helpful hint today:
“Setting your default font-size to 62.5% means that the standard font-size on your web-page would be 10PX. Thus 1EM = 10PX, 1.5EM = 15PX, 1.2EM = 12PX and so on.”
So, set your body font-size to 63% and em calculations aren’t that bad after all!
In case this just doesn’t work for your current situation, here is a handy px to em calculator: http://riddle.pl/emcalc/
(Source: designbastard.com)
A few weeks ago I wrote a post about how to target Firefox in your CSS. Today I had an unusual issue that was appearing on Webkit browsers only and needed a quick fix. I came across a smart way of doing just that using a media query. Here you go:
@media screen and (-webkit-min-device-pixel-ratio:0) {
/*webkit only CSS goes here*/
}
I found this code on the website: CSS, Javascript, and XHTML Explained.
I’ve come across this issue a few times lately, where the value for a text input will not disappear in IE7 (Internet Explorer 7) by using text-indent alone. This becomes an issue when trying to implement a custom submit button that consists of a background image only.
The solution: Give the input a very high line-height and set the overflow to “hidden”.
input {
line-height: 500px;
overflow:hidden;
}
But unfortunately, this method does not work on FF (Firefox). You’ll still need to use the text-indent method as well. So, you’re finished product will look something like this:
input {
text-indent: -9999px;
line-height: 500px;
overflow:hidden;
}
I finally came up with the correct styling formula for vertically aligning text across all modern browsers, including Safari, Chrome, FF, and IE (6, 7, 8, & 9.) The secret is to set the height and line-height to the same value. So, your CSS would look something like this:
input {
height: 30px;
line-height: 30px;
}
Update: ‘line-height’ is only needed for IE7 and IE8. In some instances, you’ll only need to apply ‘line-height’ to those particular browsers.
I’ve had a few instances lately where I needed to target Firefox only in my CSS stylesheet. This is the best method I’ve found:
/* Target Firefox Only */
@-moz-document url-prefix() {
#selector {
margin-top: 100px;
}
}
