Preview and Create CSS3 boxes with shadows, rounded corners, gradients, text shadows, and more all without using a single image. It's about freaking time!!!
This site will let you edit the CSS directly on the page (without using an element inspector).
Pretty cool...
Because the world isn't a perfect place, that's why.
If you're coding a nice clean form and you want your <select> tags and your <input type="text"> tags all to be the same width, you would think that:
input[type=text],
select {
border: solid 1px #c2c1c1;
width: 150px;
padding: 2px;
}
...would do the trick.
But no, <select> Renders differently (and it always has, remember that old z-indexing issue in old IE browsers?). It turns out that when you set the width of a <select>, that is the width it gets.
When you set the width of the <input type="text"> (and any other element), it gets that width + any padding you set + the border width. <select>doesn't roll that way
So after you set the above styles, you then need to set a special width for :
select {
width: 156px;
//needs to be input[type=text] width + [2×(border and padding)] }
A PITA, but that's like in the UXDEV world...
I just recently learned, while testing the app I am working on, that is the app is using your email address for a user name, you can create multiple usernames for testing using just one gmail address.
Apparently, is doesn't matter where, (or how many), (.)'s there are in a gmail address before the @.
So if your gmail address is lastname.firstname@gmail.com, you can use the following iterations and they will all come back to your gmail account:
It is a pretty handy feature.
I was looking for a way to target IE7 and not IE8. I found my answer here:
"Please note that this is not a page to find hacks for IE 8 but rather how to target IE 7 without also targeting IE 8. All hacks are valid CSS. Please use wisely."
from css-class.com
"When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it's not immediately obvious how this can be done..."
MJT has a very simple CSS method for anchoring the footer to the bottom of the page. Learn about it on his blog:
Matthew James Taylor > Design Blog > Get down! How to keep footers at the bottom of the page
Apparently the above solution didn't work as desired.
A colleague did some further investigating and found this:
There are a lot of liquid layout templates out there, but none of them ever seem meet the requirements that I often come up against.
For example, I need a liquid layout that:
After mucking about with this I am happy to report success! The key was to get away from using percentages and absolute positioning.
Percentages work well when everything is liquid. But when it is specified that one or two column need to have a fixed width, then using percentage widths breakes down.
I struggled with this. "There has to be a way!!!"
I mucked around with nestin absolutly positioned elements inside a relativly positioned element. Nope.
Then remembering the method on how to "center" a <DIV> using margin: 0px auto;, it dawned on me. Instead of trying to define the width, define the margins instead. Worked like a charm. The key thing to remember is to set the left and right margins to be equal to the widths of the left and right columns.
The layouts are have a minimum width designed for 1024 screen resolutions. Any smaller that that and all liquidity stops and scrollbars appear. I picked 1600px as tha maximum to stretch to, because at some point you may no longer want your stuff to stretch.
I've tested these screens on all browsers (IE7, IE8, FF 3.5, Opera 10.0, Chrome 2.0, and Safari 4.0 (for windows). I however no longer have access to IE6, so I couldn't test it on that browser.
The bonus with this method is that it is ridiculously simple.
