It turns out that some input types are somehow replaced by images and the text you enter on your keyboard is added to a div with a script. Since no input element gets focus the keyboard on touch devices will not be visible and at least on my iPad you cannot even paste text. Maybe you could write another very complex script to emulate this behaviour but, less silly, why wouldn’t you just use some regular input types instead. You can actually style those using css, you really don’t need any images to do that.

Same with scrolling. All browsers on all devices since the early nineties can scroll a page, why would you want to write a script to emulate scrolling? This whole script is probably only there to be able to style the scrollbar and make it look the same in all browsers. The unfortunate side effect is that scrolling doesn’t work anymore on my touch devices. Now another complex script needs to be written in order to solve this issue, an issue that really shouldn’t exist in the first place. Really, nobody will complain if a scrollbar looks exactly the same as it does on every single page on the internet. But people will complain if they see something that resembles a scrollbar but doesn’t do anything.

The advice here is very simple: don’t try to fix things that work, you’ll break it.

I won’t complain about the silly loading bar you get to see for ten seconds before you get to see the actual data although I just cannot understand why it has to take that long. And I should complain about the incredible messy HTML, an unbelievable pile of inline style cruft, but I wouldn’t know where to start, this just looks like some sort of randomly generated vomit. I should definitely complain about the fact that I cannot use this site with my keyboard instead (or alongside with) my mouse but I already wasted enough time on this app. I surely should complain about the fact that the simple data the app provides is not accessible when JavaScript is turned of.

This app is actually so bad that I won’t link to it. (And i will never link to the crazy Web Framework that generated this dump and is responsible for some of these nice looking cruft machines that pop up all over the place. Please drink espresso, build grown up websites and leave the milk for the babies).

Design for users first, not just for good looks is a post from: Nerd

* {display:block;}

Or display inline, or table-cell or whatever. All elements, including title, style and head can be used for styling now. Have fun with it!

(I have only tested this on FF3.5 and Safari. I guess it works on more browsers).

Display everything is a post from: Nerd

<div style=”background:url(path/to/image-w100xh75.jpg) no-repeat 50% 50%;width:100px;height:100px;”></div>

Easy it is. Unless the usability expert comes knocking on your door. Background images don’t behave the same as normal images. In most browsers, for instance, you can’t easily download a background image by right clicking on it.

So you do want the background positioning but you also want some important behaviour of a normal image. Here it is: Centered images in the middle of a block with normal usability.

It does not work in fluid or flexible layouts of course. But it does work in all serious browsers and in IE7. Haven’t tested it in IE6 but there’s no reason it wouldn’t work there. I’m not sure if it creates a performance issue. The images are downloaded only one time, so that’s not an issue. The only problem might be double memory usage. I haven’t tested that.

Centered images in the middle of a block without (total) loss of usability is a post from: Nerd

One way to build a layout like this is to measure all possible box-sizes to the pixel, create all background-images for these boxes (a few hundred in this extreme case) and start writing a CSS file of a few thousand lines. I chose to see if there’s another way to do this, with less code and much less images (one). And here I present this other way.

Equal height cols with a flexible width

Basically what this technique comes down to is to place an absolutely positioned div inside a statically positioned floating div which is inside a relatively positioned div with overflow set to auto. The absolutely positioned div can inherit the left position and the width of its direct parent, but if you define its top and its bottom it will, off course, inherit these from the containing, relatively positioned div. And this relatively positioned div will get its height from the highest statically positioned floating div. Why didn’t you think of this before? (-:

Check out these examples

1. Equal height cols with a flexible width
2. Equal height cols with a flexible width, a border and padding between the boxes
3. Equal height cols with a flexible width, padding between the boxes, rounded corners, dropshadows and flexible background-colors

IE6 needs JavaScript. I didn’t bother to include it here. Opera needs an update in order to display this correctly, I filed a bugreport. IE7 has difficulties with percentages.

Equal height boxes with flexible widths is a post from: Nerd

The known problem with an image with a caption below it is that it is impossible to make the text as wide as the image without setting the width of the image on the caption.

<div class="image-with-caption">
 <img src="image.jpg" alt="">
 <p>This is a caption below an image and the caption ignores the width of the image.</p>
</div>

The above code will look something like this:

---------------------------
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
---------------------------
This is a caption below an image and the caption ignores the width of the image.

But we want it to look like this:

---------------------------
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
|                         |
---------------------------
This is a caption below an
image and the caption  is
as wide as the image.

This can be done by adding inline styles to the surrounding div (or to the caption itself).

<div class="image-with-caption" width="270px">
 <img src="image.jpg" alt="">
 <p>This is a caption below an image and the caption is as wide as the image.</p>
</div>

I don’t like inline styles. So there must be another way to set the width of the caption. Hello position:absolute!

.image-with-caption {
	float: left; /* we want this */
	position: relative; /* we need this */
}

.image-with-caption img {
	display: block; /* we don't need this but it solves things */
}

.image-with-caption p {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0; /* this will make it as wide as the image */
}

The above CSS will render our HTML as follows:

---------------------------
|                         |
|                         |
|                         |
|                         |
|                         |
|The caption is now placed|
|over the image, aligning |
|at the bottom            |
---------------------------

You can now decide to only show the caption when hovering over the image. Or you could add a margin below the image of two or three times the default line-height in order to fit the text below the image.

I know, I know, it is not the same as a flexible caption (flexible in height) below an image, and I sure know it can well result in unreadable and unaccessible text when the caption is very long (or the image is very small). And the photographer won’t be happy with text over his image and the copywriter won;t like his caption to be hidden. I just don’t like inline styles. And I love the power of position:absolute

P.S. Yes, I know there is a browser out there called IE6. If you understood what I wrote you can make up a fix. If you didn’t don’t use position:absolute.

Using position:absolute to avoid inline styles is a post from: Nerd

There are some very nice new attributes and attribute values I use on form elements that actually work in Opera. I used the required attibute, the type=”email” and the type=”url”. These form a efficient (but very ugly and unstyleable) client side form validation. Nice to have!

The best part of HTML 5 is that you will be able to remember every part of the HTML, even nerdy stuff like the doctype declaration. <!DOCTYPE html> is easy to remember. Just like <meta charset=”utf-8″>. So no more code searching and copypasting.

I left out the html, head and the body tags, browsers will put them where they are needed anyway, just like the tbody of a table.

You can’t use the W3C Validator for HTML like this, you’ll need the incredible validator.nu.

One thing to remember when starting to style your new HTML is to add display:block; to every new element like section. That’ll save you time. I’ll write about the CSS I wrote in a next post.

HTML 5 is a post from: Nerd