Font joke

October 22nd, 2010

4 fonts walks into a bar, and the bartender yells:"Get out, I don't want your types here"

How to add icons to download links

October 5th, 2010

With use of the CSS3 select E[attr$="name"] is fairly easy to add icons to download links.

This selector looks for an element in which the attribute ends with "name". To look if the link in an ancor links to a pdf, the selector should look like this:

a[href$=".pdf"]

And to add the icon, the css looks like this:

a[href$=".pdf"] {background:url(fileicons/pdf.png) no-repeat;
padding-left:20px;display:inline-block}

This Works in IE7+ and all other modern browsers.

You can get icons from here

And download my stylesheet for every icon here

Click effect on links

October 4th, 2010

Test the click effect:
click me

The css for this is very simpel:

a:active {position:relative;top:1px;}

This will move the link 1 pixel down, when it is clicked.

It is also possible to use a little CSS 3 magic. With the use of text-shadow:
click me

a:active {position:relative;top:2px;left:2px;text-shadow:none;}
a {text-shadow: 2px 2px 2px #999;}

This css puts a text shadow on the link, and removes the shadow on click. Giving a nice effect.

CSS equivalent of nowrap attribute

October 1st, 2010

The css equivalent of nowrap attribute is:

white-space: nowrap;

Calling .Net JSON webservice with JQuery

September 30th, 2010
$.ajax({
type: 'POST',
url: '/webservices.asmx/MethodName',
data: '{ variable1 : "value1", variable2: "value2"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(m) {
eval('var JSONObject='+m.d);
$('#test_area').html(JSONObject.testjsonobject);
},
error: function(e){
$('#test_area').html("Error ("+e.status +"): "+e.responseText);
}
});

This calls the webservice "/webservices.asmx", and access the method "MethodName" with 2 variables.

The data variable have a ping (') at start and end. This way the entire JSON string is send to the webservice without interpretation. If it isn't done this way, JQuery will url encode the string as get variables, and the call will fail.

The succes function creates a JSON object "JSONObject". I use a hack way to create the object, you have to really trust the source to use the eval() function. Because if the sourse gives you javascript instead of a JSON string, it will be executed. I haven't found another way to do this yet.

My little script sends messages to a <div> with the id "test_area". So if you are testing it, remember to include that <div>.

IE6, the bane of webdevelopers

August 11th, 2009

07/09 2009: Updatet with IE NetRender url

Internet Explorer 6 is a browser that is from the year 2001. That is very old in a business moving as fast as the web.

Many users are stil using this old browser, even though 2 newer versions are available (IE7 & IE8). And most companies chose to support IE6 still, because of this.

I believe is like a catch-22, users don't upgrade cause "it works", and companies don't stop supporting it because users use it.

The bad thing about IE6, is that it don't support the newer web standards like css2 and png images. So developers have to use hacks and timeconsuming development to make webpages look nice on IE6.

The good part is, that many big webpages have stoppet support for IE6. Like youtube.

So what is holding us back?

Many companies are still holding on to Windows 2000, and it don't have support for IE above 6. Some companies have webbased programs that can only run on IE6. And upgrading a browser in a big company can be very time consuming.

What can we do?

There are a bunch of campaigns you can join, to let others know of this problem.

Webdeveloping for IE6

If you still need to develop to IE6, you will probably face the challenge of viewing your website in IE6. As default, you can't have IE6 installed together with IE 7 or IE 8.

To overcome the problem, there are some tools you can use.

Online tools:

Cross browser compatability testing
Lets you chose an OS and a browser, and opens them with vpn.

Browsershots
Submit an url, and the site takes screenshot of the webpage in different browsers.

Other Tools:

Superpreview
Great tool from Microsoft. Lets you see a webpage in IE6 and IE7/IE8 next to each other.

Virtual PC
Lets you install a virtual pc on your computer with an image. So you can have an image with IE6 and an Image with IE7. Get images here.

IE NetRenderer
A great quick online tool, to get a screenshot of an url in IE 5.5, IE 6, IE 7 or IE 8.

Webdeveloper tools, I use

June 19th, 2009

Firefox with Firebug, yslow and Webdeveloper addon

Filezilla for my ftp usage

7-zip for those rar files i get from time to time

Notepad++ for quick html, css and javascript editing

Virtual PC with images to test webpages in IE6, IE7 and IE8

Browser war. Microsoft taking a wierd step

June 19th, 2009

Just saw Microsoft new misguided browser comparison chart.

I'm speechless. I know they call it browser war. And in war, one of the best weapon is misinformation. But this is a very low blow, and from a company like Microsoft. It seems very desperate.

I use all 3 browsers on a daily basic. Chrome for surfing, and yeah it is the fastest. Firefox for webdevelopment (firebug, webdeveloper tools ect.). And IE for.. well for seeing if my webpages looks nice in IE.

I still believe IE is holding back the evolution of the web. There are so many things they could have added to IE8 (canvas, css3 etc.), but didn't.

I want to finish this rant with a humor link on how the chart should have looked:

Browser comparison chart

How to make italic (cursive) text with css

November 11th, 2008

In the stylesheet, use the font-style to make a text italic style:

font-style:italic;

Italic is also know as cursive.

Adding custom fonts to a website (downloadable fonts)

September 3rd, 2008

Adding custom fonts to website have been a big wish for many webdevelopers and webdesigners for a long time.

Today we have a range of about 10 websafe fonts to chose from. Thats not enough by far. We wan't more!

Read the rest of this entry »