Josef Richter » webdesign

IE6 no more. And IE7 and IE8…

Josef Richter — Tue, 18 Aug 2009 19:56:58 +0000

UPDATE: now with new Opera icon

You may have heard about the IE 6 no more initiative. It asks webmasters to put a banner on their page, which detects Internet Explorer 6 and suggests to download ‘a modern browser’ instead.

While I generally support the initiative, the banners are unusable for me. One of the browsers suggested is Internet Explorer 8. I would never ever dare to suggest anyone using any version of Internet Explorer made so far. So I made my version of the banner:

You are using a subprime browser

It may render this site incorrectly. Please upgrade to a modern web browser.

What’s different?

It shows up to users of all versions of IE. Yes, including those with IE8.
It suggests Opera instead of IE8, along with FIrefox, Safari and Chrome

I also changed the design a bit to be more minimalist. Feel free to grab the below code and put it on your website. The images are hosted here, so you don’t need to download them (but feel free to do so). You can also adjust the code to better match your website design.

I made two sizes of the banner: 640×75 and 470×50 (for this blog).

So here is the code for 640×75 banner:

and here for the 470×50 version:

Please leave a comment if you like it. Thank you and enjoy!

CSS positioning with vertical spacers

Josef Richter — Wed, 08 Jul 2009 09:54:44 +0000

Making layouts in CSS is a real pain. To me it’s like cleaning toilet with a toothbrush – it can be done, you can even achieve great results, but you would probably choose different tool if you could… The community, including Eric Meyer and Shaun Inman obviously longs for a real layout system.

Before we get one, if ever, everyone’s using various hacks. Here is mine – the vertical spacers. I use Blueprint or 960.gs for layout and horizontal positioning and supplement them with this easy piece of html+css. If you need lots of irregular vertical spacing, like me in the below screenshot with arrows where vertical spacing is needed, this might help.

So the code is really simple. First we define css classes:

.h10 {
	margin-top: 10px;
}

.h20 {
	margin-top: 20px;
}

.h50 {
	margin-top: 50px;
}

.h100 {
	margin-top: 100px;
}

hr {
	visibility: hidden;
	clear: both;
}

The usage in HTML may be as follows:

As you can see you can get various heights by combining the classes. Hardcore CSS proponents may say HTML shall not bear any formatting info. Well, this might be true, but in my view it’s pure theory. Most CSS frameworks breach this rule as well and as long as CSS is so bad for layouting, I don’t care.

Enjoy! If you have any suggestions how to develop this method please leave a comment. Thank you.

MooTools Rabid Ratings with stars

Josef Richter — Thu, 27 Nov 2008 09:15:45 +0000

I used Michelle Steigerwalt’s rating system in a recent project, but wanted to have simple stars with no effects instead of hearts. This is an easy exercise in Photoshop, but for those of you who don’t have Photoshop and/or don’t know how to do their version, here is the star version for download (or use widget in sidebar). The result looks like this (static here…):

Enjoy.

Auto-fit background image in CSS

Josef Richter — Sun, 23 Nov 2008 21:35:47 +0000

I was trying to implement a background image which automatically resizes with the browser window. I was inspired by this lovely site: http://www.ringvemedia.com/. I googled out some solutions, however, none of them seemed to work just right. After few experiments, I arrived to this solution, which seems to be working so far:

UPDATE: also removed the scrollbars

body {
overflow-y: hidden ! important;
overflow-x auto ! important;
}

#background {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}

#content {
z-index: 2;
position: absolute;
}

#background img { width: 100%; }

Lorem ipsum

update: this solution is implemented at http://www.lachmani.cz/ – check it out!

Any better solutions out there? Any suggestions how to improve it?